Skip to content
CFA Design System

React Core Changelog

@cfa/react-core

1.2.2-beta.0

Patch Changes

  • #1874 86326b6 Thanks @mitchellcarroll! - Resolved a CSS issue that prevented the checkbox from displaying its intended styles when in the indeterminate state.

  • #1904 9c8caa0 Thanks @mitchellcarroll! - Updated consumer-facing styling for TextArea and TextAreaInput.

    • TextArea now uses updated line-height, border color, focus ring, and disabled/read-only background colors.

  • #1902 b9fb378 Thanks @stevegreco! - Updated consumer-facing styling for Accordion and BannerMessage.

    • Accordion now uses updated box-shadow, border, and disabled-state colors.
    • BannerMessage now uses updated color tokens and more compact padding values.
    • Other component updates in this release are token migrations with no intended visual changes.

  • #1861 a3b4156 Thanks @stevegreco! - Updated React Aria to 1.16.0

  • #1903 a279cd1 Thanks @stevegreco! - Updated visual styles for Button, LinkButton, Calendar, and RangeCalendar.

    • Button and LinkButton disabled styles now use a lighter disabled background color.
    • Calendar and RangeCalendar received minor color refinements, including selected/hover/focus and content color updates.
    • These calendar visual updates also propagate to DatePicker and DateRangePicker because they compose the calendar components.

  • Updated dependencies [ac04fcd, 445af1c]:

1.2.0

Minor Changes

  • #1851 2558eeb Thanks @stevegreco! - - Added the design-tokens-core package which contains our new v2 tokens

    • Updated the Button to use the new spacing tokens

  • #1846 2abfe11 Thanks @Dan-Heflin! - Added Typography utility classes and a typography utility function for consistent text styling.

    Utility class examples:

    • ds-typography--body
    • ds-typography--body-small
    • ds-typography--header-1
    • ds-typography--header-2
    • ds-typography--header-3
    • ds-typography--header-4
    • ds-typography--subtitle-1
    • ds-typography--subtitle-2
    • ds-typography--subtitle-3
    • ds-typography--overline-1
    • ds-typography--overline-2
    • ds-typography--overline-3

    Utility function example:

    import { typography } from "@cfa/react-core";
    

    <p className={typography({ variant: "body" })}>Body text</p>
    <h2 className={typography({ variant: "header2" })}>Section heading</h2>
    <span className={typography({ variant: "overline1" })}>Overline text</span>

Patch Changes

1.1.0

Minor Changes

  • #1828 865df96 Thanks @stevegreco! - Added new leadingIcon prop to the Select.Button component. You can now easily add a leadingIcon to any Select component

    <Select.Root>
      <Select.Label>Location</Select.Label>
      <Select.Button leadingIcon={<Restaurant color="primary" />}>
        <Select.Value />
      </Select.Button>
      <Select.Popover>
        <Select.List>
          <Select.Item id="1">Downtown</Select.Item>
          <Select.Item id="2">Uptown</Select.Item>
          <Select.Item id="3">Midtown</Select.Item>
        </Select.List>
      </Select.Popover>
    </Select.Root>

  • #1800 1791b6c Thanks @mitchellcarroll! - Added new CartInput component. Supports color (primary/secondary), size (sm/md/lg), and optional onRemove behavior where a trash icon replaces the decrement button when the value reaches one above the minValue. Includes form field integration with label, description, and errorMessage support.

    const [quantity, setQuantity] = useState(1);
    

    <CartInput
      label="Quantity"
      value={quantity}
      onChange={setQuantity}
      onRemove={() => console.log("removed")}
    />;

  • #1797 10e879f Thanks @stevegreco! - Added new ContextualHelp component as an accessible alternative to the Tooltip. The component provides two variants, info and help. These variants determine the icon that is used. The Tooltip is generally not a very accessible component and is not usable on mobile devices, this component provides an accessible and cross-platform alternative.

    <ContextualHelp aria-label="need-help">
      <Heading variant="headline4">Need Help?</Heading>
      If you're having issues accessing your account, contact our customer support
      team for help.
    </ContextualHelp>

Patch Changes

1.0.4

Patch Changes

1.0.3

Patch Changes

1.0.2

Patch Changes

  • #1765 5434c0b Thanks @stevegreco! - Added beta support for the Virtualizer component. You can now wrap certain collection components with the Virtualizer for Virtualization support.

    Here is a basic example, documentation is coming soon.

    import {
      UNSTABLE_Virtualizer as Virtualizer,
      UNSTABLE_ListLayout as ListLayout,
    } from "@cfa/react-core";
    

    <Combobox.Root>
      <Combobox.Label>Sauces</Combobox.Label>
      <Combobox.Input />
      <Combobox.Button />
      <Combobox.Popover>
        <Virtualizer layout={ListLayout}>
          <Combobox.List items={items}>
            {(item) => <Combobox.Item>{item.name}</Combobox.Item>}
          </Combobox.List>
        </Virtualizer>
      </Combobox.Popover>
    </Combobox.Root>;

  • #1764 ac15906 Thanks @mitchellcarroll! - Stepper: Fixed bug where children prop was accepted but never rendered

1.0.1

Patch Changes

  • #1758 d884389 Thanks @stevegreco! - Added the renderEmptyState prop to the Select and Combobox. This can be used to render a specific component when no results are available.

1.0.0

