@crowdstrike/ember-toucan-core@0.4.1

Patch Changes

• #304 23df6cb Thanks @davideferre! - Add event.preventDefault() when clicking on disabled button to prevent submitting a form

@crowdstrike/ember-toucan-form@0.4.0

Minor Changes

• #254 532ab89 Thanks @clintcs! - Add Multiselect test helpers.

• #253 c18922f Thanks @ynotdraw! - Both Textarea and Input Controls are now full width by default.

  The Textarea Control markup was adjusted to account for collision with the resize handle and focus/error shadows.

  The Input Control now has small padding along the x-axis.

• #257 ce91639 Thanks @clintcs! - Remove Button's test helpers

Patch Changes

• #246 0e817b6 Thanks @ynotdraw! - (internal) Updated both packages to use the <template> tag and gts file extension.

• #248 52ded27 Thanks @clintcs! - add Autocomplete test helpers.

• Updated dependencies [532ab89, 0e817b6, 52ded27, c18922f, ce91639]:

  • @crowdstrike/ember-toucan-core@0.4.0

@crowdstrike/ember-toucan-core@0.4.0

Minor Changes

• #254 532ab89 Thanks @clintcs! - Add Multiselect test helpers.

• #253 c18922f Thanks @ynotdraw! - Both Textarea and Input Controls are now full width by default.

  The Textarea Control markup was adjusted to account for collision with the resize handle and focus/error shadows.

  The Input Control now has small padding along the x-axis.

• #257 ce91639 Thanks @clintcs! - Remove Button's test helpers

Patch Changes

• #246 0e817b6 Thanks @ynotdraw! - (internal) Updated both packages to use the <template> tag and gts file extension.

• #248 52ded27 Thanks @clintcs! - add Autocomplete test helpers.

@crowdstrike/ember-toucan-form@0.3.1

Patch Changes

• #241 1eda28b Thanks @clintcs! - Improve documentation consistency.

• #244 3312a38 Thanks @ynotdraw! - Adds "Select all" functionality to the Multiselect via a new component argument. Provide @selectAllText to opt-in to the functionality.

• Updated dependencies [d3b7d42, 1eda28b, 3312a38]:

  • @crowdstrike/ember-toucan-core@0.3.1

@crowdstrike/ember-toucan-core@0.3.1

Patch Changes

• #230 d3b7d42 Thanks @joelamb! - horizontally centre disabled button label

• #241 1eda28b Thanks @clintcs! - Improve documentation consistency.

• #244 3312a38 Thanks @ynotdraw! - Adds "Select all" functionality to the Multiselect via a new component argument. Provide @selectAllText to opt-in to the functionality.

@crowdstrike/ember-toucan-form@0.3.0

Minor Changes

• #232 3d6c159 Thanks @ynotdraw! - Updated all form elements to have the w-full class, making them full width by default. The width of the element is now determined by the container. To restrict the width of the element, use a wrapping tag with an appropriate class name applied.

• #238 40465de Thanks @clintcs! - Replace Multiselect's :noResults block with a @noResultsText argument.

• #226 9ef84d2 Thanks @clintcs! - Removed from Autocomplete support for @options as an array of objects.

• #240 b59a575 Thanks @clintcs! - Make Autocomplete @noResultsText required.

Patch Changes

• #222 ff50f27 Thanks @ynotdraw! - Expose the :secondary block and Character Counter component from <ToucanForm input and textarea components.

  <ToucanForm @data={{data}} as |form|>
    <form.Input @name='input'>
      <:label>Label</:label>
      <:hint>Hint</:hint>
      <:secondary as |secondary|>
        <secondary.CharacterCount @max={{255}} />
      </:secondary>
    </form.Input>
  
    <form.Textarea @name='textarea'>
      <:label>Label</:label>
      <:hint>Hint</:hint>
      <:secondary as |secondary|>
        <secondary.CharacterCount @max={{255}} />
      </:secondary>
    </form.Textarea>
  </ToucanForm>

• #227 c8a4eb1 Thanks @ynotdraw! - Added form.Multiselect support.

  <ToucanForm @data={{data}} as |form|>
    <form.Multiselect
      @hint='Hint'
      @label='Label'
      @name='selection'
      @noResultsText='No results'
      @options={{this.options}}
    >
      <:chip as |chip|>
        <chip.Chip>
          {{chip.option}}
          <chip.Remove @label={{(concat 'Remove' ' ' chip.option)}} />
        </chip.Chip>
      </:chip>
  
      <:default as |multiselect|>
        <multiselect.Option>{{multiselect.option}}</multiselect.Option>
      </:default>
    </form.Multiselect>
  </ToucanForm>

