What’s new in Core

✨⚙️ Releasing new core version 1.23.0 ✨⚙️

• Added mobile friendly Combobox , TimePicker , ComboboxMultiSelect .
• Enabled Modal and Sheet to opt out from focus within feature in edge cases.

• ff3d626: Combobox:TimePicker:
  • Implemented a mobile-friendly view which displays content in a Sheet on smaller screens.
  • Add titleForMobile, mobileFriendly and closeButtonPropsForMobile props.
• 9b4278e: ComboboxMultiSelect:
  • Implemented a mobile-friendly view which displays content in a Sheet on smaller screens.
  • Add titleForMobile, mobileFriendly and closeButtonPropsForMobile props.
• Implemented a mobile-friendly view which displays content in a Sheet on smaller screens.
• Add titleForMobile prop.

• 7d74652: Dialog:
  • Added shouldContainFocus prop to control whether focus should be trapped within the dialog while it is open. When set to false, users can navigate focus outside the dialog (not recommended for most use cases). Defaults to true to preserve accessibility best practices
• 9eb7dc2: - Replaced createPortalRenderer with a client-safe useCreatePortalRenderer to fix hydration issues
  • Updated useIsViewportBelowOrEqual to safely default, avoiding hydration issues
• 57dc516: Combobox - Fixed behavior so that when using menuTrigger="focus", clicking the input will reopen the menu after it was previously closed with the escape key.

✨⚙️ Introducing version 1.22.0 Enjoy! ✨⚙️

• Aligned mobile popover title to the left in DropdownMenu and SelectMenu.
• FilterMenu: Added a mobile-friendly view to FilterMenu, displaying content in a Sheet on smaller screens.
• Snackbar: Added styleable props to the Snackbar component.

• Dropdown: Resolved page blocking issue when opening dropdown popovers in scrollable areas.
• Snackbar: Resolved multiple onClose calls in Snackbar by preventing redundant useTimeout executions.

• 8ee3ed1:FilterMenu: Implemented a mobile-friendly view which displays the content in a Sheet on smaller screens.

• dba47cf:DropdownMenu and SelectMenu: Align mobile popover title to left.
• e9d7720: Icons:Symbols:
  • Updated svg for PaymentGooglepayIcon ,PaymentGooglepayFilledIcon
• 657a034:DropdownMenu: Properly align title for the mobile popover
• 1df619d: Icons:Symbols:
  • Added New icons MediaControlVolumeOffFilledIcon,MediaControlVolumeLowFilledIcon,MediaControlVolumeHighFilledIcon, MediaControlVolumeMaxFilledIcon,MediaControlPauseFilledIcon,MediaControlPlayFilledIcon,PlaybackSpeedIcon,TargetIcon,SparklesIcon
  • Updated ApplyAllIcon
• 01b01e1: All Dropdowns: Fix page block when popover is opened in a scrollable area.
• 10b22c3:Snackbar - Fixed an issue in the Snackbar component where the onClose callback was being called multiple times. This was happening because the useTimeout hook was being called unconditionally on every render, creating multiple timers. Added styleable props to the Snackbar component.
• Updated svg for GooglePayColorIcon
• Added New Symbol PsaColorIcon

✨⚙️ Introducing version 1.21.0 Enjoy! ✨⚙️

• Introduced ComboboxListBoxGroup and ComboboxListGroup components to support grouping of options within combobox interfaces, enhancing structure and readability.
• Added new icons and symbols.

• Textarea: Added support for all native HTML attributes and event handlers, providing greater flexibility and better integration with form behaviors.
• Checkbox: Added support for the defaultChecked prop in the Checkbox component, aligning with native behavior and enabling default values for uncontrolled use cases.
• DatePicker: Exposed the missing triggerLabelTrack prop and updated styles to left-align the label text for improved layout consistency.
• Introduced the shouldAttachPortalsToBody prop to allow rendering portals in document.body for improved layering and z-index management. Also includes enhancements to the mobile popover experience for SelectMenu and DropdownMenu components.

• 45a8887: Checkbox: addeddefaultCheckedprop
• 58b92fb: Textarea: Includes all native attributes and event handlers for better flexibility.
• e67a54d: Icon: Added New IconsCameraIcon, ManageAccountIcon
• 85b8b19: IntroducesshouldAttachPortalsToBodyprop flag, to support rendering portals in document.body for better layering. Also, includes improvements to mobile popover experience for SelectMenu and DropdownMenu.
• 2765864:ComboboxListBoxGroup,ComboboxListGroup: Added new component ComboboxListBoxGroupandComboboxListGroup for grouping options.
• cdcc278:Modal: Exposeeventin onEscPress method. e.g. onEscPress={(event) => console.log(event)}Sheet: Exposeeventin onEscPress method. e.g. onEscPress={(event) => console.log(event)}ShareModal: Exposeeventin onEscPress method. e.g. onEscPress={(event) => console.log(event)}

• 831a6bd: Symbol: Added New Symbols ConnectwiseColorIcon, FilevineColorIcon, FranconnectColorIcon, FreshsalesColorIcon, GmailColorIcon, HousecallproColorIcon, Improveit360ColorIcon, LawcusColorIcon, LawmaticsColorIcon, LessAnnoyingCrmColorIcon, LexicataColorIcon, MycaseColorIcon, PipedriveColorIcon, PodioColorIcon, PracticepantherColorIcon, RocketmatterColorIcon, SmokeballColorIcon, TrelloColorIcon UpdatedClioColorIcon, OpendentalColorIcon
• b40e116:ComboboxMultiSelect: Improve support for style parts API
• a2ee879:DropdownMenu: RemoveisMenuOpencondition in DropdownMenuPopover.
• 9486393:DatePicker: Exposed the missing parttriggerLabelTrackand added styles to align text to left

✨⚙️ Introducing version 1.20.0 Enjoy! ✨⚙️

• Accordion: Introduced a new Accordion UI component constructed using AccordionItem, AccordionPanel, and AccordionTrigger, providing an organized and interactive way to display expandable content.
• VirtualTable: Added a VirtualTable component to handle large datasets efficiently using virtualization techniques, reducing rendering overhead and enhancing performance.
• ComboboxMultiSelect: Introduced a ComboboxMultiSelect component to support rich multi-select interactions. Users can type into the input to filter options in real-time, and selected items are displayed as removable tags-enhancing usability for complex selection workflows.

• MenuItems: Added a showSelectionIndicator prop to FilterMenuItem, SelectMenuItem, and ComboBoxMenuItem components. This prop gives users control over whether a checkmark icon is shown for selected items, allowing for more customizable UI behavior.
• TimePicker: The TimePicker component now supports a customDay string as its default value, allowing for greater flexibility in pre-filled selections.
• CropModal: Added offline mode support to CropModal, ensuring no network requests are made when it's enabled

• Calendar: Resolved a styling issue in the small size variant where longer month names caused the component to overflow its container. Increased the component's width to ensure proper layout and prevent clipping.
• Mobile Dropdown: Refactored to render the ModalHeader only when a title is provided, which eliminates unnecessary spacing in mobile dropdowns.

• a51af6a: Added ComboboxMultiSelectcomponent to enable multi-select experiences. Users can type into the input to filter the options, and selected options are displayed as tags with a dismiss button.
• 4b98635: Added VirtualTable component for efficient rendering of large data sets using virtualization.
• 8c25e38: CropModal - add support for offline mode where it do not make any requests
• 7eb9f33: Added new Accordion component using AccordionItem, AccordionPanel and AccordionTrigger components.

• 35900a0: mobile-popover: Refactored to conditionally render ModalHeader only when a title is provided.
• 1414633: DropdownMenu: Exposed all stylable parts of DropdownMenuPopover and correctly linked the modalHeader stylable part within the MobilePopover component.
• 84882e0: TimePicker - added support to pass customDay string as a default value
• 9875567: Calendar: Resolve a styling issue with the small size, where longer month names would cause the component to overflow its container. We have increased the overall width of the small size to acheieve this.
• 813d834: FilterMenuItem, SelectMenuItem & ComboBoxMenuItem: added showSelectionIndicator prop allows users to control whether the selection indicator (check icon) is displayed for selected items.

✨⚙️ Introducing version 1.19.0 Enjoy! ✨⚙️

🗓️ DatePicker

Introduced a new component with a calendar popover for intuitive and efficient date selection, enhancing user experience with a visually interactive interface.

• FilterMenu API Refinements: Deprecated several unused props across FilterMenu components to streamline the API and reduce complexity. These updates enhance maintainability and provide a clearer, more intuitive experience for developers.
• ComboboxItem: Introduced the avoidCloseOnClick prop to prevent the combobox from closing when an item is selected, improving usability.
• Popover: Enhanced UsePopoverArgs by expanding maxWidth support to include fit-content, min-content, and max-content, providing greater layout flexibility.
• DropdownMenu: Click-away is now disabled for the responsive dropdown menu, ensuring menu items remain accessible and selectable without unintended closures.
• TextInput & Textarea: Added the readonly prop to keep inputs non-editable on mobile devices, ensuring better control and consistency.

• 8cc8eab: DatePicker: Added a new component that opens a calendar popover for date selection.

• c9c412d: Combobox
  • ComboboxItem: Added avoidCloseOnClick prop to avoid closing the combobox on item selection.
• 8cc8eab: Calendar: Expose initialFocus prop for DatePicker.
• 450701e: DropdownMenu: Disable click-away for responsive dropdown menu to ensure menu items are always selectable.
• 8cc8eab: Popover: Extend UsePopoverArgs maxWidth to accept other max width props like fit-content, min-content and max-content
• a61f968: TextInput, Textarea: Added the readonly prop to ensure the input remains non-editable on mobile devices
• aef6c39: FilterMenu: Deprecated various unused props across FilterMenu components to streamline the API and reduce complexity. These changes aim to improve maintainability and reduce confusion for developers.
  • FilterMenuTrigger: Deprecated iconStart, isLoading, loadingLabel, isPressed, and form props
  • FilterMenuSearchField: Deprecated labelVisibility, secondaryLabel, counter, description, isDisabled, isRequired, and errorMessage props
  • FilterMenuSearchInput: Deprecated various a11y props and input attributes
  • FilterMenuItem: Deprecated railStart and railEnd props
• edd401f: DropdownMenu: Adjust z-index for DropdownMenu's mobile popover to override the Setmore application's legacy stacking order.

✨⚙️ Introducing version 1.18.0 Enjoy! ✨⚙️

• TextArea: Exported onKeyDown handler for keydown events.
• Combobox: Highlight first option when there is no default option on open.
• Dropdown: Fixed the style root issue.

• Added new icons and symbols and fixed gradient issue in few existing symbols.

• 3de4653: Mobile Enhancements: Deprecate togglePoint prop with backward compatibility.

• 5ad8323: Symbol:AnswerconnectColorIcon, ClioColorIcon, ConstantContactColorIcon, DrupalColorIcon, FreshdeskColorIcon,GoogleAnalyticsColorIcon, GoogleTagManagerColorIcon, HubspotColorIcon, InsightlyColorIcon, IntercomColorIcon, JimdoColorIcon, JoomlaColorIcon, KeapColorIcon, LawpayColorIcon, MailchimpColorIcon,MailerliteColorIcon, QuickbooksColorIcon, SalesforceColorIcon, ServiceminderColorIcon, ShopifyColorIcon, SquarespaceColorIcon, WeeblyColorIcon, WixColorIcon, WordpressColorIcon, ZapierColorIcon, ZohoColorIcon
  • Added new icons
• 900a5cd: Textarea: Added support for keyboard events with onKeyDown prop
• 05b19df: Symbol:
  • Fix issue in gradients when multiple symbols are used in the same page
• 349f668: Combobox:
  • Ensure items are highlighted correctly when opening with keyboard
• c005ea0: Icons:
  • New icons: AndroidIcon, AppleFilledIcon, AppointmentsRecurringIcon, ClassBookingIcon, PluginWebsiteIcon
  • Updated icons: AppleIcon
• 5ca930b: MobilePopover: Moved the stylesProps('root') to MobilePopoverRoot component
• 4746ec4: CropModal - additional error handling in case of inability to read the file on Android device