Major Changes

  • #1751 be5937c Thanks @stevegreco! - # 🚨 Breaking Changes 🚨

    • Removed deprecated variant prop from the Tooltip
    • Removed deprecated orientation prop from the CheckboxGroup and RadioGroup
    • Removed deprecated variant prop from the MessageBlock in favor of the severity prop
    • Removed the UNSTABLE prefix from the DatePicker component, you can now import the standard component
    import { DatePicker } from "@cfa/react-core";

0.29.1

Patch Changes

  • #1746 65e9a91 Thanks @stevegreco! - Reverse the positioning of the close button in the Drawer, placing it on the outside edge

  • #1733 e2bc35b Thanks @mitchellcarroll!

    • Updated DatePicker and DateRangePicker to provide easier overrides for the width of the component
    • Fixed issue with validations not resetting when clearing the value in the DatePicker and DateRangePicker

0.29.0

Minor Changes

  • #1740 df7dead Thanks @stevegreco! - Added UNSTABLE_DropZone to support Signal, this component should be used with caution, and is subject to change at any time.

0.28.2

Patch Changes

0.28.1

Patch Changes

0.28.0

Minor Changes

Patch Changes

0.27.0

Minor Changes

  • #1715 b08a1c2 Thanks @stevegreco! - Added new panelPadding prop to the Accordion.Root and padding to the Accordion.Panel. . These props will help control the padding inside of the Accordion panels

  • #1706 d66adc0 Thanks @stevegreco! - Added alignment prop to the TextInput to allow for right alignment of the text, similar to the NumberInput

0.26.0

Minor Changes

  • #1684 8cde6e3 Thanks @stevegreco! - Added support for sections/groups in the ListBox, GridList, Select and Combobox components

0.25.2

Patch Changes

  • #1698 9047135 Thanks @stevegreco! - Added relative positioning to the Radio to a fix positioning bug with the hidden input

0.25.1

Patch Changes

  • #1663 56eaf81 Thanks @stevegreco! - Fixed issue with Accordion outline-offset

  • #1668 561ca40 Thanks @stevegreco! - Fixed issue with the gap in the BannerMessage that caused extra space between components that are passed as children

0.25.0

Minor Changes

  • #1645 4360225 Thanks @mitchellcarroll! - Modal: Fixed an issue where inputs inside a modal were being pushed off screen when the virual keyboard was rendered on tablets and phones.

  • #1603 9f0ba71 Thanks @mitchellcarroll! - Add support for aligning tabs. A new alignment prop on the Tabs component allows consumers to control how tab labels are aligned. Supported values are left (default), center, and right. Existing behavior stays the same unless the prop is provided, giving more flexibility for different layout needs.

  • #1640 9a99303 Thanks @mitchellcarroll! - Adds character counter to the TextInput component. Can be used by adding hasCharacterCount prop + maxLength prop.

Patch Changes

  • #1543 3bc359d Thanks @mitchellcarroll! - Adds Table component as a wrapper around React Aria table primitives.

  • #1625 be92114 Thanks @stevegreco! - Surface: updated background-color to be base-1

  • #1647 e9473dd Thanks @stevegreco! - Adjusted disabled styles for the Switch label to ensure it meets proper contrast ratio

  • #1607 1553615 Thanks @stevegreco! - Field Changes

    • Added global variables for our form fields to more easily control them all once
    • Adjusted BaseButton CSS to prevent conflicts with Button variants
    • Changed the padding below the CheckboxGroup and RadioGroup label from 12px to 4px
    • Moved the compact prop onto the BaseDateInput (internal) to control the padding as opposed to on the DateInput and TimeInput components
    • Adjusted widths of form fields to be more consistent

0.24.1

Patch Changes

0.24.0

Minor Changes

  • #1582 47cbdf5 Thanks @stevegreco! - Added offset and crossOffset props to the Menu.Popover to allow for more custom positioning

Patch Changes

  • #1559 84cafff Thanks @stevegreco! - Removed incorrect focus state styling on CalendarCell and the Iconbutton used in the DatePicker

  • #1567 582be41 Thanks @stevegreco! - Fixed multiple styling issues with the DateInput

    • Incorrect focus styling
    • Incorrect placeholder styling when the field is disabled

  • #1552 b2c8ef0 Thanks @stevegreco! - Enhanced focus states

    • Updated colors of the focus ring to ensure that it meets color contrast guidelines for accessibility
    • Reduced the focus ring size from 4px to 2px and adjusted offset to properly align with border for each component
    • Added a positive offset to the Button components to provide a visual gap between the focus ring and the Button

  • Updated dependencies [b2c8ef0]:

0.23.0

Minor Changes

  • #1535 0e1ecfa Thanks @stevegreco! - Removed multiline support on the TextInput component and separated it into a new TextAreaInput component.

    As a result of this change, the multiline and hasCharacterCount props have been removed from the standard TextInput.

Patch Changes

  • #1542 f6e0979 Thanks @stevegreco! - Fixed issue with the Button width not respecting the parent containers width

  • #1540 517eea9 Thanks @stevegreco! - - Avatar.Root was unintentionally overriding any ref that was forwarded in, causing unintended side effects with components like Focusable and Pressable

    • Added forwardRef to the Avatar.Root to provide better compatability with React 18 and our Focusable and Pressable components

0.22.1

Patch Changes

0.22.0