• #200 91204aa Thanks @ynotdraw! - Added an Autocomplete component to both core and form packages.

  If you're using toucan-core, the control and field components are exposed:

  <Form::Controls::Autocomplete
    @onChange={{this.onChange}}
    @options={{this.options}}
    @contentClass='z-10'
    @selected={{this.selected}}
    @noResultsText='No results'
    placeholder='Colors'
    as |autocomplete|
  >
    <autocomplete.Option>
      {{autocomplete.option.label}}
    </autocomplete.Option>
  </Form::Controls::Autocomplete>
  
  <Form::Fields::Autocomplete
    @contentClass='z-10'
    @error={{this.errorMessage}}
    @hint='Type "blue" into the field'
    @label='Label'
    @noResultsText='No results'
    @onChange={{this.onChange}}
    @options={{this.options}}
    @selected={{this.selected}}
    placeholder='Colors'
    as |autocomplete|
  >
    <autocomplete.Option>
      {{autocomplete.option.label}}
    </autocomplete.Option>
  </Form::Fields::Autocomplete>

  If you're using toucan-form, the component is exposed via:

  <ToucanForm as |form|>
    <form.Autocomplete
      @label='Autocomplete'
      @name='autocomplete'
      @options={{options}}
      data-autocomplete
      as |autocomplete|
    >
      <autocomplete.Option data-option>
        {{autocomplete.option}}
      </autocomplete.Option>
    </form.Autocomplete>
  </ToucanForm>

  For more information on using these components, view the docs.

• Updated dependencies [1669550, 3d6c159, 40465de, 9ef84d2, b59a575, 91204aa, 50b4f24]:

  • @crowdstrike/ember-toucan-core@0.3.0

@crowdstrike/ember-toucan-core@0.3.0

Minor Changes

• #232 3d6c159 Thanks @ynotdraw! - Updated all form elements to have the w-full class, making them full width by default. The width of the element is now determined by the container. To restrict the width of the element, use a wrapping tag with an appropriate class name applied.

• #238 40465de Thanks @clintcs! - Replace Multiselect's :noResults block with a @noResultsText argument.

• #226 9ef84d2 Thanks @clintcs! - Removed from Autocomplete support for @options as an array of objects.

• #240 b59a575 Thanks @clintcs! - Make Autocomplete @noResultsText required.

Patch Changes

• #219 1669550 Thanks @ynotdraw! - Added an Multiselect component.

  It has a similar API to Autocomplete, but allows for selecting multiple options rather than only one.

  <Form::Controls::Multiselect
    @contentClass='z-10'
    @noResultsText='No results'
    @onChange={{this.onChange}}
    @optionKey='label'
    @options={{this.options}}
    @selected={{this.selected}}
    placeholder='Colors'
  >
    <!-- NOTE: The chip block is required and a Remove component's label is also required! -->
    <:chip as |chip|>
      <chip.Chip>
        {{chip.option}}
        <chip.Remove @label={{(concat 'Remove' ' ' chip.option)}} />
      </chip.Chip>
    </:chip>
  
    <:default as |multiselect|>
      <multiselect.Option>
        {{multiselect.option.label}}
      </multiselect.Option>
    </:default>
  </Form::Controls::Multiselect>

• #200 91204aa Thanks @ynotdraw! - Added an Autocomplete component to both core and form packages.

  If you're using toucan-core, the control and field components are exposed:

  <Form::Controls::Autocomplete
    @onChange={{this.onChange}}
    @options={{this.options}}
    @contentClass='z-10'
    @selected={{this.selected}}
    @noResultsText='No results'
    placeholder='Colors'
    as |autocomplete|
  >
    <autocomplete.Option>
      {{autocomplete.option.label}}
    </autocomplete.Option>
  </Form::Controls::Autocomplete>
  
  <Form::Fields::Autocomplete
    @contentClass='z-10'
    @error={{this.errorMessage}}
    @hint='Type "blue" into the field'
    @label='Label'
    @noResultsText='No results'
    @onChange={{this.onChange}}
    @options={{this.options}}
    @selected={{this.selected}}
    placeholder='Colors'
    as |autocomplete|
  >
    <autocomplete.Option>
      {{autocomplete.option.label}}
    </autocomplete.Option>
  </Form::Fields::Autocomplete>

  If you're using toucan-form, the component is exposed via:

  <ToucanForm as |form|>
    <form.Autocomplete
      @label='Autocomplete'
      @name='autocomplete'
      @options={{options}}
      data-autocomplete
      as |autocomplete|
    >
      <autocomplete.Option data-option>
        {{autocomplete.option}}
      </autocomplete.Option>
    </form.Autocomplete>
  </ToucanForm>

  For more information on using these components, view the docs.

