Release Preview

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@crowdstrike/[email protected]

Patch Changes

• #115 6a08b45 Thanks @nicolechung! - Added Character Count in InputField

  Added optional character count in the Input Field component, along with related base demo and tests.

• #132 b4f6861 Thanks @ynotdraw! - Added the @isReadOnly component argument to all form components. It will apply read only styling and the readonly attribute. This requires the latest release of @crowdstrike/tailwind-toucan-base.

• #157 6a502f7 Thanks @nicolechung! - Added: Character Count for Textarea Field

@crowdstrike/[email protected]

Patch Changes

• #156 20d433f Thanks @ynotdraw! - Exposed named blocks from the underlying toucan-core components. This allows users to add custom content in :hint or :label named blocks. You can combine the arguments and named blocks as well! Below are some examples.

  <ToucanForm @data={{data}} as |form|>
    <form.Textarea @name='comment'>
      <:label>Label</:label>
      <:hint>Hint</:hint>
    </form.Textarea>
  </ToucanForm>

  <ToucanForm @data={{data}} as |form|>
    <form.Textarea @label='Label' @name='comment'>
      <:hint>Hint</:hint>
    </form.Textarea>
  </ToucanForm>

  <ToucanForm @data={{data}} as |form|>
    <form.Textarea @hint='Hint' @name='comment'>
      <:label>Label</:label>
    </form.Textarea>
  </ToucanForm>

  Or you can continue to use the arguments if you're only working with strings!

  <ToucanForm @data={{data}} as |form|>
    <form.Textarea @label='Label' @hint='Hint' @name='comment' />
  </ToucanForm>

• #145 752e6b1 Thanks @ynotdraw! - Added @isReadOnly component argument support.

  <ToucanForm @data={{data}} as |form|>
    <form.Textarea
      @label='Comment'
      @name='comment'
      @isReadOnly={{true}}
      data-textarea
    />
    <form.Input
      @label='Input'
      @name='firstName'
      @isReadOnly={{true}}
      data-input
    />
    <form.Checkbox
      @label='Terms'
      @name='termsAndConditions'
      @isReadOnly={{true}}
      data-checkbox
    />
  
    <form.RadioGroup
      @label='Radios'
      @name='radio'
      @isReadOnly={{true}}
      as |group|
    >
      <group.RadioField @label='option-1' @value='option-1' data-radio-1 />
      <group.RadioField @label='option-2' @value='option-2' data-radio-2 />
    </form.RadioGroup>
  
    <form.CheckboxGroup
      @label='Checkboxes'
      @name='checkboxes'
      @isReadOnly={{true}}
      as |group|
    >
      <group.CheckboxField
        @label='Option 1'
        @value='option-1'
        data-checkbox-group-1
      />
      <group.CheckboxField
        @label='Option 2'
        @value='option-2'
        data-checkbox-group-2
      />
      <group.CheckboxField
        @label='Option 3'
        @value='option-3'
        data-checkbox-group-3
      />
    </form.CheckboxGroup>
  </ToucanForm>

  For CheckboxGroup and RadioGroup, the argument can be set on the root component, or on individual CheckboxFields / RadioFields directly.

• Updated dependencies [6a08b45, b4f6861, 6a502f7]:

  • @crowdstrike/[email protected]