Minor Changes

  • #1530 8313b04 Thanks @stevegreco! - Various quality of life updates for Select and Combobox

    Select

    • Added compact and shouldFlip props to the Select.Root to provide better DX
    • Enhanced the max-height functionality to utilize the maxHeight prop on the Select.Popover to provide more stable sizing
    • Added some basic layout styling to the Select.Item and Select.Value to allow for easier composition of additional elements
    • Updated docs to reflect some deprecated props. These changes were made to better align with the native select component and support multi selection
      • defaultSelectedKey —> defaultValue
      • selectedKey —> value
      • onSelectionChange —> onChange

    Combobox

    • Enhanced the max-height functionality to utilize the maxHeight prop on the Combobox.Popover to provide more stable sizing
    • Added compact, shouldFlip, disableIconAnimation, iconVariant and isRequired to the Combobox.Root to provide a better DX and prevent having to add these to nested components
    • Added some basic layout styling to the Combobox.Item to allow for easier composition of additional elements

  • #1532 817e692 Thanks @stevegreco! - Added ref to various component types and forwarded it onto the correct element where appropriate.

    • BaseButton
    • Button
    • Checkbox
    • CheckboxGroup
    • Combobox
    • IconButton
    • Input
    • NumberInput
    • RadioGroup
    • SearchInput
    • Select
    • Slider
    • TextArea
    • TextInput

0.21.1

Patch Changes

  • #1522 2fd3236 Thanks @stevegreco! - - Added deprecation for the orientation prop on the CheckboxGroup
    • Added deprecation for the orientation prop on the RadioGroup

0.21.0

Minor Changes

  • #1515 3d6ffd0 Thanks @mitchellcarroll! - Add isDateHighlighted prop to DatePicker and DateRangePicker to enable highlighting specific dates in Calendar and RangeCalendar.

Patch Changes

  • #1519 dee1d74 Thanks @stevegreco! - Fixed various issues with the Select component

    • Added text-align: left to the Select.Button to properly align text when wrapping to multiple lines
    • Fixed issue where the focus styling was being displayed on the component after selecting an item.

0.20.1

Patch Changes

  • #1512 2c6012b Thanks @stevegreco! - Added relative positioning to the Checkbox to fix positioning bug with the hidden input

0.20.0

Minor Changes

  • #1479 60a7623 Thanks @mitchellcarroll! - Exports new DateRangePicker and DateRangeField components. Marking as “Unstable” to gather feedback from adopters

  • #1485 0cdab78 Thanks @mitchellcarroll! - Exports a new TimeInput component

  • #1491 a492de8 Thanks @mitchellcarroll! - Adds support for highlighting dates in the Calendar component via an isDateHighlighted option, allowing adopters to mark specific days with a custom style.

  • #1438 60e2dfb Thanks @mitchellcarroll! - Update DatePicker to follow the current component composition pattern and introduces DateField components for composability/customizations.

  • #1498 295303e Thanks @mitchellcarroll! - •Added a Clear button to both DatePicker and DateRangePicker.•Introduced a new InputGroup component within the DateField collection to wrap the input, clear button, and calendar trigger, providing greater control over subcomponent composition.•Applied minor style adjustments to DatePicker, setting the default max width to 400px based on feedback from @Dan-Heflin.

  • #1496 b761d4e Thanks @stevegreco! - Updated react-aria dependencies to most recent versions

    • Added multiple Autocomplete stories to show usage with different components
    • Added a composed example of a Select that supports multiple selections
    • Replaced @react-aria/utils with react-aria for the useId hook
    • Updated the Tabs component to utilize the new SelectionIndicator component and added the appropriate animation.
    • Updated the Tabs with some other design enhancements, specifically the height was changed from 42px to 40px, and we updated the hover styling to change the font-color instead of adding an underline.
    • Updated the Accordion animations to use the new CSS custom properties that RAC makes available for animating. It should now properly animate with the padding workaround that we previously used.

  • #1444 20f1827 Thanks @stevegreco! - Added new TagGroup component

Patch Changes

0.19.3

Patch Changes

  • #1466 e8871c1 Thanks @stevegreco! - Moved exports for @internationalized/date into our server exports so that they can be accessed in server side code.

0.19.2

Patch Changes

0.19.1

Patch Changes

  • #1455 a6db128 Thanks @stevegreco! - Fixed various CSS bugs

    • Removed background-color from the Tabs component
    • Updated Tabs to use cursor: pointer
    • Removed background-color from the default Accordion variant
    • Fixed background colors for the states of Checkbox when using isIndeterminate

  • #1448 0de40c0 Thanks @stevegreco! - Updated css font properties to use current design tokens

  • #1420 7af5fc6 Thanks @mitchellcarroll! - Flattened DatePicker CSS structure to make custom class overrides easier and fixed an input min-width issue caused by nested styles.

  • #1449 b62e1f0 Thanks @stevegreco! - Exporting the PressEvent type

  • #1427 03df90f Thanks @stevegreco! - Fixed max-height issue with the Select and Combobox dropdowns

0.19.0

Minor Changes

  • #1411 90c0c86 Thanks @stevegreco! - 🚨 Breaking Change

    The Tooltip design has been updated to provide a better user experience on light backgrounds. The default background color of the Tooltip is now dark, with light text. You can view these changes on the docs site.

    The old variant will still be available for a limited time using the variant="light" prop. This prop will eventually be removed in a later release.

    To retain an old design, you must add the variant="light" prop.

    // New Dark Variant - Default
    <Tooltip.Content>Tooltip Content</Tooltip.Content>
    // Old Legacy Variant
    <Tooltip.Content variant="light">Tooltip Content</Tooltip.Content>

0.18.0