• #225 50b4f24 Thanks @ynotdraw! - Added MultiselectField component - it's the Multiselect control wrapped around a Field.

  <Form::Controls::Multiselect
    @contentClass='z-10'
    @hint='Select a color'
    @label='Label'
    @noResultsText='No results'
    @onChange={{this.onChange}}
    @options={{this.options}}
    @selected={{this.selected}}
  >
    <!-- NOTE: The chip block is required and a Remove component's `@label`` is also required! -->
    <:chip as |chip|>
      <chip.Chip>
        {{chip.option}}
        <chip.Remove @label={{(concat 'Remove' ' ' chip.option)}} />
      </chip.Chip>
    </:chip>
  
    <:default as |multiselect|>
      <multiselect.Option>
        {{multiselect.option}}
      </multiselect.Option>
    </:default>
  </Form::Controls::Multiselect>

  import Component from '@glimmer/component';
  import { action } from '@ember/object';
  import { tracked } from '@glimmer/tracking';
  
  export default class extends Component {
    @tracked selected;
  
    options = ['Blue', 'Red', 'Yellow'];
  
    @action
    onChange(options) {
      this.selected = options;
    }
  }

@crowdstrike/ember-toucan-core@0.2.2

Patch Changes

• #212 eb5b130 Thanks @joelamb! - fixes flex-grow for disabled button

• #208 e907310 Thanks @ynotdraw! - Adds error styling when the current character length is greater than maximum character length for the input and textarea components using the character counter.

@crowdstrike/ember-toucan-form@0.2.1

Patch Changes

• #197 c1130c6 Thanks @ynotdraw! - The ToucanForm component now yields back submit and reset actions as the functionality was added to ember-headless-form in this PR.

  NOTE: Calling submit directly is not required for most cases. The implementation only requires a button tag with the type="submit" attribute set.

  <ToucanForm as |form|>
    {{! This should be used for most cases }}
    <button type='submit'>Submit</button>
    <button {{on 'click' form.reset}} type='button'>Reset</button>
  </ToucanForm>

  However, if you have a more complex case with submission, you can use form.submit.

  <ToucanForm as |form|>
    <button {{on 'click' form.submit}} type='button'>Submit</button>
    <button {{on 'click' form.reset}} type='button'>Reset</button>
  </ToucanForm>

• #189 50547ad Thanks @ynotdraw! - Add a lock icon to readonly and disabled states for all form components.

• #193 8d05e67 Thanks @ynotdraw! - (internal) Updated repo to use pnpm-sync-dependencies-meta-injected to make local development easier. To develop in the repo, run pnpm start.

• #194 cf944f6 Thanks @ynotdraw! - Updates disabled styling for all form components to set the text-disabled class on the label and hint elements.

• #190 f1b73cd Thanks @ynotdraw! - (internal) Updated @ember/test-helpers peer dependency range to ^2.8.1 || ^3.0.0.

• Updated dependencies [42da468, 50547ad, 8d05e67, cf944f6, f1b73cd]:

  • @crowdstrike/ember-toucan-core@0.2.1

@crowdstrike/ember-toucan-core@0.2.1

Patch Changes

• #198 42da468 Thanks @ynotdraw! - Updated <Form::Fields::FileInput styling to match designs. This included updates to the disabled state as well as the list items.

• #189 50547ad Thanks @ynotdraw! - Add a lock icon to readonly and disabled states for all form components.

• #193 8d05e67 Thanks @ynotdraw! - (internal) Updated repo to use pnpm-sync-dependencies-meta-injected to make local development easier. To develop in the repo, run pnpm start.

• #194 cf944f6 Thanks @ynotdraw! - Updates disabled styling for all form components to set the text-disabled class on the label and hint elements.

• #190 f1b73cd Thanks @ynotdraw! - (internal) Updated @ember/test-helpers peer dependency range to ^2.8.1 || ^3.0.0.