✨⚙️ Introducing version 1.17.0. Enjoy! ✨⚙️

• Dropdown Menu: Implemented a mobile-friendly dropdown menu that dynamically transforms into a sheet/modal on responsive screens, delivering a smoother and more intuitive user experience on smaller devices.
• Timepicker: Added a customDays prop to the Timepicker, allowing the addition of non-scrollable string options for greater flexibility.
• Share Modal: Enhanced <ShareModal /> with support for className and style props, allowing seamless customization of the wrapper component for greater flexibility.
• Crop Modal: Extended error handling capabilities, providing precise error context. Additionally, the default image resize dimensions have been updated for improved quality.
• Avatar: Introduced a new isGuest prop to distinguish guest users. Additionally, added two new status options, customer and audioCall, for better user categorization and functionality.
• Select Menu: SelectMenuTrigger now aligns with the same API as FilterMenu, ensuring consistency across components, allowing the children prop to display the selected option and replacing the deprecated selectedOption prop.
• Inputs: Added the native disabled prop to TextInput and Textarea, ensuring inputs remain non-editable on mobile devices.

• Updated SetmoreColorIcon to reflect the new branding.

• a0900a8: Implemented a mobile-friendly dropdown menu that transforms into a sheet/modal on responsive screen sizes. This enhancement improves the user experience on smaller screens by providing a more touch-friendly interface.
• 886b5e2:Timepicker: AddedcustomDaysprop to add non-scrollable string options.

• 52f62b5:<ShareModal />: Added support forclassNameandstyleprops to allow customization of the wrapper component in the ShareModal widget
• 106c3b2:<SelectMenu/>: Removed unwanted negative margin in SelectMenuPopover
• 49e46e7:TextInput,Textarea - Added the nativedisabledprop to ensure the input remains non-editable on mobile devices.
• f60ced8:SelectMenu:SelectMenuTriggeruses similar API toFilterMenu, which means thatchildrencan be used for showing selected option instead of selectedOptiondeprecated prop.
• ec0e1b7: CropModal - change default image resize dimensions from 1024x1024 to 2560x2560
• 5d3484a:Symbol- Updated thesetmore-color-iconSVG to the latest design.
• 9da4308: CropModal - extend error handling capabilities
• 4169843:Avatar: Added newisGuestprop and updated 2 new status customerandaudioCall
• Tokens: Updateddecoration.brandtoken

✨⚙️ Introducing version 1.16.0. Enjoy! ✨⚙️

The Color swatch component provides an accessible and customizable color picker, allowing users to choose from a set of predefined colors (swatches) or select a custom color through the interface.

• Slider : The active state is now enabled on the thumb when clicking anywhere on the track, making the experience more intuitive and responsive.
• Field : The isAlwaysVisible prop has been added to the Counter, along with value and maxValue in the <Field /> component, allowing developers to control the counter's visibility.
• Added safe inset space for Dialog elements on iOS devices to ensure a better user experience by preventing content from being obscured by the device UI.

• 18f6e30: <ColorSwatches />: New component to let the user render the group of color swatches