Minor Changes

  • #1382 2e8b99c Thanks @CaseyGarland! - - LoadingIndicator: now uses accessibility role progressbar (was status).

    • PageLoader: now uses accessibility role progressbar (was status).
      • Removed ariaLabel(uses standard aria-label).

  • #1409 47e0e02 Thanks @stevegreco! - Updated the Stepper.Step to forward its ref, allowing the use of the Pressable component

  • #1390 a8e0d95 Thanks @stevegreco! - 🚨 Breaking Change

    • Removed Breadcrumbs.Separator and now just render it automatically
    • Changed Separator from a custom icon to the standard font chevron
    • Updated the relevant docs

  • #1387 c159bfa Thanks @stevegreco! - - Slider component has been refactored to use a compound component API, allowing for more flexible and composable usage. The new structure separates the Slider into separate components such as Slider.Root, Slider.Label, Slider.Output, Slider.Track, Slider.Thumb, and Slider.Description.

    • Old usage:
    <Slider label="Slider label" description="Helper text" />
    • New compound usage:
    <Slider.Root>
      <Slider.Label>Slider label</Slider.Label>
      <Slider.Output />
      <Slider.Track>
        <Slider.Thumb />
      </Slider.Track>
      <Slider.Description>Helper text</Slider.Description>
    </Slider.Root>

    • Slider “range” functionality has also been added, allowing users to select a range of values by passing an array to the defaultValue or value prop and using two Slider.Thumb components.

      • Example of a range slider:
      <Slider.Root
        defaultValue={[10, 30]}
        minValue={0}
        maxValue={50}
        step={5}
        marks
      >
        <Slider.Label>Range Slider</Slider.Label>
        <Slider.Output />
        <Slider.Track>
          <Slider.Thumb index={0} />
          <Slider.Thumb index={1} />
        </Slider.Track>
        <Slider.Description>Select a value range</Slider.Description>
      </Slider.Root>

  • #1386 3709bfe Thanks @stevegreco! - Added isDisabled prop to the Label component

Patch Changes

  • #1395 a989abc Thanks @stevegreco! - Optimized CSS variables in the Tooltip to ensure the arrow matches the tooltip background color

  • #1333 493ac74 Thanks @vincevahala! - Select: flatten CSS for better adopter customizability.

  • #1403 053bbdc Thanks @stevegreco! - Added default aria-label to the LoadingIndicator component, this can be overwritten by a user passed prop

0.17.0

Minor Changes

  • #1371 4e60ca5 Thanks @stevegreco! - Updated React Aria libraries to the most recent versions

  • #1330 e3ee562 Thanks @vincevahala! - Removed isDisabled prop from the Label component and subsequent components using the Label: CheckboxGroup, Combobox, Label, NumberInput, RadioGroup, SearchInput, Select, TextInput, DatePicker, DateInput, DateRangePicker, TimeInput.

Patch Changes

  • #1319 87db1fe Thanks @vincevahala! - DatePicker:

    • Updated BaseButton to use IconButton.
    • Added correct isDisabled state and styling to IconButton.
    • Disables the IconButton in the isReadOnly state.

0.16.2

Patch Changes

0.16.1

Patch Changes

  • #1294 b50dc05 Thanks @stevegreco! - Moved react and react-dom to devDependencies to ensure they resolve correctly as peers

  • #1290 5cc4e61 Thanks @stevegreco! - Select: Fixed an issue that caused the scrollbar to extend past the bottom of the popover

0.16.0

Minor Changes

  • #1206 0c757fb Thanks @vincevahala! - - Create Stepper component and document examples.

    • Create useStepState generic hook and documents examples.

  • #1283 6be1789 Thanks @stevegreco! - TextInput: No longer renders the character count by default when using the maxLength prop, a new hasCharacterCount prop renders the counter

  • #1286 5be44ca Thanks @stevegreco! - Added new Description and Error components for the Select and Combobox

  • #1280 ab6b683 Thanks @stevegreco! - Removed UNSTABLE_onScrollEnd and UNSTABLE_onScrollEndOffset from the Listbox and Combobox components

Patch Changes

  • #1275 4f3a17b Thanks @vincevahala! - Flatten ListBox CSS, specifically for the .listBoxItem, enabling better adopter styling control.

  • #1270 8fb071e Thanks @vincevahala! - Add JSDoc descriptions to StandardDOMProps.

  • #1284 e571a1f Thanks @stevegreco! - MessageBlock: Flattened the CSS for the MessageBlock.Title component for easier overrides.

  • #1273 03a8644 Thanks @vincevahala! - The data-success attribute is added when the isSuccess boolean prop is true on the following components for state management and styling purposes:

    • Checkbox
    • Combobox
    • NumberInput
    • RadioGroup
    • SearchInput
    • Select
    • Text
    • TextArea
    • TextInput

0.15.0

Minor Changes

  • #1258 d9e7b2c Thanks @vincevahala! - - Input: refactored to use data-success and data-alignment attributes.

    • Accordion: changed elevatedItems prop to isElevated.

  • #1218 ec4f149 Thanks @stevegreco! - - Enhanced Accordion.Item to be used independently from the Accordion.Root. This is useful if you need to use a singular Accordion.Item. Overall this better encapsulates the component and allows more in depth customizations to the CSS.

    • Accordion.Item now has an elevated prop that can be used to render the elevated variant.

