@crowdstrike/[email protected]

Patch Changes

• #447 cb3db50 Thanks @kmillns! - Update Textarea to ensure underlying <textarea> value stays in sync with both typing and @value changes

@crowdstrike/[email protected]

Minor Changes

• #466 c862e5d Thanks @bradaune-cs! - Exposes validationState, submissionState, isInvalid and rawErrors from the HeadlessForm component

Patch Changes

• Updated dependencies [e274211]:
  • @crowdstrike/[email protected]

@crowdstrike/[email protected]

Patch Changes

• #308 e274211 Thanks @bartocc! - Updated incorrect assertion message with CheckboxField

@crowdstrike/[email protected]

Patch Changes

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

@crowdstrike/[email protected]

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/[email protected]

@crowdstrike/[email protected]

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/[email protected]

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/[email protected]

@crowdstrike/[email protected]

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/[email protected]

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/[email protected]

@crowdstrike/[email protected]

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;
    }
  }