• 2377635: <DropdonwMenuItem />, <FilterMenuItem />, and <SelectMenuItem />: Exposed event object in onClick handler.
• 9ceac2e: TimeZonePickerItemLabel: Added undefined check for text param in highlightMatchedContent.
• 6a304c7: <Dialog />, <Modal /> and <Sheet />: Added safe inset space for ios device for Dialog elements.
• ecd0e0a: Counter: Added isAlwaysVisible along with value and maxValue to Counter in <Field /> component. By default, the counter is hidden. Use theisAlwaysVisible` prop to keep the counter visible.
• d273a7c: Slider: Enable active state on the thumb when clicking anywhere on the track.

✨⚙️ Introducing version 1.15.0. Enjoy! ✨⚙️

A controlled component for single or multiple option selection:

• Presents options in a card-like format
• Supports both single and multiple selection modes
• Ideal for visual option lists

New component for user notifications

• Added sorting functionality for better data organization

Fixed style application for pressed states in:

• <Button />
• <IconButton />
• <IconLink />
• <ButtonLink />

• Updated close icon size to large for mobile views

• Enhanced dark mode support using Figma Library tokens
• Improved animation triggers for hover and focus state

Added additional responsive utility classes to the Block and Safe List

• w-auto
• w-fit
• w-full
• flex-col
• flex-row

• Added new palette tokens
• Adjusted critical-secondary token
• Updated "setmore-black" brand tokens:
  • icon-positive
  • bg-positive-secondary
  • bg-positive-secondary-hover
  • bg-positive-secondary-pressed

• ac7ced9: <Selectcard />: A controlled component that allows users to select one or more options from a set of options. It is useful for presenting a list of options in a card-like format.
• f2f9c5e: - Added newAlertcomponent
  • Tweaked positive and critical-secondary tokens
• ea0743e: Table: Added sorting functionality

• c21de65: BlockList & SafeList: Include w-auto, w-fit, w-full, flex-col and flex-row in the responsive classes to prevent redundant styles on the consumer site.
• 3ebfc92: <Button>, <IconButton>, <ButtonLink> and <IconLink>: Fixed an issue where the isPressed prop wasn't properly applying styles to the component. The component now correctly renders with the appropriate pressed state styling when isPressed={true}.
• 665c6c9: tokens: add palette tokens
• 4e1e35c: Modal: Modal: Update close icon size to large for mobile views
• d38c4c4: Tokens: Updated the hex codes for the following variables in the "setmore-black" brand:<GetPro />:
  • icon-positive
  • bg-positive-secondary
  • bg-positive-secondary-hover
  • bg-positive-secondary-pressed
• Replaced hardcoded hex values in styles. The component now supports both light and dark modes by utilizing class names aligned with tokens from the Figma Library.
• The animation is now triggered on both hover and focus of the GetPro button, enhancing accessibility and user interaction consistency.

✨⚙️ Introducing version 1.14.0. Enjoy! ✨⚙️

• Added new ShareModal widget for link sharing functionality
• Provides various sharing options in a modal interface

1. SelectMenu: Added customization support for mobile modal wrapper styling
2. Dialog: Improved dropdown interaction - prevents modal closure on 'Esc' when dropdowns are open

• 4513e86: Added ShareModal widget that renders a modal with various options to share a link

• 5827374: Icon :
  • Added ClockDollarIcon, DollarBookingIcon, DollarClockIcon, LocationIcon, NotificationsOffIcon, PaymentHistoryIcon, PhoneMessageIcon, RefreshIcon, ReviewStarHalfFilledIcon, WindowsFilledIcon
• d220084: SelectMenu: Added the ability to customize the styling of the modal wrapper used internally by SelectMenu in its mobile version
• 1653323: Dialog: Prevent the Modal from closing on 'Esc' when dropdowns are open inside the dialog.

✨⚙️ Announcing Version 1.13.0! ✨⚙️

This release brings exciting updates, including a mobile-friendly SelectMenu with a responsive Modal/Sheet view for small screens and a new showDurationLabel prop in TimePicker to display time differences effortlessly and few enhancements 🚀

• dfd0c90: SelectMenu : Introduced a mobile friendly version of SelectMenu that renders a Modal/Sheet instead of Popover on small screens.
• ddbe786: TimePicker: Added new prop showDurationLabel to show the time difference in duration.

• 63437eb: FieldErrorMessage: Introduced shouldAnnounceOnMount prop which is useful for screen readers to announce the error message when it is first rendered.
• 79d648a: CropModal: Added support for pinch gesture on mobile devices and mouse wheel on web app.
• e4d8051: GetPro: UX enhancements with updated animations.
• 2d0b874: Dropdowns: Added support for forwarding styles to style inner parts of MenuItem primitives.

✨⚙️ Introducing version 1.12.0. Enjoy! ✨⚙️

1. Dropdowns:
   1. Added the ability to mark MenuItem as disabled.
   2. Updated keyboard navigation logic to gracefully skip disabled menu items.
   3. onClick is now added only for non-disabled MenuItem.
   4. Improved the dropdown reducer with early returns to prevent "maximum depth reached" issues when multiple actions are triggered simultaneously.
2. <FilterMenuItem />:
   1. Consumers can now return a boolean from the onClick callback.
   2. Updated logic to keep the FilterMenuPopover open when false is returned.
3. Checkbox:
   1. Added a new indeterminate state to visually represent when only part of a group is selected.
   2. Designed for use cases like header groups where some, but not all, options are selected.

• c60544d: Dropdowns:
  • Enhanced keyboard navigation to skip disabled MenuItems.
  • Updated MenuItem styles for active, highlighted, hover states and visually differentiate "disabled" item.
  • onClick selection listener only be applied for non-disabled menu items.
  • Optimized reducer logic with early state returns to handle scenarios involving maximum depth and simultaneous action triggers.

• 6511c97: FilterMenu: Updated onclick logic to keep the Popover open if "false" is returned
• b1c0122: Icon :
  • Added ApplyAllIcon, BreakIcon
• Symbol:
  • Added JcbColorIcon, DiscoverColorIcon, DinersIcon
• befcdaa: Checkbox: Added new prop "indeterminate" to visually represent checkbox in indeterminate state.

✨⚙️ Introducing version 1.11.1. Enjoy! ✨⚙️

• Updated default icon to be Setmore new branding tree.
• The previous icon is now available as growYourBrandIcon.
• Supports both setmoreIcon (default) and growYourBrandIcon.

• CropModal : Added mobile support and replaced custom slider with a Slider component from the Design System.

1. FilterMenuTrigger: New placeholder prop for empty states
2. SelectMenu: Deprecated selectedOption prop (aligning with FilterMenu API)
3. Sheet: Increased close button size from 32px to 40px
4. Snackbar: Updated role to alert for better accessibility
5. Modal: modalWrapper className now applies to Sheet component as sheetWrapper
6. Dropdowns improvements:
   • Faster focus return to trigger element
   • Optimized autoFocusOnOpen behavior
   • Enhanced render performance for menu components

• bc52aaf: CropModal - Support for mobile version of crop modal and slider replacement Modal - Styles passed as modalWrapper className will be passed to the Sheet component as a sheetWrapper instead of dialogWrapper,
• bc71351: Snackbar - Update the role to alert for voice-over support.
• 75e29d1: New IconsUpdated IconsLoading:
  • AdditionalInfoIcon, CheckboxIndeterminateIcon, TapToPayIcon, TapToPayCircleIcon, TapToPayCircleFilledIcon, TapToPayFilledIcon, SetmoreIcon, FileCsvIcon
• 3dd25e1: FilterMenuTrigger: Added a new placeholder prop to render content inside the trigger button when the children of FilterMenuTrigger are empty (null).SelectMenu: Deprecated the selectedOption prop, which will be removed in a future version, to align with the API design of FilterMenu.
• 8201ede: Sheet: Updated close button size from "32" to "40"
• e297df4: Dropdowns:
  • Adjusted the CloseMenu logic to immediately return focus to the trigger element when closeMenu is invoked.
  • Ensured that autoFocusOnOpen is applied to DropdownMenuList, FilterMenuSearchInput, and SelectMenuListbox. The useEffect hooks for dispatching SET_ACTIVE_DESCENDANT_INDEX in SelectMenuListbox, FilterMenuListbox, and ComboboxListbox are now executed only once during the initial render.
• GlobeIcon, GrowYourBrandIcon
• Added the new Setmore branding tree icon as the default icon.
• Restored the previous icon under the name growYourBrandIcon.
• The Loading component now supports two icons: setmoreIcon (default) and growYourBrandIcon.

For more detailed information about these changes, please refer to our documentation or reach out to the development team.

✨⚙️ Introducing version 1.11.0. Enjoy! ✨⚙️

The new entry point for widget components - a collection of complex UI components built on top of EDS atomic elements:

• <CropModal /> - Modal component for image cropping
• <Cropper /> - Component for image cropping functionality

🤝 Contributing Welcome! We invite everyone to contribute their widgets to the ecosystem! Widgets are reusable, advanced UI components with built-in logic, crafted using EDS atomic elements. Share your innovative solutions and help expand our widget library. Whether it's a specialized form, an interactive visualization, or any other complex UI pattern, your contributions are highly valued!

1. <Slider /> - A new component with complementary 50 variant shadow token
2. <Calendar /> - A brand new calendar component
3. <Modal /> - Enhanced with Dialog Primitives and responsive design capabilities
   • Added mobileFriendly and togglePoint props for responsive Sheet rendering

1. <Tooltip />: Added visibilityHidden prop for visibility control
2. Global Enhancement: Added data-eds-component attribute to all components for Chrome extension compatibility
3. <Textarea />: Improved scrolling with scroll-padding-bottom
4. useTimeZonePicker: Enhanced with selectedOption in returned object for better timezone context management
5. Charts: Exported chart tokens for wider accessibility
6. Text Tokens:
   • Added disabled-secondary token
   • Updated text colors for disabled and placeholder states in:
     • TextInput
     • Textarea
     • FilterMenu
     • SelectMenu

1. <ComboboxSearchInput />: Optimized handleEscape function with early return pattern

• All components now include data-eds-component attribute for improved debugging and identification
• Modal system upgraded with Dialog Primitives
• Enhanced text token system with new disabled state handling

• 5a19fb1: - Added slider component
  • Added 50 variant to shadow token
• b20e8a2: - Added new Calendar component
• 8311c85: Modal:
  • Replaced Modal Primitives with Dialog Primitives.
  • Added mobileFriendly and togglePoint props to render Sheet in responsive design
• dd9c058: Introduce widgets components:
  • crop modal
  • cropper component

• 1074116: Tooltip: Added visibilityHidden prop to control visibility.
• dbb936a: All Components: Introduced the data-eds-component attribute to facilitate the identification of EDS nodes in the Chrome extension.
• 322b27b: Textarea: Added scroll-padding-bottom
• d893eaa: useTimeZonePicker: Added selectedOption to the returned object, enabling users to manage additional contexts with the currently selected timezone.
• fee0263: Export chart tokens
• 53ceb73: ComboboxSearchInput: Performed early return instead of event.preventDefault() for handleEscape function
• eaeac18: - Text Token: Added disabled-secondary token for text.
  • TextInput & Textarea: Updated value and placeholder text color for disabled state. Update placeholder text color for default state.
  • FilterMenu & SelectMenu: Adjusted text color for the disabled state

For more detailed information about these changes, please refer to our documentation or reach out to the development team.

✨⚙️ Introducing version 1.10.2 Enjoy! ✨⚙️

1. <GrowYourBrandIcon />: Updated svg of icon to meet new business needs
2. Dropdowns: Change logic for controlling missing "ref" on closing action for popover to not collect unnecessary assetTypeError in sentry.

• 32e45e2: Dropdowns: Tweaked "CloseMenuAction" logic to focus trigger element only when "ref" available instead of assert to avoid getting flagged as assertTypeError in sentry.
• 1c9722b: Typography: New heading token and classname text-heading-12
• 0248d25: Updated the svg for <GrowYourBrandIcon/>

✨⚙️ Introducing version 1.10.1. Enjoy! ✨⚙️

1. <CalDynamicIcon />: Update children text font size
2. <Sheet />: The animation delay is now managed as an internal value, simplifying the API and reducing the need for external configuration.
3. <TimeZonePicker />: Removed flags emojis
4. Popovers: We've introduced a new prop that allows you to control whether to render the popover using a React portal or not, giving you more flexibility in how popovers are positioned and rendered within the DOM

• ede564d: CalDynamicIcon: Updated font size to match current live icon
• b93b4b9: Sheet: Removed delay from sheetProps as a default value is set internally.
• a90e163: TimeZonePicker: Removed flags emoji.
• b1bc7f2: ComboboxPopover, SelectMenuPopover, FilterMenuPopover & TimePicker: Added shouldUsePortal prop to control portal rendering of floating elements.

✨⚙️ Introducing version 1.10.0. Enjoy! ✨⚙️

Added experimental components to be able to access from eds-core instead of eds-core/experimental

Providers: Exposed BrandStylesProvider, CreatePortalProvider, TooltipProvider, TranslationsProvider, and their hooks from the eds-core entry point to resolve the issue of providers being undefined when the EDS package is used as an external.

1. Sheet - A Sheet component is a container that acts as a supplementary view, providing access to important contextual information. It can be used to display additional content or functionality.

1. <TimePicker />: Added errorMessage, errorIcon, errorTrack and label stylable parts

1. <TimeZonePicker />: Updated Iraq flag to correct flag emoji.
2. <Tooltip />: Fixed the issue where the tooltip reappears when returning to the tab, even after the mouse leave event has completed.

• 634bcba:
  • Added new Sheet component
  • Added new Dialog primitive component
• c8b3909:
  • Experimental Components: Added experimental components to be able to access from eds-core instead of eds-core/experimental
  • Providers: Exposed BrandStylesProvider, CreatePortalProvider, TooltipProvider, TranslationsProvider, and their hooks from the eds-core entry point to resolve the issue of providers being undefined when the EDS package is used as an external.

• 014b52d: Timepicker: Added errorMessage, errorIcon, errorTrack and label stylable parts
• 65acfb0: <TimeZonePicker />: Updated Iraq flag to correct flag emoji.
• 8d18bf5: Tooltip: Fixed the issue where the tooltip reappears when returning to the tab, even after the mouse leave event has completed.

✨⚙️ Introducing version 1.9.0. Enjoy! ✨⚙️

1. Progress - A Progress component that visually represents the completion percentage of a task or goal.

1. <TimePicker />: Added new customValues and isDisabled prop
2. <Badge /> : Added new iconStart prop
3. Tailwind:
   • Added options shouldExcludeCustomResets and shouldExcludeTypographyStyles to the Tailwind preset config.
   • In microfrontend configurations, set these options to true to exclude custom generated classes and avoid duplicate CSS.
   • By default, both options are set to false.
4. <Tabs />:
   • Added new size prop for Tabs
   • Updated TabItem text token
5. <Avatar />: Added new size 48 variant
6. <CalDynamicIcon />: Added new prop variant to give possibility to define filled version.
7. <TextLink />:
   1. Remove underline for neutralSecondary variant

A few tokens got new better values.

1. useFilteredOptions(): Updated the returned object to include the searchTerm value, this allows user to handle more context in filtering operations.
2. useTimeZonePicker(): Updated the getFilterMenuItemProps to ensure that the TimeZonePickerItemLabel component now highlights text matching the search term to improve the visibility of search results.

1. <TimeZonePicker />: Properly update different city even with the same timezone identifier.
2. <Tooltip />: Fix hiding when hovering sibling element.
3. useComboboxSearchInput: Prevented onKeydown and onFocus event handlers from attaching when the "Field" is marked as disabled.

• d6455dd: Timepicker:
  • Added new customValues and isDisabled prop
• 912d7f2: Badge:
  • Added new iconStart prop
• 13c6582: Progress: Added New <Progress> Component

• 037c742: Tailwind:
  • Added options shouldExcludeCustomResets and shouldExcludeTypographyStyles to the Tailwind preset config.
  • In microfrontend configurations, set these options to true to exclude custom generated classes and avoid duplicate CSS.
  • By default, both options are set to false.
• cb3ce3b: Tabs:
  • Added new size prop for Tabs
  • Updated TabItem text token
• ead9892: TimePicker: Added Style API
• c2d75eb: Avatar: Added new size 48 variant
• 4f61b6e: Icons:
  • Added New icons: GoogleFilledIcon, MoneyFilledIcon
  • Updated existing icons to meet EDS standards:
    • VideoCameraIcon,
    • VideoCameraFilledIcon,
    • TeleportIcon,
    • TeleportFilledIcon,
    • UpdatesIcon,
    • UpdatesFilledIcon,
    • IntegrationsFilledIcon
• d3b16dc: CalDynamicIcon: Added new prop variant to give possibility to define filled version.
• ea50f2c: TextInputPrimitive & TextArea: set autocomplete to off when in a disabled stateSearchInput: Prevent the esc key and onClear triggers when in a disabled state
• 8ec944f: Tooltip: Added maxWidth prop to customise the tooltip's maximum width.
• 9f5437f:
  • useFilteredOptions - Updated the returned object to include the searchTerm value, this allows user to handle more context in filtering operations.
  • useTimeZonePicker - Updated the getFilterMenuItemProps to ensure that the TimeZonePickerItemLabel component now highlights text matching the search term to improve the visibility of search results.
• ab4855b:
  • Text token updates
  • TextLink: Remove underline for neutralSecondary variant
• 0e90939: TimeZonePicker: Properly update different city even with the same timezone identifier.
• f267b7c: Tooltip: Fix hiding when hovering sibling element

✨⚙️ Introducing version 1.8.0. Enjoy! ✨⚙️

1. Tokens:
   1. Added text-heading-20 token.
   2. Added new group chart group of tokens and make the available in fill- and stroke- classes.
2. <Fieldset /> , <InlineField /> : Added bold font style to the labels
3. <DropdownMenu />:
   1. Introduced new isDisabled prop
   2. Added <DropdownMenuProvider /> to handle the disabled state across compound components
4. <SelectMenuItem />: Updated onClick logic to keep the Popover open if "false" is returned
5. <TextLink />: Make href prop optional to allow other routing libraries to be used without TS errors.

1. DropdownsCombobox, DropdownMenu, FilterMenu, SelectMenu, TimePicker and TimeZonePicker fixed maximum rerender count reached:
   1. wrapped contextValues returned in useDropdownContextValues with useMemo
   2. debounce closeMenu() callback
2. <SelectMenu />, <FilterMenu />, <TimezonePicker />:
   1. Style Update: Updated inline padding matching other Dropdowns and Text fields and expanded and disabled states styles updated for consistency.
   2. Keyboard Navigation Fix: Resolved issues with Dropdowns opening via keyboard navigation when "Field" marked as disabled.
3. useComboboxSearchInput: Event Handling: Prevented onKeydown and onFocus event handlers from attaching when the "Field" is marked as disabled.

• 7380989: Tokens: Add '20' option to text-heading-[size] tokens

• 6cb7e1d:
  • useDebounceFunction - Added a new utility hook under @adaptavant/eds-core/utils entry point. This hook provides debouncing functionality for functions, allowing them to delay execution until after a specified wait time.
  • Dropdowns: Combobox, DropdownMenu, FilterMenu, SelectMenu, TimePicker and TimeZonePicker
    • wrapped contextValues returned in useDropdownContextValues with useMemo
    • debounce closeMenu() callback
• cdcb250: SelectMenuItem: Updated onclick logic to keep the Popover open if "false" is returned
• 2a7f5ab: TextLink: Make href prop optional to allow other routing libraries to be used without TS errors.
• c97631e:
  • DropdownMenu:
    • New Prop: Introduced the isDisabled prop to manage the disabled state of the Trigger.
    • New Context: Added DropdownMenuProvider to handle the disabled state across compound components.
  • SelectMenu, FilterMenu, TimezonePicker:
    • Style Update: Updated inline padding matching other Dropdowns and Text fields and expanded and disabled states styles updated for consistency.
    • Keyboard Navigation Fix: Resolved issues with Dropdowns opening via keyboard navigation when "Field" marked as disabled.
  • useComboboxSearchInput:
    • Event Handling: Prevented onKeydown and onFocus event handlers from attaching when the "Field" is marked as disabled.
• f7b9601: Tokens:
  • Added new group of "Chart" tokens
  • Updated stroke and fill classname lists with new chart tokens
• 78fcc73: TextArea: Fixed an issue that prevented focus from moving to other form elements using the "Tab" key after a "disabled" TextArea had received focus
• 698ffdc: Added bold font style to the Fieldset and InlineField labels

✨⚙️ Introducing version 1.7.0. Enjoy! ✨⚙️

1. <Timepicker />:
   1. Added minValue, maxValue and clear prop
   2. Adjusted component to forward Ref properly to <TimePickerInput>
2. <Loading />: Update component animation
3. <Toolitip /> <FilterMenu /> <Combobox /> <DropdownMenu /> <SelectMenu /> : Added strategy prop to control popover position and fixing flickering in fixed containers
4. <Badge />: Wrapped component with React.ForwardRef
5. <Icons />: Added 40px size option
6. <RadioGroup /> <FieldSet />: Wrapped components with React.ForwardRef
7. <DropdownMenu />: Add pressed state for all DropdownMenuTrigger variants

1. <TimePicker />: Fixed list wrapping in Safari browser when scroll bar is always shown.

• 6c2dc33: TimePicker - Added minValue maxValue and clear prop
• efa149f: Loading: Update component animation
• ae63d46: Tooltip, FilterMenu, Combobox, DropdownMenu, SelectMenu: Added strategy prop to control popover position

• f334e98: Badge: Wrapped component with React.ForwardRef
• 741c8ed: - TimePicker: Fixed list wrapping in Safari browser when scroll bar is always shown.
• bdda590: Icons: Add 40px size option
• c5f39ad: - Icon: Added new GoTodayIcon
• 2666b81: TimePicker - Adjusted component to forward Ref properly to <TimePickerInput>
• 29eecbe: Wrapped RadioGroup & Fieldset components with React.ForwardRef
• 5a76d05: Icons:
  • Added New icons: AmexIcon, ArrowDecreaseIcon, ArrowIncreaseIcon, ChartBarFilledIcon, ChartBarIcon, TextSizeIcon
  • Updated existing icon: ServicesIcon
• 4afef9d: <DropdownMenu/>: Add pressed state for all DropdownMenuTrigger variants

✨⚙️ Introducing version 1.6.1. Enjoy! ✨⚙️

1. <Field />: Prevent from crushing in Next.js apps by marking component as client component
2. <Avatar />: Adjusted component to forward Ref properly
3. <DropdownMenu />: Allow to use different elements than buttons to be trigger element
4. <Timepicker />: Fixed console warnings and remove font styles for smaller screens

• 9a24d55: Field: Marked it as client component as we use useRef
• c1aa4d4: - Avatar: Wrapped component with ReactForwardRef
  • DropdownMenu: Changed triggerProps to support any ReactElement not only button
• 760b0aa: - Fix console warnings regarding switching from controlled to uncontrolled input in ComboboxSearchInput and TimePickerTimePicker
  • Fix console warnings regarding onEnterInputHandler
  • Removed fontstyle for smaller screensize

✨⚙️ Introducing version 1.6.0. Enjoy! ✨⚙️

1. <Button />, <IconButton />: Align styles and component behavior in isDisabled and isLoading states.
2. <GetPro />: Give the possibility to pass label via prop to support translation from the consumer end.
3. <DropdownMenuItem />: Give control over whether to close popover or not on item click. Consumers can prevent closing by returning false on onClick callback
4. Tailwind: Export general tokens for correct linking class names with css variables.
5. <Filtermenu />, <SelectMenu />,: Fixed popover to close when opened by clicking on <Field /> label.

• d9d5464: Button and IconButton: Updated Disabled and Loading styles.
• c83955a: Calendar: deprecate component.

• a6f195a: GetPro: Added ability to change content of GetPro component via new 'label' prop.
• d69fb8b: DropdownMenuItem: Added logic to prevent Dropdown closing when consumer's onClick returns "false"
• 2927ae1: Export general tokens
• 6e8f7ea:
  • Field: Created ref and passed down toLabelelement
  • FieldContextProvider: Added one more value labelRef to context value
  • Combobox, Filtermenu, SelectMenu, TimePicker, and TimeZonePicker: Passed labelRef to useClickAway hook along with other memoised refs

✨⚙️ Introducing version 1.5.0! This update brings bug fixes and improvements to existing components. Enjoy! ✨⚙️

1. Table - to display information in an easily scannable format, helping users identify patterns and insights.This component utilizes the TanStack Table API for its core functionalities.

1. <Timepicker />
   1. Added errorMessage prop in Timepicker
   2. Added inputState prop in onSelect callback for better flexibility around error handling
2. <FilterMenuTrigger>, <DropdownMenuTrigger>, <SelectMenuTrigger>: wrapped onKeydown event with useCallback which returned on triggerprops
3. <DropdownMenuList>, <SelectMenuListbox>, <ComboboxSearchInput>, <FilterMenuSearchInput>: wrapped useKeyboardNavigation hook returns with callback
4. <DropdownMenuPopover>, <SelectMenuPopover>: memoize refs sent to clickaway hook for better performance

1. <SelectMenu>, <FilterMenu>, <DropdownMenu>: Added responsive typography classes to the trigger for consistency with TextInput.

• 0dc88f8: - Added New Table Component
• d768abd: Timepicker:
  • Added errorMessage prop in Timepicker
  • Added inputState prop in onSelect callback for better flexibility around error handling

• 806f853:
  • <FilterMenuTrigger>, <DropdownMenuTrigger>, <SelectMenuTrigger>: wrapped onKeydown event with useCallback which returned on triggerprops
  • <DropdownMenuList>, <SelectMenuListbox>, <ComboboxSearchInput>, <FilterMenuSearchInput>: wrapped useKeyboardNavigation hook returns with callback
  • <DropdownMenuPopover>, <SelectMenuPopover>: memoize refs sent to clickaway hook for better performance
• 15db51a: Exporting a Regex to check whether a string contains HTML tags
• 982879a: <SelectMenu>, <FilterMenu>, <DropdownMenu>: Added responsive typography classes to the trigger for consistency with TextInput.

✨⚙️ Introducing version 1.4.0! This update brings bug fixes and improvements to existing components. Enjoy! ✨⚙️

1. <SelectMenuTrigger /> Updated hover and pressed states
2. <Button>, <IconButton>, <ButtonLink> and <IconLink> : Added New variant "neutralSecondaryIntense"

1. Dropdowns:
   1. Fixed popover placement when positioned at the edge of the viewport.
   2. Fixed crashing in the Next.js app on SSR
   3. Fixed activeDescendantId element inside popovers to prevent keeps coming back to view even when the user scrolls to page top
2. <Tooltip />: TriggerProps Type error fixed to support all React element
3. <Tabs /> : Fixed auto-scroll to selected tab item on mounting (initial load)

We have added and updated a bunch of Icons.

• 0b55c52: Tailwind: Added "hoverOnlyWhenSupported" to Tailwind preset as default option, use shouldUseTailwindFuture: false in your configs to opt out from this behaviour

• 0290854: Icons:
  • Added New icons HelpIcon, BillingIcon, HearthFilledIcon, GeneralIcon, YourBrandIcon, TiktokIcon, TiktokFilledIcon, YourAppIcon, BusinessCommunicationIcon, ActivityIcon, StorageIcon, BankIcon
• 553874c: <Button>, <IconButton>, <ButtonLink> and <IconLink>: Added New variant "neutralSecondaryIntense"
• Tokens: Added New "border-primary" token and className
• fd5f261: Popover: Fixed placement for Combobox, DropdownMenu, FilterMenu, SelectMenu, and TimePicker components when positioned at the edge of the viewport.
• 266d532: Tabs: Fixed auto-scroll to selected tab item on mounting (initial load)
• 23a301c: Dropdowns (SelectMenu, DropdownMenu, Timepicker):
  • Fixed crashing in the Next.js app on SSR
• 8f6e88e: SelectMenu: Fix hover and pressed states for SelectMenuTrigger
• 9275e4d: Tooltip: TriggerProps Type error fixed to support all React element
• 7deeb1b: Dropdowns: Fixed activeDescendantId element inside popovers (Combobox, DropdownMenu, FilterMenu, SelectMenu, TimezonePicker and TimePicker) keeps coming back to view even when the user scrolls to page top.

✨⚙️ Introducing version 1.3.0! This update brings two new components, bug fixes, and a lot of other improvements. Enjoy! ✨⚙️

Tabs component represents a set of tabs that allows users to switch between different content views.

Modal (aka "dialog") component that prevents interaction with the rest of the application. The component renders its children (ModalTitle, ModalContent, ModalFooter) nodes in front of a backdrop component.

1. <Field /> Added inbuilt Counter component
2. <TextLink /> Updated underline-offset, pressed and focus state styles.

We have added and updated a bunch of Icons.

1. <Textarea>, <TextInput>, <FilterMenuTrigger>, <SelectMenuTrigger> and <Select> Added ability to style focus indicator from consumers end
2. <Tooltip />
   1. Addressed inconsistent tooltip hiding behavior upon cursor exit.
   2. Resolved abrupt hiding when hovering between more than two elements.
   3. Corrected visibility persistence on mobile touch events.
3. <Button /> & <ButtonLink /> Updated negative margins so when iconStart and iconEnd icons with bounding box looks consistent padding
4. <Toggle /> Updated styles to avoid layout crashing

• 8239101: - Create <Tabs /> Component
  • Update focus-ring offset to 1px
• 9555260: - Added new Modal component
  • Added new background token modal-overlay
• 8df8e8a: Field: Added inbuilt Counter component

• e90091a: Added ability to style focusindicator from consumers for <Textarea>, <TextInput>, <FilterMenuTrigger>, <SelectMenuTrigger> and <Select> components
• 92f0a31: Icons:
  • Added New icons
  • Updated
• bed9f0f: Tooltip
  • Addressed inconsistent tooltip hiding behavior upon cursor exit.
  • Resolved abrupt hiding when hovering between more than two elements.
  • Corrected visibility persistence on mobile touch events.
• 7ea90a4: TextLink: Updated underline-offset, pressed and focus state styles.
• 8ba2dd6: Toggle: Updated styles to avoid layout crashing
• e8b7272: Button & ButtonLink: Updated negative margins so when iconStart and iconEnd icons with bounding box looks consistent padding

✨⚙️ Introducing version 1.2.0! This update brings enhancements to few components, bug fixes, and a host of other improvements. Welcome to the latest and greatest! ✨⚙️

Loading component gets animation improvement and displays growyourbrand tree icon in large sizes.

Timepicker label prop is required now. By default, it's hidden. To display the label, use labelVisibility prop. Extra space before time value is not present when no option is selected.

1. useTimeZonePicker: Added useEffect to track timezone updates.
2. Button, IconButton, IconLink, ButtonLink: set Button border to transparent on hover state for accentSecondary & neutralSecondary
3. Timepicker: Add useEffect which updates selectedOption whenever defaultValue prop change.
4. Avatar: AvatarImage properly updates when src changes after the first fallback render.

• 0c6d278: Timepicker:
  • Updated label as required prop
  • Added labelVisibility prop
  • Removed translations for label prop
• 66b6ead: Loading component:
  • update spinner UI
  • update spinner animation
  • add icon prop

• 4452448: Avatar: Updated the children to be a React component.
• 8ab9b8d: Timepicker:
  • Eliminated tickspace when no option is selected.
  • Addressed scroll jumping problem.
  • Excluded onSelect callback triggered on initial load will be executed only when selectedOption is updated.
• b9a4c1c: useTimeZonePicker: Update hook with Effect which updates selectedOption whenever preferredTzIdentifier prop change
• 27d4ae9: Loading: Update stroke width
• 67ff0d4: Timepicker: Add useEffect which updates selectedOption whenever defaultValue prop change
• f238bfd: Button, IconButton, IconLink, ButtonLink: set Button border to transparent on hover state for accentSecondary & neutralSecondary

✨⚙️ Please welcome 1.1.0, and its improvements and with these new components, bug fixes, and much more ✨⚙️

TimePicker is an input field for entering or selecting a specific time.

Snackbar component helps to display temporary notifications of actions, errors or other events.

The SnackbarContent component can used as a standalone primitive to build a user feedback system. This component is internally used by Snackbar component.

GetPro is a visual indicator that informs users they are in a "Free" subscription and serves as a prompt to switch to "Paid" plans.

1. Added constant-white and constant-black tokens available across all custom utility classes.
2. Added canvas-tertiary token for background
3. Improve setmore-black tokens in both Moon mode and Sun mode.

We have updated a few icons, including those for YouTube, Facebook, Instagram, LinkedIn, Messenger, Cash App (both icon variations), WhatsApp, and X

We are now displaying a tick mark next to the menu item in the popover for <Combobox />, <FilterMenu />, and <SelectMenu /> components only when at least one item is selected.

1. FilterMenu is no longer crashing on hitting 'Esc' key.
2. Fix the TypeScript error regarding using some of the EDS components caused by a conflict between React.Node and JSX.Element type.

• 930a198: Tokens and brands
  1. Extend fill and stroke fields inside colors config
  2. Add general tokens for black and white colors and use them and spread the across all fields inside colors config
• Snackbar
  1. Used tokens new utility classes to style <Snackbar /> appearance indicator
  2. Update snackbar close button icon style
• e2320c7: Added new <SnackbarContent /> Component
• b0f453b: Added new <Snackbar /> component
• 821895b: Added TimePicker Component
• 62e73d5: - Added new token icon['inverse']
  • Added new variant tone='inverse' for <Loading />
• cb544e5: Added New "GetPro" Component

• ab18234: Combobox:
  • Update: Moved "SET_ACTIVE_DESCENDANT_INDEX" dispatch inside listbox from input to avoid useEffect check on every value change
• FilterMenu:
  • Fix: Avoid crashing when "Esc" key is pressed to clear search input
  • Update: Moved "SET_ACTIVE_DESCENDANT_INDEX" dispatch inside listbox from input to avoid useEffect on every input change
• be451d0: - Tokens:
  • Reduce the blue tint in setmore-black colors
  • Added new token background['canvas-tertiary']
  • Icons: Updated Social Media icons with filled version youtube, facebook, instagram, linkedin, messenger payment-cash-app-icon.svg, payment-cash-app, whatsapp, x
• 3639721: Symbol: Removed tone prop
• 1660ed9: - Combobox: Show tick mark and adjust spacing for <ComboboxItem /> only when an option is selected
  • FilterMenu: Show tick mark and adjust spacing for <FilterMenuItem /> only when an option is selected
• d209097: Symbol: Added two more sizes 40 and 56
• ca47220: Update dependencies
• 3e53f5d: Update FilterMenu to inherit size from Field and add large size
• 6c5834f: TimePicker: Added label and defaultValue prop
• 59b0a63: - DropdownMenuPopover: Always render Popover and use visuallyHidden styles to prevent unwanted scrolling
  • SelectMenuPopover: Always render popover and use visuallyHidden styles to prevent unwanted scrolling
  • ComboboxPopover: Always forward popover ref
  • FilterMenuPopover: Always forward popover ref
  • SearchInput: Fix "Maximum update depth exceeded" error when the FilterMenu is closed with the escape key by moving the handleEscape functionality into an effect with a cleanup function instead of using event listeners
• af64577: SelectMenu: Show tick mark and adjust spacing only when any menu-item is selected
• 30f8c9f: - Added transparent border in "active & hover" states for neutralPrimary variant in Button, IconButton, ButtonLink and IconLink
• 3e53f5d: Remove Deprecated_FilterMenu, Deprecated_BaseOption and Deprecated_FilterMenuProps
• b8767c4: Utils:
  • Created new forwardRefWithGenericComponent function with fixed return type
  • Deprecated current custom forwardRef util and replaced with forwardRefWithGenericComponent for components that needs 'ref' as generic type
• a91fd92: Avatar: Added new size 96 variant
• f972282: Add missing id type for TextInputPrimitive

This milestone marks a significant step forward in our commitment to providing a robust and cohesive set of design tools and components that empower developers to create seamless and intuitive user experiences.

As we continue to evolve and improve, we're adopting semver for all future updates. This means we'll be ensuring compatibility and predictability with version numbers that clearly communicate the nature of each update—be it a major change, a minor improvement, or a patch fix.

Since under @adaptavant/ there are many, many packages we decided that with 1.0.0 release we should add better context for those packages required to make the Earth Desing System. So we added eds prefix to them:

1. @adaptavant/translations ➡️ @adaptavant/eds-translations
2. @adaptavant/brands ➡️ @adaptavant/eds-brands
3. @adaptavant/fonts ➡️ @adaptavant/eds-fonts
4. @adaptavant/core ➡️ @adaptavant/eds-core

We delivered the <Combobox /> component which will be perfect for sorting long lists.

🔍🎈 Stay tuned for regular updates, and don't hesitate to dive into our documentation to explore all the new features and enhancements. Let's build amazing things together!

• b172bd0: Update packages names
  • translations => eds-translations
  • brands => eds-brands
  • fonts => eds-fonts
  • core => eds-core
• 🥳🥳 Release 1.0.0 🥳🥳

• 90a9817: Added NewFilterMenu compound component with shared context from Dropdown
• 3679aa6: Added SelectMenu component
• 34ce354: Update mergeIds to remove unwanted whitespace
• 34ce354: Update mergeProps to merge aria-describedby and aria-labelledby, and switch to cx for className concatenation.
• 3b8e698: Update mergeIds function to filter out duplicates
• 6004f2c: Add new Combobox component
• a5f2701: Change default overflow behaviour of popover and lists. Popovers are overflow: hidden by default now, and the list inside them has overflow-y: auto to improve scroll into view behaviour.
• 6004f2c: FilterMenu:
  • Always render aria-selected for FilterMenuItem
  • Get props for FilterMenuListbox from useComboboxListbox
  • Get props for FilterMenuPopover from useComboboxPopover
  • Autofocus input when menu opens using a callback ref instead of the autoFocus attribute
  • Switch to autoComplete="off" for input, and add autoCorrect="off" and spellCheck="false"
  • Update FilterMenuTrigger to use aria-haspopup="listbox" instead of aria-haspopup="false"
• 1b01688: - Rename Field's id prop to controlId make it clearer that the id gets used for the form control rather than the Field component
  • Rename inputId in FieldContext to controlId
• 7114687: - Rename NewFilterMenu to FilterMenu
  • Deprecate old FilterMenu and rename to Deprecated_FilterMenu
  • Update useTimeZonePicker to work with new FilterMenu
• 1d042ae: Replace useEffect in DropdownMenuPopover with useCallback
• 6976193: Combobox: remove unused options prop
• 6004f2c: TextInput: allow aria-haspopup, autoCorrect and spellCheck props
• 6004f2c: TextInput: add focusContainerRef prop
• bcdc7c0: - Remove shared/dropdowns from experimental export
  • Remove index file from shared/dropdowns and update imports
  • Add new DropdownMenuList component
  • Update DropdownMenuItem and FilterMenuItem to generate IDs using shared useDropdownItemId
  • Update DropdownMenuItem and FilterMenuPopover to no longer be polymorphic
  • Wrap DropdownMenuItem click handler with useCallback
  • Update DropdownMenuTrigger to forward ref
  • Update FilterMenuItem to not create an aria-selected attribute when isSelected is false for better screen reader experience
  • Move aria-activedescendant for FilterMenu from FilterMenuPopover to FilterMenuListbox
  • Remove unused listboxRef from DropdownContext
  • Rename listboxId to listId and use for FilterMenuListbox and DropdownMenuList
  • Remove aria-labelledby from FilterMenuPopover
  • Update types for triggerProps in FilterMenu render prop
• 6004f2c: SelectMenu: default value of isSelected prop on SelectMenuItem to false
• ab3bb53: getStyleProps: Rename arg from cssProps to styleProps and add JSDoc comments
• 0f3b6fe: Listbox and DropdownMenuList: Mark options type as readonly
• 6004f2c: FocusContainer: forward ref to base element
• f6664b7: Import icons directly rather than from barrel file

This release is our sixth (and hopefully final) Release Candidate for Earth 1.0.

At this stage, the next release will be marked as 1.0.0, so please test out this release thoroughly and give us your feedback before the upcoming stable release.

Here are the highlights for 0.0.15:

We have made changes to the available variants for Button, ButtonLink, IconButton, and IconLink:

• Renamed the "primary" variant to "accentPrimary."
• Renamed the "secondary" variant to "accentSecondary."
• Added a new variant called "neutralPrimary."

TextLink has also undergone variant updates:

• Renamed the "primary" variant to "neutralPrimary."
• Renamed the "secondary" variant to "neutralSecondary."
• Added new variants called "accentPrimary" and "regular."

Loading has also renamed tones:

• Renamed the "accent" tone to "accentPrimary."
• Renamed the "primary" tone to "neutralPrimary."
• Renamed the "critical" tone to "criticalPrimary."

Similarly, we have renamed the tones for Icons:

• Renamed the "primary" tone to "neutralPrimary."
• Renamed the "secondary" tone to "neutralSecondary."
• Renamed the "tertiary" tone to "neutralTertiary."
• Renamed the "accent" tone to "accentPrimary."
• Renamed the "critical" tone to "criticalPrimary."

In addition to the renamed tones, we have made two more small updates to the icon components in this release. We have deleted the unused createIcon function and updated the ShareIcon to be styled more like iOS.

We’ve made the following breaking changes to our tokens:

• Removed the border["status"] token. To check if you were using this token, search for the following Tailwind classes: border-status, divide-status, ring-status.
• Removed the background["avatar-secondary"] token. To check if you were using this token, search for the following Tailwind class: bg-avatar-secondary.
• Updated the background["canvas"] token for the setmore-black brand.
• Updated the background["avatar"] tokens in all brands.

We’ve also added new tokens for background["avatar-hover"] and status["border"], and wired up the background-canvas-secondary Tailwind class.

This newly added component was added by new Design System team member Nandhini 🎉.

The isDisabled prop now accepts a function that receives the value prop for the Radio you want to disable. This allows you to disable individual Radios within a RadioGroup. You can continue to use a boolean as a prop to disable/enable the entire RadioGroup.

const pokemon = ["Bulbasaur", "Charmander", "Squirtle", "Magikarp"];
const [selected, setSelected] = React.useState(pokemon[0]);

return (
  <RadioGroup
    legend="Pokémon"
    description="Choose your starter"
    name="starter"
    onChange={setSelected}
    value={selected}
    isDisabled={(value) => value === "Magikarp"}
    >
    {pokemon.map((p) => (
      <Radio label={p} value={p} />
    ))}
  </RadioGroup>
);

We also updated the RadioPrimitive (as well as CheckboxPrimitive and TogglePrimitive) to cancel onChange events when they are disabled.

The Textarea component has been updated to support a "subtle" appearance when wrapped in the InlineField component.

We’ve split up the icons and symbols in the codebase and added a new entrypoint that you can import them from (@adaptavant/core/symbols).

We’ve added a TooltipProvider into the Root component so we can detect when a tooltip is showing. If multiple tooltips are triggered, we will dismiss the oldest one first to ensure they do not overlap.

Here is the full changelog with links to commits where changes were introduced:

• 24ceb4c: Update TextLink component:
  • added 2 new variants: accent, default
  • update styling in existing variants: primary, secondary
• a59b512: Add color-scheme to Tailwind color plugin
• cc4fc43: Textarea: Supports subtle appearance
• 1417d3b: Add new entrypoint for symbols
• 4162d58: - Loading: update tone prop
  • accent ⇒ accentPrimary
  • primary ⇒ neutralPrimary
  • onPrimary stays the same
  • critical ⇒ criticalPrimary
• 411c383: - RadioGroup: Accept function for isDisabled prop as well as a boolean
  • useRadioGroupItemProps: allow disabling a single item when used in a RadioGroup
  • useRadioGroupState provide default value of false for isDisabled prop
  • CheckboxPrimitive: Cancel onChange events when disabled
  • RadioPrimitive: Cancel onChange events when disabled
  • TogglePrimitive: Cancel onChange events when disabled
• 315dd14: - Button:
  • Rename "primary" variant to "accentPrimary"
  • Rename "secondary" variant to "accentSecondary"
  • Add new "neutralPrimary" variant
  • IconButton
    • Rename "primary" variant to "accentPrimary"
    • Rename "secondary" variant to "accentSecondary"
    • Add new "neutralPrimary" variant
  • ButtonLink
    • Rename "primary" variant to "accentPrimary"
    • Rename "secondary" variant to "accentSecondary"
    • Add new "neutralPrimary" variant
  • IconLink
    • Rename "primary" variant to "accentPrimary"
    • Rename "secondary" variant to "accentSecondary"
    • Add new "neutralPrimary" variant
• f6bcf5d: - Added Badge Component
• 0d054c4: Only allow one Tooltip to be shown at a time
• 4e3f180: Rename useStyleProps to getStyleProps and update return type to be a function instead of an object with a .dom method.
• 0d792a2: Update share icon
• 7e3a909: Added an optional isToday prop that can alter the today’s date calculation (for example to take timezones into account, since ReactDayPicker by default only works with system/browser timezone)
• 3f6b585: TextLink update variant prop
  • accent ⇒ accentPrimary
  • primary ⇒ neutralPrimary
  • secondary ⇒ neutralSecondary
  • default deleted
  • regular added
• 66e2b3b: - DropdownMenu: Removed className, classNames, style and styles props
• 3768758: Avatar:
  • make avatar not accentable
  • update status badge borders
• Tokens:
  • remove border["status"]
  • remove background["avatar-secondary"] token
  • add background["avatar-hover"] token
• 8dc9956: Field: remove "wrapper" part and use negative margin to move description closer to label
• d392d6a: Added primitive and types exports for Toggle, Radio, Checkbox components
• 0bb2ce2: - Icons:
  • Update tone prop:
    • primary ⇒ neutralPrimary
    • secondary ⇒ neutralSecondary
    • tertiary ⇒ neutralTertiary
    • accent ⇒ accentPrimary
    • critical ⇒ criticalPrimary
  • Delete unused createIcon function
• 89fdc49: Token updates:
  • Added background-canvas-secondary to tailwind colors
  • Updated canvas token in dark mode for Setmore Black theme

This release is our fifth Release Candidate for Earth 1.0 and the first release for 2024 🎆.

As always, we encourage you to try it out and give us feedback to ensure we can address any issues before the stable release.

Here are the highlights:

We've finally finished porting all of the DS to use Tailwind, which means we were also able to remove the style engine.

To update, please uninstall the @adaptavant/emotion package and remove the styleEngine prop from Root.

import setmoreBlackBrand from '@adaptavant/brands/setmore-black';
import { Root } from '@adaptavant/core';
-import styleEngine from '@adaptavant/emotion';
import translations from '@adaptavant/translations/english';

export default function Page({
  children,
  theme: brand = setmoreBlackBrand,
}: {
  children: React.ReactNode;
  theme: typeof setmoreBlackBrand;
}) {
  return (
    <Root
      brand={brand}
      colorScheme="system"
-     styleEngine={styleEngine}
      translations={translations}
    >
      <App />
    </Root>
  );
}

We've also removed the Spacing and NegativeSpacing types as they were only used by sx.

We've made a bunch of changes to our colour tokens in this release. Here are the new or updated colour tokens:

• background['canvas-secondary']
• background['menu']
• background['positive']
• background['positive-hover']
• background['positive-pressed']
• background['positive-secondary']
• background['caution']
• background['caution-hover']
• background['caution-pressed']
• background['caution-secondary']
• background['avatar']
• background['avatar-secondary']
• background['calendar']
• background['calendar-disabled']
• text['inverse-caution']
• text['inverse-positive']
• text['inverse-critical']
• text['inverse-accent']
• text['critical-secondary']
• text['positive']
• text['positive-secondary']
• text['caution']
• text['caution-secondary']
• text['link']
• text['link-hover']
• text['link-pressed']
• icon['positive']
• icon['caution']
• border['calendar']
• border['status']
• status['icon']
• status['border']

We've also renamed the following:

• background['critical-tertiary'] to background['critical-secondary']
• background['critical-tertiary-hover'] to background['critical-secondary-hover']
• background['critical-tertiary-pressed'] to background['critical-secondary-pressed']

After updating, perform a "find and replace" operation to replace "bg-critical-tertiary" with "bg-critical-secondary".

We've also removed the following token:

• background['input-pressed']

If for some reason you were using this token, consult with the design team on what to replace it with.

We've added a new SearchInput component. It has a built-in clear button and handles clearing the input's value by either clicking on the button or pressing the escape key on your keyboard.

We now show a custom icon when an image fails to load.

We've updated our field components to expose a variant of either "standard" or "subtle" via context. TextInput's appearance adapts based on this setting: when nested within a Field, it adopts a standard look; within an InlineField, it shifts to a subtle style.

Now that TextInput can change its appearance based on its parent field, we've deprecated GhostInput and will remove it in a future release.

TextInput is now composed using a TextInputPrimitive, which is not wrapped with our FocusContainer (so it has no focus styles by default) and does not receive state via context so it can be used outside of a Field.

We've switched to literal (pixel) values from t-shirt values for the size prop on our icons.

Our Track component previously accepted our old typography keys as a prop for verticalAlign (along with "top", "middle", and "bottom"). This was so you could align an item in the rail with text that wraps. This didn't work for responsive styles though, so we've opted to remove the prop and recommend using the AlignChildToText component instead.

<Track
- railStart={<MapPinIcon size="32" />}
- verticalAlign="body.3"
+ className="text-body-16 sm:text-body-14"
+ railStart={
+   <AlignChildToText>
+     <MapPinIcon size="32" />
+   </AlignChildToText>
+ }
+ verticalAlign="top"
>
  Anywhere is the freedom to boldly go... well, <br />
  Anywhere; untethered from geographic constraints and free to think outside
  the cubicle.
</Track>

We've deprecated the objectFit prop on our image component. Please use Tailwind's object fit utilities instead.

We've moved composeId, mergeIds, useDebounce, and useProvidedOrGeneratedId from @adaptavant/core to @adaptavant/core/utils, as well as adding a new util — useClickAway.

We've changed the bundler we use for building the design system from tsup to Preconstruct and marked our packages as side-effect free. This has resulted in smaller bundle sizes, the ability to easily add new entrypoints with granular control over things like marking files as client components, and improved DX for users of the awds repo.

We've added inherit and currentColor to all of our colour utilities, as well as adding transparent to stop-color.

Here is the full changelog with links to commits where changes were introduced:

• edd6ba1: Icons:
  • Switch to Tailwind for styling
  • Switch to literal values instead of t-shirt sizes
• 6da95e3: Calendar: Update all styles to use Tailwind instead of sx
• fbfa95e: Image: Update all styles to use Tailwind instead of sx
• ae1274e: Track:
  • Convert styles to tailwind instead of sx
  • Removed typography keys for verticalAlign prop
• b4ecff5: - Field: pass a variant (either 'standard' or 'subtle') to input components (replacing the need for GhostInput)
  • Add TextInputPrimitive which doesn't need context so can be used outside of a Field.
  • Deprecate GhostInput
  • Make isDisabled and isRequired props for FieldContext required
  • Remove useInputState in favour of useFieldContext
• edd6ba1: Tailwind:
  • Add new color-stop utilities: stop-color-current, stop-color-inherit and stop-color-transparent
  • Add new-currentand-inheritclasses for the following properties:
    • backgroundColor
    • borderColor
    • divideColor
    • fill
    • ringColor
    • stroke
    • textColor
• 8805a01: - Move composeId, mergeIds, useDebounce and useProvidedOrGeneratedId to utils entrypoint
  • Add use client directive to components that use hooks.
• 729d3f7: Dropdownmenu:
  • Created new @private MenuItem component for popover menu items
  • data-active-descendant changed to data-focused
• fbfa95e: Image: Deprecate objectFit prop
• 662f4a6: Add new SearchInput component
• 309754c: Update icons to build into core directory
• 0ab9199: Updated mergeprops-util to merge refs and functions call
• 03d269e: Updated TextInput, GhostInput, Textarea, and Select to use Tailwind CSS classes, replacing sx prop styling.
• edd6ba1: Button and IconButton
  • Give loading component a 'part' name so it can be styled
  • Switch to using a visually hidden span instead of a wrapper with an aria-label for the loading label.
• e74829d: Switch bundler to Preconstruct
• 22812ee: - Avatar: Show fallback when image fails to load
  • Icons: Add BrokenImageIcon
• 3185a17: Inline source for @adaptavant/timezone-search and remove dependency
• d083da6: Remove style engine
• bd63870: Add new icons entrypoint to DS
• 34a6c92: Avatar: Update all styles to use Tailwind instead of sx
• ccaeafb: Updated Field, FieldErrorMessage, Fieldset, and Label to use Tailwind CSS classes, replacing sx prop styling.
• 4d47f37: - Tooltip: Updated styles in high contrast mode
• 2697b42: Update Checkbox, Radio and Toggle to remove sx styles
• f4a911a: Update icon build script and clean up SVGs
• 792005a: Optimise icons and fix broken support-filled icon
• 7358f72: Add useClickAway to utils entrypoint
• 073d416: Ensure Tooltip is hidden when not visible
• e256714: Update core package to set sideEffects false and match Preconstruct output
• bede196: Tokens updateRemoved:Changed:Added:
  • background['input-pressed']
• d083da6: Remove Spacing and NegativeSpacing types
• background['critical-tertiary'] into background['critical-secondary']
• background['critical-tertiary-hover'] into background['critical-secondary-hover']
• background['critical-tertiary-pressed'] into background['critical-secondary-pressed']
• background['canvas-secondary']
• background['menu']
• background['positive']
• background['positive-hover']
• background['positive-pressed']
• background['positive-secondary']
• background['caution']
• background['caution-hover']
• background['caution-pressed']
• background['caution-secondary']
• background['avatar']
• background['avatar-secondary']
• background['calendar']
• background['calendar-disabled']
• text['inverse-caution']
• text['inverse-positive']
• text['inverse-critical']
• text['inverse-accent']
• text['critical-secondary']
• text['positive']
• text['positive-secondary']
• text['caution']
• text['caution-secondary']
• text['link']
• text['link-hover']
• text['link-pressed']
• icon['positive']
• icon['caution']
• border['calendar']
• border['status']
• status['icon']
• status['border']

This release is our fourth Release Candidate for Earth 1.0.

As always, we encourage you to try it out and give us feedback to ensure we can address any issues before the stable release.

Here are the highlights:

Setmore is moving to using black as the accent colour. To avoid inconsistencies during the rollout phase, we’ve offered it as a separate brand so that apps can continue to use the blue tokens until the adoption of Earth is high enough that we can switch everything over seamlessly.

To use the new theme, all you need to do is change the brand in your Tailwind config.

-import { tokens } from '@adaptavant/brands/setmore';
+import { tokens } from '@adaptavant/brands/setmore-black';

🚨 Breaking change: We’ve renamed the tertiary variant to secondary and updated the hover and focus styles.

We’ve also updated Button and related components (ButtonLink, Chip, IconButton, IconLink, etc.) to remove all StyleEngine styles and only use Tailwind.

We’ve removed the -webkit-tap-highlight-color that some mobile browsers added.

🚨 Breaking change: We’ve updated the Loading component to accept literal values instead of t-shirt sizes and added a new larger size.

We’ve also slightly updated the underlying SVG.

Previous behaviour: The Popover component used width for the dynamic value provided by usePopover, as opposed to max-width. This was because popovers are typically absolutely positioned, and setting max-width: x; width: 100%; proved ineffective (since absolutely positioned elements are outside the normal document flow).

New behaviour: The Popover now dynamically obtains its max-width and sets a base width of max-content. This allows Popovers to match the width of their content without requiring a fixed width for every instance. This means that, Popovers will automatically adjust to the width of their content, reducing the need to provide a fixed width.

Note: For content with significant length variability (e.g., filterable lists with both long and short values), we still recommend using a fixed width to ensure the Popover width remains consistent when the content changes.

We’ve added more custom plugins to our Tailwind preset and introduced new tokens:

This plugin lets us use the where() pseudo-class to lower the specificity of utilities.

This plugin adds utilities for styling <stop> SVG elements. As part of this update, we’ve also added accent, critical, critical-onPrimary, and onPrimary to our icon tokens, meaning you can use these tokens for fill and stroke values as well.

Added a new none token so that rounded-none can be used to unset a border radius.

Here is the full changelog with links to commits where changes were introduced:

• 93406d3: Remove exports for style functions and types for styles
• f2386c6: Add no-focus-ring class
• 15b93df: FilterMenu:
  • Switch listboxOption styles in FilterMenu to Tailwind
  • Fix z-index bug in high contrast mode
• 1d7b02b: - Created Custom Tailwind plugin for stop-color CSS property
  • Update fill and stroke Tailwind classes to support, accent, critical, critical-onPrimary and onPrimary tokens.
• 9410db0: Update button styles
• 1d7b02b: Loading:
  • Update sizing from t-shirt sizes to literal values (px)
  • Update all styles to use Tailwind instead of sx
  • Update "large" size loading equivalent to 48px, from 32px
  • Add new 80px size to support full-page loaders
• ff23142: Added text critical onPrimary token. Added Setmore Black theme.
• 45dc301: Remove tap highlight color style for links and buttons
• 15b93df: Popover:
  • Update to use Tailwind styles
  • Update width to max-content
• c033490: Button: change text-inverse to text-onPrimary to fix theming issue on booking app
• 1727dc5: Field:
  • Make inputId in FieldContext required
  • Throw if useInputA11yProps is called outside of a FieldContextProvider
• fd561e3: - Button: remove styleEngine styles
  • ButtonLink: remove styleEngine styles
  • Chip: remove styleEngine styles
  • IconButton: remove styleEngine styles
  • IconLink: remove styleEngine styles
  • Calendar: remove styleEngine styles from cellButton
  • FilterMenu: remove styleEngine styles
• cffcaaf: Icons: Add new icon - Apple
• fd561e3: Add radius.none token
• 51169c3: Rename tertiary button variant to secondary
• 24a964d: Remove Style Dictionary package
• 54938b0: Created New InlineField component
• 21b15e0: Text: Use Tailwind styles to define display property for Text component and DS components composed with Text
• 21b15e0: Add where plugin for lower specificity styles
• 6993a07: Remove experimental_ prefix from types and styling functions.

This release is our third Release Candidate for Earth 1.0.

As with the last RC, we encourage you to try it out and give us feedback to ensure we can address it before we publish the stable release.

Here are the highlights:

Previously, we were applying a CSS reset per element. This meant that reset styles didn't leak out and affect other components that might not work with them, but since we're all in on Tailwind, we decided to remove our resets and rely on Preflight.

We've updated the Avatar component to accept children designed to be used with two new subcomponents: AvatarImage and AvatarIcon.

Now that we have AvatarImage, we've deprecated the imageSrc prop. We are planning to remove this prop before we release 1.0, so please update to the new API before then to ensure a smoother upgrade experience in the future:

// before
<Avatar
  imageSrc="https://placehold.co/40.png"
  name="Robert Anderson"
  size="40"
/>

// after
<Avatar
  name="Robert Anderson"
  size="40"
>
  <AvatarImage src="https://placehold.co/40.png" />
</Avatar>

The catalyst for changing the API for Avatar was the introduction of icon avatars. Here is how to create an Avatar with an icon:

<Avatar
  name="Robert Anderson"
  size="64"
>
  <AvatarIcon icon={ProfileIcon} />
</Avatar>

This new API allows us to avoid overloading the Avatar component with props that should not be used together, and it increases the flexibility of our Avatar component to be further extended in the future.

We've added lots of new icons: AmexColorIcon, ApplePayColorIcon, CashAppPayColorIcon, GooglePayColorIcon, MastercardColorIcon, SecuredIcon, VisaColorIcon, BlockIcon, CalView3DayIcon, CheckCircleIcon, CheckUserIcon, CircleDashIcon, CropIcon, CustomerIcon, DeviceMobileIcon, EyeHiddenIcon, EyeVisibleIcon, HomeIcon, InboxIcon, KeypadIcon, LinkedinIcon, MoneyIcon, NavigationIcon, NewWindowIcon, NotesFilledIcon, NotesIcon, QrCodeIcon, RotateItemIcon, SlotIcon, SortDownIcon, SortUpIcon, StatusAwayFilledIcon, StatusBusyFilledIcon, StatusOfflineFilledIcon, SupportFilledIcon, TextCopyIcon, TryProFilledIcon, YocoTimerIcon, and YoutubeIcon.

We've also added CalDynamicIcon, which is available as an experimental component. It works like our other icons but accepts children so you can pass in a number to display the current date.

This is a new experimental component.

Traditionally, adornments are interactive elements. A classic example of this is a password input with a show/hide button to mask and unmask what you have typed. Clickable Adornments are for wrapping non-interactive elements where you want to provide some supplementary information, such as a prefix or suffix for the input's intended value. Since these appear to be inside the input, users might click on them expecting to be able to type into the input (since there is no clear visual indicator of where the actual <input> element is when using an adornment). By using a Clickable Adornment, we will focus the input for you.

This is a new experimental component.

This is a new input that is styled to not have a border for UIs that require a more subtle appearance.

This is a new experimental component.

We've added a new Tag component for displaying content in various situations, such as the selected values for a multiselect. It is a compound component that has adornments for a TagAvatar or TagButton, and it is designed to work for drag-and-drop applications.

This is an experimental component.

We've rebuilt the Tooltip component from scratch rather than wrapping a library. This gives us more control to render the Tooltip inside a Portal to avoid overflow-hidden and z-index issues, as well as extra placement options.

We've also changed the API slightly. The new design adopts a render prop pattern for children. This pattern allows for passing values directly to the trigger element:

// before
<Tooltip content="Copy">
  <IconButton
    aria-label="Copy icon"
    icon={ClipboardCopyIcon}
    variant="neutralSecondary"
  />
</Tooltip>

// after
<Tooltip content="Copy">
  {({ triggerProps }) => (
    <IconButton
      aria-label="Copy icon"
      icon={ClipboardCopyIcon}
      variant="neutralSecondary"
      {...triggerProps}
    />
  )}
</Tooltip>

Previously, we used React.cloneElement (which the React docs advise caution with) to attempt to automatically merge the props provided by the consumer with the props required for the Tooltip to work correctly. Because this happens internally within the component, users are unable to override this behaviour if they ever need to. Additionally, this approach could be confusing for consumers. They might not fully understand how the trigger was receiving props or how the props they provided could potentially interact differently when merged with our internal logic.

Merging props manually can also be daunting. To make this easier, we also offer a mergeProps utility that will:

• Error if it encounters two id strings that don't match
• Merge refs
• Chain event handlers
• Concatenate className strings as well as the properties of classNames objects.
• Merge style objects and properties of styles objects.

import { mergeProps } from '@adaptavant/core/utils';

<Tooltip content="Copy">
  {({ triggerProps }) => (
    <IconButton
      {...mergeProps(triggerProps, {
        'aria-label': 'Copy icon',
        icon: ClipboardCopyIcon,
        ref: buttonRef,
        variant: 'neutralSecondary',
      })}
    />
  )}
</Tooltip>

We changed the name of the props available in the render prop for spreading onto custom triggers from buttonProps to triggerProps. This is consistent with the naming of the render prop in Tooltip.

Here is the full changelog with links to commits where changes were introduced:

• a179ad7: FocusContainer:
  • Add isGhost prop
  • Update all styles to Tailwind instead of sx
• 255ecd0: Add new experimental ClickableAdornment component.
• 4a9aa1b: Avatar:
  • deprecate imageSrc prop
  • accept children prop
  • add AvatarImage component to use inside of Avatar
  • add AvatarIcon component to use inside of Avatar
• f8adcb2: Add new useButton hook
• 201415a: Use Tailwind class instead of sx for align-items to override Stack
• e102993: DropdownMenu: Rename buttonProps in render prop to triggerProps
• 0fa2af8: Remove resets from DS components. Update Tailwind base & Button to accommodate
• f4599cd: Icons: Add new icons
  • AmexColorIcon
  • ApplePayColorIcon
  • CashAppPayColorIcon
  • GooglePayColorIcon
  • MastercardColorIcon
  • SecuredIcon
  • VisaColorIcon
• 6e8af42: - Add Tailwind Preflight and custom base overrides.
  • Remove reset from Box.
  • Fix Chip, Label & Calendar styles broken by Preflight/reset removal.
• 41e2922: Create Tag component for any categorization or sort functionalities.
• a1bd269: IconButton: Rename label to aria-labelIconLink: Rename label to aria-label
• 20e22d5: Add CalDynamicIcon as new component
• 4cbde3a: FieldErrorMessage: Fix alignment of icon when text wraps
• b1b6558: Remove simple usage of deprecated_sx throughout components. Fix IconButton loading state
• 6b54dd3: Change custom focus-ring class to be generic so it can be applied in modifiers
• e102993: Tooltip:
  • Add shouldUsePortal prop
  • Update children prop to optionally accept children-as-a-function
  • Update placement prop to accept start and end variations for all directions (e.g. bottom-end)
• 20e22d5: IconAdd new icons:
  • BlockIcon
  • CalView3DayIcon
  • CheckCircleIcon
  • CheckUserIcon
  • CircleDashIcon
  • CropIcon
  • CustomerIcon
  • DeviceMobileIcon
  • EyeHiddenIcon
  • EyeVisibleIcon
  • HomeIcon
  • InboxIcon
  • KeypadIcon
  • LinkedinIcon
  • MoneyIcon
  • NavigationIcon
  • NewWindowIcon
  • NotesFilledIcon
  • NotesIcon
  • QrCodeIcon
  • RotateItemIcon
  • SlotIcon
  • SortDownIcon
  • SortUpIcon
  • StatusAwayFilledIcon
  • StatusBusyFilledIcon
  • StatusOfflineFilledIcon
  • SupportFilledIcon
  • TextCopyIcon
  • TryProFilledIcon
  • YocoTimerIcon
  • YoutubeIcon
• 8625bdf: Migrate core Stack and Track styles to Tailwind
• e102993: Add chainFunctions and mergeProps to utils
• e102993: Update usePopover to use maxWidth instead of width
• a179ad7: Add new experimental GhostInput component
• 1eb16c3: AlignChildToText:
  • Properly forward props and ref
  • Make polymorphic
• db5e69f: Dropdown: fix active style and remove unused action

This release is our second Release Candidate for Earth 1.0.

As with the last RC, we encourage you to try it out and give us feedback to ensure we can address it before we publish the stable release.

• a6d1600: Add status colors to text- and bg- classes
• 36575a6: Track: Remove gap and reverse props.
• 914811e: Add experimental_shouldExcludeBaseStyles flag to createPreset
• a6e8ecb: Stack: remove alignX and gap props
• 876408c: Refactor border styles for simplicity and Tailwind compatibility
• e38ecaa: Spacer: remove height and width props
• 06bed1e: Text: deprecate fontWeight, lineClamp, tabularNumbers, textAlign, textTransform, tone and typography.Heading: deprecate fontWeight, lineClamp, textAlign, textTransform, tone and typography.
• ff27160: Reinstate lineClamp and scrollbarHidden Tailwind plugins
• 626c345: Clean up external API for core package:Changes were actually applied in this PR: #1061
  • Remove unsupported exports from external API
  • Prefix props that are subject to be removed in a minor release with deprecated
  • Prefix props that are subject to change in a minor release props with unstable
• c19719f: Delete duplicate line-clamp utilities and consolidate component classes into a single plugin
• 9750bc6: - Delete Grid component
  • Delete Deprecated_ResponsiveProp and deprecated_responsivePropToSxProps

This release is our first Release Candidate for Earth 1.0.

We encourage you to try it out and give us feedback to ensure we can address it before we publish the stable release.

In this release, we have:

• Updated the break-words class to use word-break: break-words. Tailwind uses overflow-wrap: break-word for this utility, but we found that it often failed to create word breaks. Therefore, we have enhanced it to apply both properties.
• Updated our border radius token to include "px" in the name to make it clear that they are not part of Tailwind's built-in scale. The generated Tailwind classes look something like this: rounded-4px.
• Added classes for our custom "branded" font weights: font-regular, font-strong, and font-stronger. These allow us to change heading weights between brands, for instance.
• We have also done a major refactor of the TypeScript configuration for our packages, as well as how we add extra entry points to packages. The entry points should now work in all environments, so there should be no need to reach into the dist directory of packages anymore. For example, import { tokens } from '@adaptavant/brands/dist/setmore' becomes import { tokens } from '@adaptavant/brands/setmore'.

Below is the list of changesets for this release, with links to the commits that include the respective changes.

• 79cd423: Added break-words class to tailwind 'utilities' plugin
• f4cf755: Update exports and tsconfig settings
• 4ac61a8: Update border radius tokens to include px in name
• 5cf3dd9: Add custom font-weight utilities

This is the first official release of Earth that makes use of Tailwind CSS.

To use the latest version, you will need to install Tailwind and it's dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

In the Tailwind config file, add our preset using the createPreset function, passing it tokens from your chosen brand.

You will also need to update the content array to include paths for your template files, as well as the components from Earth in node_modules.

/* tailwind.config.js */

const { tokens } = require('@adaptavant/brands/dist/brands/setmore');
const { createPreset } = require('@adaptavant/core/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // update this to provide the location of your templates
    './node_modules/@adaptavant/core/dist/**/*.{js,ts,jsx,tsx}', // this is the location of the React components for Earth
  ],
  presets: [createPreset(tokens)], // using the Earth preset configures Tailwind to use our custom classes
  theme: {
    extend: {},
  },
  plugins: [],
}

We recommend following the Tailwind installation guide for any other framework-specific configuration.

• a66d38d: - Update shadow token names and add Tailwind classes for them
  • Update createPreset function signature
• 4695e5c: Remove label part from Chip
• 2598597: Add SetmoreColorIcon and allow tertiary as icon tone. Add 'hover:text-decoration': 'none', 'border-width': 'none' & 'background-color': 'neutralPressed' to sx. Make 'border-color', 'border-style' & 'border-width' responsive in sx.
• bd8b170: Add new DropdownMenu component to experimental entrypoint
• 90cb8c8: Removing booking app brand and setting setmore brand's default button font weight to strong.
• c992f9c: Port Tooltip styles to Tailwind
• f3b004e: Updated adornment positioning of text input from inline-flex to flex
• 3675bca: Updated root to add light/dark class depending on colorScheme prop. Updated colors.ts to support both class and media query dark mode approaches.
• 3239a7d: Renamed input size names from small to standard and standard to large. Updated checkbox and radio size.
• 06c2363: Updated fontWeight values - 'bold' is now 'strong' and 'extrabold' is now 'stronger'.
• 4695e5c: Update Text component to use Tailwind styles
• 5041cfd: Updated Google and Facebook icons. Updated large buttons icon size from 24px to 20px.
• 8541b12: Updated inputs to a neutral active and focus styles
• 0344861: Update icons
• f4fdc04: Add useCopyToClipboard to core utils
• a398b2b: Add border-radius plugin to Tailwind
• d9aac38: Update dependencies
• 9ba6e77: Rename sx to deprecated_sx
• 0674285: sx updates: Added 'normal' value to 'white-space' token. Added 'wrap-reverse' to 'flex-wrap' token.
• 02be82f: Add lineClamp prop to Heading
• aafae89: Add Tailwind preset
• 37c44e4: Remove initialContent prop from Tooltip
• 3660f1a: Update API of components that accept an icon as a prop
• bd8b170: Add auto to inset in sx

• 0127cf8: Add 'labelTrack' and 'label' parts to ButtonLink
• a89e896: Add border-collapse: collapse to sx
• e861372: Add FieldErrorMessage component
• 564551a: Updated filter menu chevron icon to dropdown icon
• 0885571: Allow width & height on Image and automatically set width and height attributes to Avatar images
• f2825ee: Add light, dark and system theme icons and added type for ColorScheme
• 5fba891: Added border-style none property to sx
• 703b2fa: Update useStyleProps to respect order of classes in cases where there are multiple ways to target the CSS property
• 7be50f8: Colocate styles
• a89e896: Add text-decoration: line-through to sx
• e533c9c: Switch to literal values for border-radius and add 6px token
• 7abe9f6: Update FilterMenu to take up all available space
• 333b482: Add negative values to all inset and margin properties in sx
• 391d3df: Compose IconButton with Box
• 7abe9f6: Add 'center' part to FocusContainer and apply display: flex to it
• 0127cf8: The 'label' part previously targeted the entire Track (including the icons). This has been modified to improve specificity.
  • Renamed: 'label' part in button to 'labelTrack'.
  • Added: New 'label' part that targets the 'center' of the Track.
  • Updated: 'labelTrack' with 'min-width: 0'.
  • Moved: 'font-weight' property to the 'label' part.
  • Added: 'line-clamp': '1' property to the 'label' part.
• a8f4fb6: Add error message to Checkbox and remove isInvalid prop
• d4c0fce: Remove 'min-height': '100dvh' from default Root styles
• 391d3df: Cancel click events for buttons when isDisabled is true
• 333b482: Add padding and equal negative margin to Button and ButtonLink to prevent text clipping

• a7f3e6e: Make as prop required for heading, and typography prop optional
• 8f75eef: Add experimental FilterMenu component
• 787a83c: Add TogglePrimitive to experimental entrypoint
• 47b5152: New icons for calendar microfrontend. Renaming icons with add- and new- to create-. Deprecating ShareArrowIcon, it now replaces shareIcon.
• ce8dd22: Added inverseTertiary token to background-color tokens.
• 594a578: Update typography for Checkbox and abstract out CheckboxPrimitive
• 9c79e20: Add experimental Toggle component
• 73e66ee: Update size prop to accept a literal value instead of t-shirt sizing
• c9cea57: Add size prop to Field and enable small variants for TextInput, Select and Textarea
• 594a578: Update typography for ControlGroup and add error icon to errorMessage
• 9461919: Change PlaceholderImage to use placehold.co
• 9461919: Add scrollbar-display: none, margin: -24 and opacity: 1 to sx
• 8ab528b: Added CSS property 'order' to sx and made it responsive.
• 9bc6471: Add ShareArrowIcon
• 594a578: - Update typography for Radio
  • Prevent disabled Radio inputs from being checked when clicked
  • Let consumers set an explicit aria-describedby value
• e4bc18f: Updated radio styles to match checkbox styles.
• e568481: Change size of icon for standard IconButton and IconLink
• 17ff6da: Add labelId to FieldContext and expose a useFieldContext hook for accessing everything in FieldContext
• e60f2df: Add min-height: 100dvh to sx
• b0f245c: Update text-link to use Box and support the as prop
• 8f75eef: Add autoFocus and role props to TextInput
• 10eafa4: Change label to legend for Fieldset and RadioGroup
• 594a578: Map all parts from ControlGroup onto RadioGroup
• 59135b4: Update imports in core to no longer come from central index file
• 9bc6471: Add inverse background-color in sx
• 10eafa4: Rename ControlGroup to Fieldset
• a674950: Make value required for RadioGroup
• 3489c4a: Expose adornment slots for TextInput
• 16740e7: Add inset-inline and inset-block to sx
• 51f2a87: Add RootRefProvider to root
• 3489c4a: Update styles for Select to account for smaller height
• 9bc6471: Add 200 to transition-duration in sx
• 86e8d81: Make all margin properties in sx responsive
• 594a578: Add disabled styles for Field typography
• 8f75eef: Add onKeyDown prop to Button component
• 8f75eef: Add overflow-y to sx
• 8f75eef: Add experimental Popover component and usePopover hook
• a674950: Make type of value prop for Checkbox and Radio an optional string
• d5c75d4: Update font size, inline-padding, icon size, loader size for standard size Button.
• 3489c4a: Compose FocusContainer with Track component
• 39a8a60: Add experimental Portal component
• 3ddc972: Add 'margin-inline-start': '-2' to sx
• 9bc6471: Add responsive gap prop to Track
• 51f2a87: Update styling API for Root to match other DS components
• a0aac90: Add onBlur support to RadioGroup

• eedb58e: Select: Change key for disabling options to isDisabled and allow disabling of entire groups. Remove unused Fragment.
• 55c4282: Add id to label in Field component
• 93addc8: Add width:fit-content to sx.Create and use getDisabledStylesFromVariant function for Button & IconButton
• e83e882: Add background-color:surface, cursor:default and margin-inline-end:-4 to sx.Add cursor:default to "disabled" Buttons and IconButtons
• 8cec683: Enable responsive typography and render 14px font for inputs after sm breakpoint
• a183626: Change TextInput and Select to have 40px height
• 7d2893e: Improve Avatar perf by allowing broken images. Improve a11y
• c9916cf: Add various highContrast styles. Fix loading so it's always visible in highContrast
• 7356910: Update Track's verticalAlign prop to accept a typography key to vertically align icons with text that may wrap
• 9277d1c: Add various properties to sx
• 616202e: Fix .focus() on Button & IconButton from displaying :focus-visible in Safari
• f9b1c17: Add 'text-decoration': 'underline' to sx and removed 'text-decoration' from 'hover:color'

• 9298175: Add 2 to Spacing. Make margin-block-start responsive
• 30ef2a8: Patch button sizesFix specificity issue with ButtonLink and Chip
• 1f890b3: Add all allowed border-colors to sx
• 62c56b5: Add justify-content: space-between to sx
• 20e74ac: Make align-items and flex-direction properties in sx responsive
• 05c0e0e: Add position:static and various negative margins to sx
• 30ef2a8: Compose Button with Box componentsCompose ButtonLink with Box componentsCompose Chip with Box components
• 94690be: Add overflow-x: auto to sx
• 39bec9c: Patch checked styles for Checkbox

• ec60ea3: Reducing the default font weight specificity. Now font weight can be manually overridden by props. Updated tests.
• 08432df: Provide default values for component props
• df9dd10: Make all padding values responsive
• 8c10f6c: Add box-sizing to sx
• 78ac58c: Add Spacer component
• 8089afe: Add Box component
• 181faf0: Add onFocus and onBlur types to Button and ButtonLink
• a607cb6: Add -16 token to margin in sx
• e6f5437: Fix bug with Track rendering incorrect children
• 1bc804e: Changed style properties to kebab-case
• 7788ac0: Add Chip component
• 95fbdbc: Add aria-describedby to Checkbox
• efa52f9: Update allowed sx properties
• 181faf0: Add -16 token to margin-block in sx
• fcc788e: Added TextLinks component
• 34f8f0f: Add responsive styles for CSS display property in sx.
• 8ae0713: Add ESLint rule to sort JSX props
• a0f67a2: Add PlaceholderText component
• 3e751a8: Compose Track with Box and useStyleProps
• ddfab29: Refactor brand styles to sx objects
• 146beb8: Add Image component
• 7f3c571: New sizes for icon link and icon button
• 32d65d0: Updated button component with layouts component
• 58dc4e4: Add Grid component
• d39de2e: Remove label types and fix loading styles
• 75a035f: Bug fix for createSx function
• 90e9324: Upgrade dependencies
• b030219: Add large icon sizeUpdate sx function to accept more tokens
• a82d9c2: Add fontWeight to typography styles. Remove default fontWeight from Text and Heading. Make BookingPageSettings coords optional
• e50034f: Fix icons package
• fc76873: Add TextInput component
• 1e8d462: Add Text component
• 7c26fc3: Add Select component
• 8fc65f2: Add Heading component
• 367040c: Make API for Checkbox and Radio components consistent
• d4f14b6: Updated radio and checkbox API and compose with layout and text components
• e570097: Set aria-disabled to undefined on IconButton if isDisabled prop is falsey
• ad4c20c: Feat/radio button
• 44a0f4f: Make IconLink polymorphic
• bcd4555: Add Track component
• f1e726d: Updated teleport icon, new icons clock, lock open, lock closed, map pin filled.
• 2ff2538: Add sx prop and input complex selector styles
• 1c59c34: Fix alignment of loading icons in Button and IconButton
• edd5d60: Add Textarea component
• f5b77c8: Add Stack component
• 606e8e6: Use ForwardRefComponent type for Track component
• 75a035f: Add backgroundColor in sx to accept "currentColor"
• 7966f6b: Add PlaceholderImage component
• f4b49f0: EDS-388 New Icons
• 352a08d: Set css vars in style tag for emotion
• fc76873: Add Field component
• 424315e: Abstract styling lib into packages
• 2f1cb87: Update deps
• 95fbdbc: Add form attribute to Button props
• 29f469a: Add ControlGroup componentAdd RadioGroup component

• 33c9c57: Improve styling API
• 219f55a: Add AddIcon

• 47974ef: Add IconButton component

Initial release