Patch Changes

  • #1231 75c866c Thanks @vincevahala! - Flatten Card CSS for better adopter use.

  • #1252 5d271e3 Thanks @stevegreco! - Fixed issue with the Modal animation causing the Combobox and Select widths to be calculated incorrectly. The “zoom” animation was causing the --trigger-width variable to calcluate before the animation was finished, causing it to be too small.

    This issue was resolved by removing the “zoom” animation and replacing it with the “fade” that was already being used for the Overlay.

  • #1265 71a9877 Thanks @stevegreco! - Adjusted Modal CSS for better adopter use and customization

  • #1245 a1ab066 Thanks @vincevahala! - Flatten Combobox CSS for better adopter customizing.

  • #1251 b0934b1 Thanks @stevegreco! - Added a filled class to the Chip for the default variant

  • #1243 814ba72 Thanks @stevegreco! - Updated the @react-aria/test-utils dependency to be a dev dependency

  • #1233 53b167d Thanks @stevegreco! - Simplified CSS for BannerMessage by flattening its DOM structure

  • #1225 50d1f23 Thanks @stevegreco! - Updated custom CSS properties for the Badge component to be more flexible

  • #1250 87bd7db Thanks @stevegreco! - Updated React Aria dependencies to latest versions

  • #1227 c90fd95 Thanks @vincevahala! - Flatten Breadcrumbs CSS for better adopter customization.

0.14.2

Patch Changes

  • #1217 123fffc Thanks @stevegreco! - Fixed issue with BaseButton border styling that prevented adding border styles with TailwindCSS

0.14.1

Patch Changes

  • #1199 8216dc4 Thanks @stevegreco! - - Adjusted outline-offset on the Accordion.Item to ensure proper focus styling
    • Added open animation when the Accordion.Item opens

0.14.0

Minor Changes

Patch Changes

  • #1177 461dc39 Thanks @stevegreco! - Fixed issues related to labels for Checkbox and Radio

    • Updated Checkbox font-weight to 500
    • Updated Radio font-weight, font-size and alignment properties to ensure center alignment

  • #1172 a267c6b Thanks @stevegreco! - Fixed height of Switch component and changed from 22px to 24px

0.13.0

Minor Changes

  • #1163 2743101 Thanks @vincevahala! - Remove React.HTMLAttributes<HTMLDivElement> from Surface and use StandardDOMProps internal props in its place’.

Patch Changes

  • #1169 6ce8734 Thanks @stevegreco! - Added missing background-color for the Input component to fix issue with Tailwind base style conflicts

0.12.0

Minor Changes

  • #1073 70efb42 Thanks @stevegreco! - Removed shouldCloseOnInteractOutside from components using the Dialog, this prop is different from isDismissable which allows the user to close the Modal components by clicking outside.

  • #1144 4c93759 Thanks @stevegreco! - Removed internal CSS layers to prevent conflicts with tailwindcss@3

  • #1094 4a700dc Thanks @stevegreco! - Exporting the @internationalized/date package from @cfa/react-core for version unity

  • #1127 8878f65 Thanks @vincevahala! - 🚨 BREAKING CHANGE: Updated Tooltip API

    We have updated the Tooltip API to be more consistent with other components and provide better control over placement and styling.

    Previous API:

    <Tooltip.Trigger>
      <Button>Hover me</Button>
      <Tooltip>Tooltip Content</Tooltip>
    </Tooltip.Trigger>

    New API:

    <Tooltip.Root>
      <Button>Hover me</Button>
      <Tooltip.Content>Tooltip Content</Tooltip.Content>
    </Tooltip.Root>

  • #1115 836d5a6 Thanks @vincevahala! - Remove CustomCSSProperties from Divider.

  • #1126 71272a5 Thanks @stevegreco! - Added two new features:

    • useFilter - A new hook that simplifies text filtering in components, supporting case sensitivity options and locale-aware string matching
    • Autocomplete - A new component that combines input fields with filtered suggestions, enabling searchable dropdown menus and command palettes

  • #1131 4502b60 Thanks @vincevahala! - Chip:

    • Removed React.DetailedHTMLProps of HTMLDivElement
    • Added the internal StandardDOMProps

  • #1065 0ee191e Thanks @vincevahala! - Refactored Avatar into compound API pattern and added documentation.

  • #1078 c64382c Thanks @stevegreco! - 🚨 BREAKING CHANGE

    • Updated the GridList and ListBox with a new composition API

    Before

    <ListBox>
      <ListBox.Item>Item 1</ListBox.Item>
      <ListBox.Item>Item 2</ListBox.Item>
    </ListBox>
    

    <GridList>
      <GridList.Item>Item 1</GridList.Item>
      <GridList.Item>Item 2</GridList.Item>
    </GridList>

    After

    <ListBox.Root>
      <ListBox.Item>Item 1</ListBox.Item>
      <ListBox.Item>Item 2</ListBox.Item>
    </ListBox.Root>
    

    <GridList.Root>
      <GridList.Item>Item 1</GridList.Item>
      <GridList.Item>Item 2</GridList.Item>
    </GridList.Root>

  • #1044 9f8a2aa Thanks @stevegreco! - Added LinkButton component

  • #1072 f80ff36 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Popover API

    We have updated the Popover API to be more consistent with other components and provide better control over placement and styling.

    In the previous iteration of the Popover, the component structure was less clear. Here is the previous API for the Popover.

    <Popover.Trigger>
      <Button>Open Popover</Button>
      <Popover>Popover Content</Popover>
    </Popover.Trigger>

    The new API provides a more consistent component structure and improved naming.

    <Popover.Root>
      <Button>Open Popover</Button>
      <Popover.Panel>Popover Content</Popover.Panel>
    </Popover.Root>

    For more advanced use cases, we’ve exposed the composition pattern with separate components.

    <Popover.Root>
      <Button>Open Popover</Button>
      <Popover.Wrapper>
        <Popover.Dialog>Advanced Composition</Popover.Dialog>
      </Popover.Wrapper>
    </Popover.Root>

    However, we recommend using the simplified Popover.Panel component for most use cases.

  • #1114 b392dc5 Thanks @vincevahala! - Badge Component:

    • Removed CustomCSSProperties.
    • Removed DetailedHTMLAttributes of HTMLSpanElement props.
    • Added internal StandardDOMProps.

  • #1118 32a9012 Thanks @vincevahala! - LoadingIndicator:

    • Remove React.HTMLAttributes<HTMLDivElement>.
    • Add StandardDOMProps and LabelingProps.

Patch Changes

0.11.0

Minor Changes

  • #961 13ff7d4 Thanks @stevegreco! - - Removed onClick prop from interactive components to ensure consistent handling of click events using onPress as suggested by the React Aria team:

    • Select.Button
    • Link
    • ToggleButton
    • ToggleButtonGroup

    New React Aria Prop Updates

    • Added createCalendar prop to Calendar components, enabling custom calendar implementations via (identifier: CalendarIdentifier) => Calendar function
    • Added escapeKeyBehavior prop to ListBox components to control clearing selection on Escape key press (“clearSelection” | “none”)
    • Deprecated UNSTABLE_portalContainer prop across all overlay components (Modal, Popover, Tooltip) in favor of using UNSAFE_PortalProvider

  • #910 126c4d1 Thanks @stevegreco! - Added Breadcrumbs Component

  • #977 8999b46 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated composition API for Card component

    This change adopts a compound component pattern for the Card component, making the API more explicit and consistent with other components in the design system.

    Before:

    <Card outlined>
      <Card.Content>
        <Card.Title>Chick-fil-A Cool Wrap</Card.Title>
      </Card.Content>
    </Card>

    After:

    <Card.Root outlined>
      <Card.Content>
        <Card.Title>Chick-fil-A Cool Wrap</Card.Title>
      </Card.Content>
    </Card.Root>

    Changes include:

    • Renamed the main Card component to Card.Root
    • Moved types into types.ts
    • Updated all internal implementations and tests to use the new API
    • Documentation reflects the new compound component pattern

  • #910 126c4d1 Thanks @stevegreco! - Added Link component

  • #1051 7729c60 Thanks @vincevahala! - - Component API changes: Updated component to MessageBlock.Root to follow compound component pattern.

    • Prop changes: Remove React.HTMLAttributes<HTMLDivElement> from MessageBlock Props, and use the internal StandardDOMProps and LabelingProps.

  • #843 f089a1e Thanks @stevegreco! - Updated to [email protected] and [email protected]

  • #920 0c9bad4 Thanks @stevegreco! - 🚨 BREAKING CHANGE: variant has been marked as deprecated and changed to severity on the MessageBlock

  • #1043 0775adb Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Drawer API

    We have updated the Drawer API to be more user friendly and provide a better default experience.

    In the previous iteration of the Drawer, some of the components were obscured behind the scenes, here is the previous API for the Drawer.

    <Drawer.Trigger>
      <Button>Open Drawer</Button>
      <Drawer>Drawer Content</Drawer>
    </Drawer.Trigger>

    The new API involves more components, but also provides more control over the component itself, along with the styling.

    <Drawer.Root>
      <Button>Open Drawer</Button>
      <Drawer.Tray>Drawer Content</Drawer.Tray>
    </Drawer.Root>

    ✅ New Feature

    There is a Drawer.Overlay that is available as an optional component. This would only ever be needed if you needed to make some sort of customization to the Overlay itself. We do not recommend using this unless there is a specific reason to do so.

    <Drawer.Root>
      <Button>Open Drawer</Button>
      <Drawer.Tray>Drawer Content</Drawer.Tray>
    </Drawer.Root>

    The main change here is

    • The Drawer previously combined together the Overlay and the Dialog, now those are independent of each other for greater control

  • #988 d4ed523 Thanks @stevegreco! - Add CSS Layers

    • Added reset, base and core layers

  • #1045 45d41c7 Thanks @vincevahala! - Remove React.HTMLAttributes from BannerMessage Props.

  • #960 4a6191e Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated composition API for Accordion component

    This change adopts a compound component pattern for the Accordion component, making the API more explicit and consistent with other components in the design system.

    Before:

    <Accordion>
      <Accordion.Item>
        <Accordion.Trigger>Item 1</Accordion.Trigger>
        <Accordion.Panel>Content 1</Accordion.Panel>
      </Accordion.Item>
    </Accordion>

    After:

    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Trigger>Item 1</Accordion.Trigger>
        <Accordion.Panel>Content 1</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>

    Changes include:

    • Renamed the main Accordion component to Accordion.Root
    • Export types for all subcomponents: AccordionTriggerProps, AccordionPanelProps, AccordionItemProps
    • Updated all internal implementations and tests to use the new API
    • Documentation reflects the new compound component pattern

  • #987 5af2dac Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated ComboBox and Select to use compound component pattern

    Before:

    import { ComboBox } from "@cfa/react-core";
    

    <Select items={sauces} label="Select a sauce">
      {(sauce) => <Select.Item id={sauce.id}>{sauce.name}</Select.Item>}
    </Select>;
    

    <ComboBox items={sauces} label="Select a sauce">
      {(sauce) => <ComboBox.Item id={sauce.id}>{sauce.name}</ComboBox.Item>}
    </ComboBox>;

    After:

    import { ComboBox } from "@cfa/react-core";
    

    <Combobox.Root>
      <Combobox.Label>Sauces</Combobox.Label>
      <Combobox.Input />
      <Combobox.Button />
      <Combobox.Popover>
        <Combobox.List items={sauces}>
          {(sauce) => <ComboBox.Item id={sauce.id}>{sauce.name}</ComboBox.Item>}
        </Combobox.List>
      </Combobox.Popover>
    </Combobox.Root>;
    import { Select } from "@cfa/react-core";
    

    <Select.Root>
      <Select.Label>Select</Select.Label>
      <Select.Button>
        <Select.Value />
      </Select.Button>
      <Select.Popover>
        <Select.List items={sauces}>
          {(sauce) => <Select.Item id={sauce.id}>{sauce.name}</Select.Item>}
        </Select.List>
      </Select.Popover>
    </Select.Root>;

    ✅ New Features

    New component has been added

    ClearButton is now available for both the Combobox and Select. This new button can be used anywhere within the Select.Root and will clear the state onPress. This was previously available, but you would have to use the component in a controlled state, and write this logic yourself. This provides a “batteries included” solution.

    import { Select } from "@cfa/react-core";
    

    <Select.Root>
      <Select.Label>Select</Select.Label>
      <Select.Button>
        <Select.Value />
      </Select.Button>
      <Select.ClearButton>Reset</Select.ClearButton>
      <Select.Popover>
        <Select.List>
          <Select.Item id="1">Item 1</Select.Item>
        </Select.List>
      </Select.Popover>
    </Select.Root>;

    Key Changes:

    • Renamed ComboBox to ComboBox.Root
    • Rename Select to Select.Root
    • Added a ClearButton to both the Combobox and Select for enhancement composability. This new component hooks into the context of the Combobox/Select to allow someone to clear the state.
    • Updated Stories and Tests to use the new structure

  • #993 e3884f0 Thanks @vincevahala! - 🚨 BREAKING CHANGE: Refactored Tabs component to adopt a compound component pattern:

    • Tabs becomes Tabs.Root
    • Tab.List becomes Tabs.List
    • Tab becomes Tabs.Item
    • Tab.Panel becomes Tabs.Panel

    Add README to Tabs:

    • Add prop table
    • Add examples
    • [INTERNAL] Remove autodocs from SB

  • #915 ee2e9a3 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Modal API

    We have updated the Modal API to be more user friendly and provide a better default experience.

    In the previous iteration of the Modal, some of the components were obscured behind the scenes, here is the previous API for the Modal.

    <Modal.Trigger>
      <Button>Open Modal</Button>
      <Modal>Modal Content</Modal>
    </Modal.Trigger>

    The new API involves more components, but also provides more control over the component itself, along with the styling.

    <Modal.Root>
      <Button>Open Modal</Button>
      <Modal.Dialog>
        <Modal.Content>Modal Content</Modal.Content>
      </Modal.Dialog>
    </Modal.Root>

    ✅ New Feature

    There is a Modal.Overlay that is available as an optional component. This would only ever be needed if you needed to make some sort of customization to the Overlay itself. We do not recommend using this unless there is a specific reason to do so.

    <Modal.Root>
      <Button>Open Modal</Button>
      <Modal.Overlay>
        <Modal.Dialog>
          <Modal.Content>Modal Content</Modal.Content>
        </Modal.Dialog>
      </Modal.Overlay>
    </Modal.Root>

    The two main changes here are

    • The Modal previously combined together the Overlay and the Dialog, now those are independent of each other for greater control
    • We now provide the Modal.Content component that provides the default layout experience for the Modal as defined in the Design System. It provides basic padding and content width properties.

Patch Changes

0.10.0

Minor Changes

Patch Changes

0.9.0

Minor Changes

  • #685 f0d5020 Thanks @stevegreco! - Added new /server and /client exports to support frameworks like NextJS

    • /server contains components that can be used on the server without the use of the use client directive
    • /client contains components that must be imported into components using use client.

    All components are still exported from the root @cfa/react-core module, these changes only impact specific use cases in SSR frameworks

  • #677 2dd0504 Thanks @stevegreco! - Updated the DatePicker to be exported as UNSTABLE_*, this is to support the release of v1 and inform users that these components are still in a beta state, the components are being exported as follows

    • Datepicker ---> UNSTABLE_DatePicker

    Imports for this component will now be different, so you will have to either update your code, or add an alias to your imports as follows.

    import { UNSTABLE_DatePicker as DatePicker } from "@cfa/react-core";

    Also, updated two props on the Select and ComboBox components to be UNSTABLE

    • onScrollEnd ---> UNSTABLE_onScrollEnd
    • onScrollEndOffset ---> UNSTABLE_onScrollEndOffset

Patch Changes

0.8.1

Patch Changes

0.8.0

Minor Changes

Patch Changes

0.7.1

Patch Changes

0.7.0

Minor Changes

Patch Changes

  • #580 3d1b0ec Thanks @richard-flosi! - Fix: DatePicker a11y errors

  • #589 d2dcd33 Thanks @stevegreco! - Fixed issue with the alignment of the Chevron in the Accordion.Item

  • #570 a5f4a92 Thanks @stevegreco! - Enhanced Input Components

    • Added additional unit tests
    • Updated styles to make the heights consistent across components
    • Made small adjustments to the component structures to enable consistent CSS

  • #578 c301fc1 Thanks @richard-flosi! - Fix: Calendar a11y landmark error

  • #571 961d111 Thanks @stevegreco! - Update various unit tests to achieve better code coverage

    • Updated unit tests to get better code coverage
    • Removed inline SVGs and replaced with correct system-icons
    • Made small enhancements to various components to enhance testing

  • #587 d4e85d8 Thanks @vincevahala! - Add color and fullWidth prop to Tabs. Update Tabs styles after design review.

  • #592 c7ad551 Thanks @vincevahala! - Use cva on Tabs and add CustomCSSProperties interface.

0.6.0

Minor Changes

  • #560 5ed1b12 Thanks @stevegreco! - Added TextArea component

    • New TextArea primitive component added
    • Updated TextInput to include a multiline prop to render the TextArea
    • Updated Stories and Styles for TextInput to be consistent
    • Added e2e tests for <TextInput multiline />

  • #539 410023c Thanks @stevegreco! - Added isCloseButtonHidden prop that removes the Close button from the Modal and Drawer

    • isDismissable now only enables the Modal/Drawer to be closed by clicking outside

  • #557 bb3d3d9 Thanks @stevegreco! - Updated disabled styles for Accordion.Trigger

  • #545 cf6af06 Thanks @stevegreco! - Removed duplicate placement prop values for Tooltip and Popover

Patch Changes

  • #429 c93530b Thanks @richard-flosi! - Adds new BaseDateInput, DateInput, Calendar, and DatePicker components

  • #523 b8f2740 Thanks @stevegreco! - Fixed CSS issues with the Select component

    • Added a min-height to prevent sizing issues when no placeholder is used
    • Removed the default placeholder so that its only visible when the placeholder prop is used

  • #550 b344709 Thanks @vincevahala! - Add JSDoc to Chip.tsx, add docgen config and run pnpm docgen. Update turbo/generators doc-page templates.

  • #557 bb3d3d9 Thanks @stevegreco! - Fixed issue with padding in the Accordion.Panel

0.5.0

Minor Changes

  • #496 cb2e567 Thanks @vincevahala! - Extend React detailed html props and attributes for Badge, BannerMessage, Chip

Patch Changes

  • #500 82a8411 Thanks @vincevahala! - Use span DetailedHTMLProps and HTMLAttributes in Badge. Fix Badge styles.

  • #512 29e8e33 Thanks @stevegreco! - - Enhanced Unit Tests for TextInput to validate the type prop

    • Enhanced Unit Tests for Select to include different interaction types
    • Updated Stories for various components to solve a11y warnings
    • Added additional Stories for TextInput and Input to allow for better testing

  • #488 9019e75 Thanks @vincevahala! - Add JSDoc component descriptions to button, checkbox, numberinput, select, and textinput

  • #506 ecc9fb2 Thanks @stevegreco! - Fixed issue with spacing on the Switch component

  • #493 c2f23f9 Thanks @vincevahala! - Update Divider Docs

  • #476 7301d5c Thanks @stevegreco! - Updated playwright dependencies to use pnpm catalogs to maintain consistent versions

  • Updated dependencies [7301d5c]:

0.4.0

Minor Changes

Patch Changes

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #446 d325609 Thanks @stevegreco! - Select component updates

    • Added states for isInvalid, isSuccess, isDisabled.
    • Added the compact variant
    • Updated test cases to account for new states
    • Updated docs and examples in the README.md

  • #399 c78b5c7 Thanks @richard-flosi! - Adds ToggleButton and ToggleButtonGroup components

  • #454 571ec45 Thanks @stevegreco! - - Removed normalize.css and updated to modern-normalize so our resets can match TailwindCSS to avoid conflicts.

    • Added specific resets similar to TailwindCSS to our global index.css to ensure consistency in resetting margin and padding.

Patch Changes

  • #421 fb09925 Thanks @richard-flosi! - Remove ariaLabel from Avatar component.

  • #426 a0a9f4e Thanks @stevegreco! - Updated Vitest to v3

  • #437 49d0f1d Thanks @stevegreco! - Updated docs for Button, Checkbox, Select, NumberInput and TextInput using the new CLI to generate type information.

    • Added config files for each of the above components
    • Added JSDoc comments to ensure that type data was generated correctly
    • Ran the CLI to generate the data

  • #426 a0a9f4e Thanks @stevegreco! - Enhanced test cases for Select, ListBox and GridList using some of the new utilities provided by @react-aria/test-utils. Also fixed some various small issues with some of the Stories to remove a11y errors.

  • #454 571ec45 Thanks @stevegreco! - Fixed issue with the IconButton sizing as reported by @donnycheng1204

  • #426 a0a9f4e Thanks @stevegreco! - Updated Storybook to v8.5, which includes a11y testing out of the box

  • Updated dependencies [a0a9f4e, a0a9f4e]:

0.2.0

Minor Changes

Patch Changes

0.1.1

Patch Changes

  • 3ccec96: Created PageLoader component in react-core and created component specific tokens, in the loader collection.
  • 5068945: Fixing typo in the publish workflow
  • 1af715e: Added README files for the Button and Accordion components
  • 2bf7069: Fixed issue with dependencies being listed as devDependencies
  • 8a99191: Attempting to change the author of the most recent commit for Changesets PR releases
  • 61e9b08: Updated deploy keys for GH actions
  • ca325b8: Updated react-core README
  • 5a1ad3d: Updating publish.yml to attempt to sign commits
  • 7cc54e7: Added new token for changesets github config
  • 527b1e6: First Beta version
  • Updated dependencies [776fcc3]
  • Updated dependencies [527b1e6]

0.1.1-beta.0

Patch Changes

  • First Beta version