Components

Version history

Our components are constantly evolving alongside our product. Learn what’s new and see a version history of our component library.

Change Log

22.2.0

Minor Changes

  • 3dce611: Added a disabled prop to the Segmented Control Item component

Patch Changes

  • 24dc525: Attached document-level event handlers in capture phase to fix issues with React 17
  • be826e8: Racine and Seeds React now share the same systemProps to avoid any current/future discrepancies regarding which components or props are being exported. Duplicate Racine systemProps have been deleted.
  • Updated dependencies [24dc525]
    • @sproutsocial/seeds-react-popout@1.0.2

22.1.1

Patch Changes

  • ed9aded: Fixes a bug where jest axe was inadvertently being included in a package consumed by the web-app
  • Updated dependencies [ed9aded]
    • @sproutsocial/seeds-react-hooks@2.0.2
    • @sproutsocial/seeds-react-icon@1.0.1

22.1.0

Minor Changes

  • 3ff0f4c: Menu dependencies are now separate packages.

Patch Changes

  • 4f94d34: Fix broken active prop on Menu.Item component

22.0.0

Major Changes

  • 3c28d7b: - All imports in Racine have been updated to use the new mixins, theme, and utilities packages
    • Old files remain in place to support pre-existing file drilling

Patch Changes

  • Updated dependencies [9aaaa9c]
    • @sproutsocial/seeds-react-system-props@2.1.0

21.1.0

Minor Changes

  • e254b62: Support passing the scope property to TableCell

Patch Changes

  • e254b62: Network colors for trustpilot ratings have been added as trustpilot_0_star (or the applicable rating from 0-5)
  • e254b62: Round up inner Collapsible box height measurement
  • Updated dependencies [e254b62]
    • @sproutsocial/seeds-networkcolor@2.15.1

21.0.2

Patch Changes

  • 75faf70: Fixes a bug where checkboxes were rendering incorrectly.

21.0.1

Patch Changes

  • d2988bb: Add border to avatar when src provided but errors

21.0.0

Major Changes

  • 61ebd8a: Breaking Change:

    Uses @sproutsocial/seeds-partner-logos for Partner Logo assets

    Uses @sproutsocial/seeds-illustrations for Spot Illustration assets

    • Partner logo assets are now stored in a new package called @sproutsocial/seeds-partner-logos.
    • Spot illustration assets are now stored in a new package called @sproutsocial/seeds-illustrations.
    • @sproutsocial/seeds-partner-logos and @sproutsocial/seeds-illustrations are now peer dependencies of Racine.
    • Sprites: Instead of using logo.svg or illustration.svg from Racine’s dist/directory, the sprites should be imported from the respective packages. Attach these spritesheets to the DOM in the same way as the @sproutsocial/seeds-icons sprites.
    • Dependencies: Add @sproutsocial/seeds-partner-logos and @sproutsocial/seeds-illustrations to your application’s dependencies.

20.17.0

Minor Changes

  • 57799e9: Add profile groups spot illustration

20.16.0

Minor Changes

  • fc4f89c: Updated theme to include new 50 level magenta and teal literal colors

Patch Changes

  • Updated dependencies [fc4f89c]
    • @sproutsocial/seeds-color@2.1.0

20.15.0

Minor Changes

  • 1164ab2: Image onError callback now passes the error event as an input

20.14.0

Minor Changes

  • 8eb9741: Add TikTok and YouTube partner logo lockups

20.13.6

Patch Changes

  • b2ff294: Critical readme updates

20.13.5

Patch Changes

  • a2a2302: Remove README extra content

20.13.4

Patch Changes

  • e4149ea: Testing a release

20.13.3

Patch Changes

  • b0e00ae: Remove the yarn.rc file

20.13.2

Patch Changes

  • 9b002e8: Remove racine npmrc file

20.13.1

Patch Changes

  • 179d541: Add missing value for button.pill.border.hover to the light theme

20.13.0

Minor Changes

  • 516544cf9: add trustpilot partner logos

20.12.0

Minor Changes

  • e83d2eb4f: - Update the default Input type for MenuFilterInput to 'search'
    • Fix race condition bug which fails to update the Input value when using the clear button on search inputs

Patch Changes

  • b3be51600: Remove whitespace from border of threads partner logo
  • b52ca03cc: Fix border-radius for modals to use 8px instead of 6px

20.11.0

Minor Changes

  • 722b5fe5f: Add Threads network color to theme

20.10.0

Minor Changes

  • baa709cbe: Allow the control of Menu (and Listbox) state

    Uses the same pattern as Popout.

  • 89075a1b1: Upgrade from node v16 to v18

Patch Changes

  • 2ec7f343e: Update text.subtext theme color in dark mode to better reflect accessible contrast standards
  • 30fdb087d: Update Tooltip id to propertly match describedBy aria tag

20.9.0

Minor Changes

  • 2e135c53a: Add prop to Drawer to allow certain elements to be exempt from the Drawer focus lock

    This is helpful when Pendo Guide are activated while a drawer is open.

  • 60ba119e2: The width of Drawer can now be customized using the width prop.

20.8.0

Minor Changes

  • ba43d9369: Updates the seeds-color dependency which includes the new blue
  • d77544cb6: Update sproutsocial PartnerLogo to latest look

20.7.0

Minor Changes

  • 0c09b39cc: Adding Threads logo in light and dark versions

Patch Changes

  • 7989c088f: Fix Menu keyboard functionality to not select disabled menu item

20.6.0

Minor Changes

  • 75ca2857b: Adds Menu.Switch subcomponent to Menu and Listbox

    • Including a Switch in a Menu by passing it as a Menu.Item's children or elemAfter is not accessible for keyboard users.
    • The new Menu.Switch component allows a consumer to use a Switch in a Menu while retaining keyboard accessibility.
    • Like the Menu.Checkbox and Menu.Radio subcomponents, Menu.Switch should be used in place of a Menu.Item, not as a Menu.Item's children, elemBefore, or elemAfter.
    • The placement of the Switch, i.e., in elemBefore or elemAfter, is determined by the placement prop.
    • The text that serves as a label for the Switch can be passed into Menu.Switch as the children or label prop. Menu will handle programmatically associating the text with the Switch. You should not wrap the text in a Label component.
    • Listbox is a variant of Menu; the same changes and guidelines apply to Listbox.

    Simplified example migration:

    Before

    <Menu>
    <Menu.Item>
    <Label htmlFor="switch-id">Switch label</Label>
    <Switch id="switch-id" onClick={handleClick} checked={selected} />
    </Menu.Item>
    </Menu>

    After

    <Menu>
    <Menu.Switch
    id="switch-id"
    placement="after"
    onClick={handleClick}
    selected={selected}
    >
    Switch label
    </Menu.Switch>
    </Menu>
  • bc2935791: Add X (Twitter) logo to partner logos

Patch Changes

  • bc2935791: Upgrade @babel/traverse

20.5.0

Minor Changes

  • bc2935791: Add X (Twitter) logo to partner logos

20.4.1

Patch Changes

  • 35df3316c: Tooltip types now allow for the use of onFocus in cases where the implementation requires an event during hover
  • 35df3316c: Upgrade @babel/traverse

20.4.0

Minor Changes

  • 98dcd1d61: Upgrades scroll-into-view-if-needed from v1 to v2

Patch Changes

  • 98dcd1d61: Refactor tooltip to better address event bubbling and accessibility issues

20.3.1

Patch Changes

  • 5e137f7c: hotfix issue with layers in web-app-core caused by stopping escape event propagation in tooltip

20.3.0

Minor Changes

  • e83128a9: Add flex and grid system props to the Button and Text components
  • a90ffa7d: FormField component now supports required prop, which marks the label with an asterisk and sets children elements to required.
  • 7672a5d2: Updated the Icon component so that when a non-variant tag name is passed in and the size='mini', then the default variant will be solid instead of outline.
    • Example: <Icon name='tag' size='mini' /> would display the tag-solid icon at the mini size.
    • Note: This behavior can be overridden by passing a name with a variant such as <Icon name='tag-outline' size='mini' />
  • 354caff2: Add carousel indicator color tokens

Patch Changes

  • 97366f0a: Use id of head cells instead of colGroup for key

20.2.0

Minor Changes

  • 26140808: - Skeleton accessibility improvements and design changes. Improves color contrast and adds a prefers-reduced-motion media query.
    • borderRadius selection will now differentiate between circular (avatar) loading states, or linear (the default state). Any usages of circular skeletons will need to explicitly define borderRadius='pill' property, all others will default appropriately.
    • Updates the neutral.highlight theme color from COLOR_NEUTRAL_500 to COLOR_NEUTRAL_600

Patch Changes

  • c8b0af6b: Address tooltip focus issues when hovering over the tooltip content
  • 89cf4057: Fix date pickers not closing on ESC key press w/ React 17

20.1.0

Minor Changes

  • 1a52bdb4: Adds footerContent prop to Menu/Listbox to improve keyboard accessibility
    • Currently, the children prop is the only way to pass content to be rendered inside a Menu. Menu implicitly expects the only interactive elements in children to be Menu.Items. When interactive, non-Menu.Item content is included in children, it will not be accessible to keyboard users, because any keydown events will be applied to the active Menu.Items instead.
    • The new footerContent prop allows content that should be shown below the Menu Items to be passed and focused separately. When the focus is on the footer, Menu.Item keyboard events will be suppressed, allowing interaction with the footerContent.
    • Listbox is a variant of Menu, so the explanation and changes described apply equally to Listbox.
  • cfab3798: - Avatar now accepts type="auto" to automatically and randomly apply a background color
    • Deprecated variant prop. Avatar now handles darkmode automatically
    • A border is now applied by default to Avatars that have not been given an image
    • Fixed a bug where the color prop was needlessly appending 'px' to color values
  • fd96bb33: The Tooltip component has undergone several updates with a focus on accessibility
    • The tooltip component now keeps the tooltip open when the mouse hovers over the tooltip content. Previously, the tooltip would close as soon as the mouse left the tooltip trigger.
    • The tooltip component now closes when the user presses the escape key on the keyboard.
    • The tooltip content now has the role='tooltip' attribute, improving accessibility.
    • Tooltip and subsequently Popout component no longer propagate id throughout all of their children

Patch Changes

  • 2167e323: - Changed the manner in which we were handling a transparent color on LoaderButton from using the polishedjs rgba() to hexadecimal.

20.0.0

Major Changes

  • d3b6122f: Breaking Change: Uses @sproutsocial/seeds-icons for Icon assets

    • Icon assets are now stored in a new package called @sproutsocial/seeds-icons.
    • @sproutsocial/seeds-icons is now a peer and dev dependency of Racine.
    • All icons now have solid and outline variants, with outline being the default. Variants are specified as a part of the icon name (e.g., bell-solid); if omitted, the outline version will be rendered by default.

    To recap the migration steps from our announcement of these changes:

    • Sprites: Instead of using icon.svg from Racine’s dist/ directory, the sprites should be imported from @sproutsocial/seeds-icons for each category of icons you want to include. Attach these spritesheets to the DOM in the same way you do icon.svg.
    • Dependencies: Add @sproutsocial/seeds-icons to your application’s dependencies.
    • Icons: Most icon names are changing as a part of this refactor. Run the 'icon-library' codemod to automatically update as many icon names as possible. The codemod cannot fix Icon components where the name prop is not a string, but the codemod will (by default) add a code comment when this occurs, to help you find cases where you need to manually update icon names.
    • Icon variants: The codemod may not always map to the correct variant for your use case. In these cases, manually update the variant by updating the icon name prop.
  • d3b6122f: Removes reddit-alien PartnerLogo in favor of reddit

    • The reddit PartnerLogo is also updated to look like the reddit-alien PartnerLogo did

19.0.1

Patch Changes

  • 52e76ee2: Overriding the type for React.HTMLAttributes so that it included data-* attributes
    • This fixes a bug which did not allow passing data attributes on Input.inputProps
    • Also updates React.ComponentProps since it consumed React.HTMLAttributes
  • d9df9d52: Fixing a bug in CardLink component that opened two tabs when clicked

19.0.0

Major Changes

  • 7c096210: 🚧 Breaking Changes 🚧

    • Remove deprecated OverflowList component (and react-virtualized dependency)
    • Remove deprecated example dataviz color rotation exports

    🛠️ Non-breaking Changes 🛠️

    • Add support for react and react-dom v17
    • Upgrade dependencies
      • react-modal
      • react-popper

Minor Changes

  • 0aea6f0d: Add fontSizes and lineHeights objects to the theme. These objects fix a bug on the Card component and set us up to use the default system props behavior in future refactors.

Patch Changes

  • 7b871fe7: Clickable children of non-sortable TableHeaderCell components will now fire their onClicks properly.
  • e6cc9ab1: Remove webpack specific raw css import from the toast component.

18.0.0

Major Changes

  • fb938ad3: The HTML structure for the menu and listbox groups has been rearranged to improve accessibility for grouping
    • When a title is provided to the <Menu.Group /> or <Listbox.Group /> component, the title is now correctly nested within the menu group container with the appropriate role and aria-labelledby attributes
    • Menu and Listbox title container is now a li instead of a div for improved accessibility
    • Developers are now able to provide a custom role to the Menu.Group and Listbox.Group components as well as override the padding applied to the title container

Minor Changes

  • 5f60f73a: Adds the invalidNumberLabel prop to Numeral
    • The label you provide will be added as visually hidden text to any instance of Numeral with an invalid value (i.e., where we render an em dash ()).
    • The prop is optional, but passing in a localized label is strongly recommended for accessibility purposes.
      • Without this prop, screen readers will not read off anything for invalid values.
      • With this prop, screen readers will read off the invalidNumberLabel for invalid values, providing clear feedback to screen reader users.
    • Users should pass an invalidNumberLabel prop to all instances of Numeral; Numeral handles conditionally applying or omitting the label as needed.
  • 23f73d44: Card component enhancements
    • Adds the ability to specify an external link on the CardLink component.
    • Provides Flow types for the subcomponents.
  • 9e33f361: Fix Link accessibility issues
    • Changes default state of underline prop from false to true
    • Updates stories to accurately reflect accessible link usage

Patch Changes

  • ba5d2429: Accessibility bugfixes for the ChartLegend component
    • Recreates provided "contrast", "compare", and "extended" palettes in React hook to utilize the Racine theme
    • Deprecation warnings added to the "contrast", "compare", and "extended" palettes
      • Due to low usage of these palettes, ChartLegend will rely solely on the dataviz rotation and custom colors moving forward
    • Provides 3:1 contrast ratio
    • Dark mode support

17.0.0

Major Changes

  • 5234f32d: Accessibility updates to Card based on Perkins review.

    Breaking changes

    • Card using role='link' will no longer work without the CardLink subcomponent

    Enhancements

    • Cards with role='link' should now wrap link text in the CardLink subcomponent
    • Improves screen reader accessibility by pairing Cards as links with the new CardLink subcomponent
    • Adds CardLink subcomponent
      • Link text wrapped in CardLink renders an anchor tag as a child of Card
      • Preserves the behavior that allows the user to click the whole Card as the link
      • Handles navigating to the href using default link behavior.
      • Includes an affordance prop that makes composing a Card as a link easy and visually appealing

Minor Changes

  • 99b984a6: Add the following Partner Logos:
    • android
    • apple
    • github
    • github-alien
    • salesforce-cloud
  • 6c2753bc: Adds Tableau symbol and lockup to the PartnerLogo component

Patch Changes

  • b31737fa: Fixed automation for PartnerLogo names and type, which updated PartnerLogoNames and EnumLogoNames so they now include all logos.

    Deprecation Warning:

    • PartnerNames is now deprecated in favor of PartnerLogoNames
    • TypePartnerNames is now deprecated in favor of EnumLogoNames
  • fb536bed: Applies box-sizing: content-box property to Switch loading state in order to avoid conflicts with global CSS reset properties

  • adec46fc: Updates Toast to accept Partner Logo names for 'icon' prop

    • Toast erroneously did not accept Partner Logo names for the 'icon' prop, even after the Icon component was updated to render PartnerLogos.
    • The Flow and Typescript types have been updated to add all partner names to the valid values for the 'icon' prop.

16.0.0

Major Changes

  • 94469294: Accessibility and api changes for the Switch component:
    • Breaking Change: a11yLabels prop has been removed in favor of using aria-label or aria-labeledby
    • New loading prop has been added for intermediate states for asynchronous Switch behavior
    • Slight style changes and css improvements for parity with Figma library components

Minor Changes

  • 273671d1: Add custom-post-variables svg to the SpotIllustrations component

  • b44a5e38: Adds screen reader announcements for DatePicker visible month changes

    • A visually hidden element describing which months are visible is now rendered for all DatePickers.
    • This provides feedback to screen reader users when they click the previous month or next month buttons.
  • 16b303d3: Add typeIconProps to Banner to allow aria props to be passed to the type Icon

  • b44a5e38: Adds setStatusText prop to DatePicker components

    • A setStatusText prop is now available for all DatePickers. It is optional but strongly recommended for accessibility purposes.
    • setStatusText receives an array of the currently visible month(s) as Moment objects.
    • setStatusText should return a localized string that describes the currently visible months, such as "Now showing June 2023" or "May 2023 and June 2023, now showing".
  • af63482c: Table Headers now recieve scope and colgroup attributes to announce grouped columns to screen readers

  • ee36f147: Sortable table headers can now be wrapped in a button and are more accessible to screen readers

  • 8d5fb2c0: Adds a new badgeColors object that represents the available badge colors. It also adds a new TypeBadgeColor type that is a union of the color options in the badgeColors object. Both can be imported from the @sproutsocial/racine package.

  • 90b7a542: Changes aria-haspopup to "dialog" rather than "true" since it is a dialog rather than a menu.

  • 303af7c0: TabButton now supports the following props by default:

    • role="tab"
    • aria-selected={isSelected}

    The Tabs component now has role="tablist" by default.

Patch Changes

  • 894597e3: Adds quote-solid icon

15.1.0

Minor Changes

  • d5feb9c0: The LoaderButton component has been updated to have accessible visual contrast between the button and the loader. We've done this by applying an opacity directly to the background-color of the button, rather than the entire button.

    ModeOldNew
    DarkScreenshot 2023-06-01 at 1 46 55 PMScreenshot 2023-06-01 at 1 47 31 PM
    LightScreenshot 2023-06-01 at 1 46 43 PMScreenshot 2023-06-01 at 1 46 28 PM
  • a75290d2: - Added screen reader support for the status of added and removed tokens.

    • iconProps is now supported for tokens
    • iconName on tokens now supports PartnerLogo names
  • b6ff36b9: SpotIllustration accessibility updates:

    • type includes svg props, including aria-label and aria-hidden
    • set default role to img
  • a31a7172: Label component now accepts the required prop which appends an asterisk to the end of the label

15.0.1

Patch Changes

  • 5fc0ef75: Exports Card subcomponents from the root for easier importing

15.0.0

Major Changes

  • 03601450: Introducing the new and improved Card component!

    Breaking changes

    • Replace buttonProps with relevant button props at surface level
      • tabindex
      • disabled
      • selected

    Features

    • Simplify markup
    • Fine tune styling
    • Add layout utility subcomponents to simplify common use cases
    • Improve component API and developer experience
    • Improve testing
    • TypeScript
    • Color contrast and keyboard accessible
    • Improve docs to better inform implementation

Minor Changes

  • 8e990d95: Loader component updated with accessible visual contrast

    ModeOldNew
    Dark
    237793791-ab96c939-4fba-4183-b395-50524d2fc11c237793851-c9aa9395-99cb-4f82-95f7-906e13c1c042
    Light237793795-71880e84-8cd8-43cd-8c20-88b3dff3334f237793853-5de2d525-783a-4278-b0d3-6749f9a071c5

14.3.0

Minor Changes

  • 3e367848: Token A11y fixes:

    • Add aria-label and aria-hidden to Icons in stories
    • Add a visual indicator for invalid tokens
    • Adjust styling
    • Fix bug with error text token in Racine theme
  • 539fa582: Visual changes to bitly, canva, glassdoor, and whatsapp icons

    • Now that the Icon component renders PartnerLogos, the old Icon version of any icon with a PartnerLogo equivalent is no longer available for use.
    • In most cases, the icon and the partner logo with the same name looked almost identical.
    • However, a few icons had a different design when rendered as an Icon.
      • bitly
      • glassdoor
      • canva
      • whatsapp
    • There is no migration necessary, but please be aware that if you are currently using Icon to render an icon for any of these partners (e.g., <Icon name="bitly" />), the resulting icons will change visually.

    Before and after image with the old Icon versions on the left and the new PartnerLogo versions on the right:

  • 539fa582: Removes uncolored network icons with PartnerLogo equivalents

    • Previously, the following icons had no pre-filled color when rendered using Icon.
      • canva, dropbox, facebook, facebook-audience-network, facebook-groups, feedly, glassdoor, google-drive, instagram, linkedin, linkedin-audience-network, messenger, pinterest, reddit, salesforce, slack, tumblr, twitter, twitter-audience-network, youtube, and zendesk
    • Now that Icon serves as a pass-through to PartnerLogo, dark mode-compatible network coloring is built into these icons.
  • 539fa582: Allows rendering PartnerLogos using Icon

    • The Icon component has been updated to render a PartnerLogo with logoType "symbol" when a valid partnerName is passed as the name prop to Icon.
    • This behavior is provided as a developer utility only:
      • Logos rendered this way should still follow the same semantic rules as any other PartnerLogo.
      • PartnerLogo is still recommended for direct usage, and it is still the only way to render wordmark or lockup PartnerLogos.
  • 539fa582: Adds "symbol" logoType to PartnerLogo

    • The "symbol" logoType corresponds to the icon-like version of the specified partner's logo.
    • This version of a logo was previously accessible only by omitting the logoType prop.
    • "symbol" is now the explicit default value for PartnerLogo's logoType prop. It was already the implicit default, so there will not be any change in behavior for existing PartnerLogo components that do not specify a logoType.
  • 539fa582: Add svgProps to Icon and PartnerLogo components to allow passing props to the svg, such as for accessbility.

  • f2f060a4: To provide a better experiance for users using assitive technologies. Drawer components will now include role="dialog" and receive autofocus when opened. Drawer.Header components will now allow optional id prop to allow Drawer components to leverage aria-labelledby attribute. Icon components inside Drawer.Header will now include aria-hidden="true"

Patch Changes

  • 539fa582: Removes nonfunctional PartnerLogo 'color' prop
    • There were references to a color prop in the PartnerLogo component
    • However, passing a color prop would not actually have any effect because PartnerLogo colors are locked per theme
    • References to this prop have been removed
  • 539fa582: Updates PartnerLogo width logic
    • Applies a width property to the logo-svg itself only, not the containing element, to fix layout issues such as padding not being applied to PartnerLogos when using display="flex".
    • This may lead to small layout changes for existing PartnerLogos.
  • 8814fba7: Sync icons from Figma
  • 539fa582: PartnerLogo and Icon components will now include role="img" and an aria-label or aria-hidden should now be passed to make these accessible.
  • 34f778af: fixes a bug that prevents fill colors from being removed from icons

14.2.0

Minor Changes

  • 16a0ef29: - Add team sprout icon variations

Patch Changes

  • 1c647238: Change form.border.base theme color to neutral.600 to provide a color contrast ratio of 3:1 on all form elements
  • 8a0d5ba6: Update usage examples across the design system to remove placeholder text by default. Additionally, improve the color contrast of placeholder text and differentiate it from text values with italics.

14.1.1

Patch Changes

  • 0c738bee: Update badgeColor Flow types in Badge component to include the new decorative palette colors

14.1.0

Minor Changes

  • 09dc15ad: Add Alert Indicator colors to the Listening extended theme
  • 5f685503: Support flexbox gap via system props on the Box component
  • dee44d6f: Extend the available badge color options to reflect what is available in the Racine decorative palette

Patch Changes

  • 07a24e81: Remove dependency reach/component-component in order to support React 17
  • 5cf19670: Add a new onClose prop to the Banner component
  • 2e9efed3: CharacterCounter component will now include role="status" attribute to provide a better experience to screen reader users
  • 0b9719ac: Adjust sizes on large Input and Select to match Figma UI Kit

14.0.1

Patch Changes

  • 32d0513a: Revert default set on PartnerLogo.size (should have no default)
  • 32d0513a: Revert a markup and styled component change on Label that broke the font family and styles used
  • 32d0513a: Fix TypeDrawerCloseButtonProps for Drawer.CloseButton to correctly extend TypeButtonProps

14.0.0

Major Changes

  • be795a0b: TYPESCRIPT IS HERE 🎉

    This release includes new support for Typescript, which now type-checks all of our code and provides new types and interfaces for each component. Currently, the types and type safety are similar to the Flow version of Racine, but we will be making incremental improvements over time.

    Reach out in #design-systems if you find an issue or have any feedback.

    Breaking Changes

    • We've restructured the component directories and renamed many files, so subdirectory imports are likely to break. However, everything that needs to be imported should be available in the root index file. Please let us know if this is not the case, and we can add what is needed.
    • Previously deprecated flow type imports from subdirectories have been fully moved to a new file structure (ex: __flow__/Toast is now __flow__/Toast/index.flow) and we strongly encourage importing these from the root instead of the subdirectories to avoid possible future breaking changes if the files are moved again.

    Notable differences from Flow

    • Flow allowed inexact typing on components, but this is not the case for the typescript types. We've done our best to add the necessary extensions and props to each component type, but please let us know if you think any necessary properties are not included.
    • In many cases where "any" was used in Flow (such as with styled components and React refs), Typescript may provide more accurate typing and potentially break current implementations.

Minor Changes

  • be795a0b: Upgrade csstype to latest

Patch Changes

  • be795a0b: Fixed Button styles to handle the unstyled appearance
  • e745b3c3: We've included an icons directory in the Racine build, providing more precise access to Racine's collection of icon SVGs.
  • be795a0b: Add eslint check to disallow @src imports
  • be795a0b: Fix popoutProps type on MenuButton
  • be795a0b: Fix typo in TypeStyledComponentsCommonProps for forwardedAs (previously forwardAs)

13.8.0

Minor Changes

  • c7c9aff9: Add Adobe Experience Manager to the PartnerLogo component.

13.7.1

Patch Changes

  • e745b3c3: We've included an icons directory in the Racine build, providing more precise access to Racine's collection of icon SVGs.

13.7.0

Minor Changes

  • e0273c23: This change adds the Bynder logo to the PartnerLogo component.

13.6.0

Minor Changes

  • 02c4187a: Added solid and outline versions of the AI icon.

13.5.0

Minor Changes

  • 1aae71a7: Added Sprout mobile app spot illustration

Patch Changes

  • 88bc7f61: Fixed code injection vulnerability in the racine-codemod

13.4.2

Patch Changes

  • e26d0ef6: Triggering a forced NPM deploy for the changes in 13.4.1 due to a deployment issue

13.4.1

Patch Changes

  • 6b1e15e9: Update tasks-check icon to remove fill that was preventing changing its color.

  • ff903949: Added 'route' icon to the Icon Component.

  • 5a9a805b: Allow consumers to reference Google and Apple App Store network colors using theme tokens

  • 164e6cd9: This patch adds new spot illustrations for:

    • variable-table
    • user-team

13.4.0

Minor Changes

  • b6f0228d: Adds Icon Library codemod to address upcoming breaking changes

    Deprecation Notice: Upcoming breaking changes to the Icon component and tooling

    In Q1 2023, we will be making several major changes to the Icon component. Key changes:

    • Icon assets will be stored in a new package called @sproutsocial/seeds-icons. This will allow consumers of Racine to update to the latest icons without waiting for Racine to release an update. @sproutsocial/seeds-icons will be a peer and dev dependency of Racine.
    • Most icons will have solid and outline variants, with outline being the default. Variants can be included in the icon name (e.g., bell-solid) or as a prop (e.g., <Icon name=”bell” variant=”solid” />).
    • Icons will be renamed to use descriptive instead of prescriptive naming. For instance, the ads icon will be renamed to dollar-outline so that its name will visually describe the icon instead of prescribing its intended usage.

    Due to the scale of the changes, we are unable to make the changes backwards-compatible. You can preview the migration process below, but you should not complete the migration until these changes are released.

    Migration steps:

    • Dependencies: Add @sproutsocial/seeds-icons to your application’s dependencies.
    • Sprites: Instead of using icon.svg from Racine’s dist/ directory, the sprites should be imported from @sproutsocial/seeds-icons for each category of icons you want to include. Attach these spritesheets to the DOM in the same way you do icon.svg.
    • Icon names: Most icon names are changing as a part of this refactor. Run the icon-library codemod to automatically update as many icon names as possible. For more information on how to use Racine codemods, view our Migration docs on Seeds.
  • f84feaf3: Adds icon-name-substitution codemod

    • This codemod complements the existing icon-library codemod, helping to automate icon name updates that cannot be automatically handled by the icon-library codemod.
    • The codemod replaces string literals that are deprecated icon names with their updated names. Please note that this codemod will change any strings that happen to match a deprecated icon name, even if they are unrelated to icons, so we recommend running it against specific files (not your entire codebase) and carefully checking the results.
    • Use racine-codemod icon-name-substitution to run this codemod and view the docs

Patch Changes

  • f84feaf3: Fixes icon-library codemod bugs

    The following unwanted behaviors have been removed:

    • Erroneously removing the first comment in a file
    • Erroneously removing the Icon import when Icon is still being used for a styled component or for "typeof Icon"
    • Incorrect parsing of the "components" argument, leading to it not being used
    • Adding multiple shim imports if there are multiple @sproutsocial/racine imports in the same file
    • Breaking aliased and type imports from @sproutsocial/racine

13.3.0

Minor Changes

  • 9eaa1f94: Added small spot illustration for notifications and an extra large notification for publishing-notifications

13.2.0

Minor Changes

  • 4a82bd91: - Added a feature file to the Card component that outlines its features in Gherkin format
    • Added first attempt at tests to test the features outlined in the feature file as well as parts of teh component's API

Patch Changes

  • 4a882440: These updates include bumps to dependencies and devDependecies to address security vulnerabilities

13.1.1

Patch Changes

  • a9b3d47: Patch to fix npm publish

13.1.0

Minor Changes

  • aee3064e: bump networkcolors to include google play store and apple app store
  • d48ca3d3: add logos for google play store and apple app store integrations

Patch Changes

  • fd455918: Add missing constants export to TableHeaderCell/index.js
  • e6f97dd4: Upgrade json5 to 2.2.3 to fix vulnerability
  • 3485cc51: Bump decoder-uri-component to 0.2.2

13.0.2

Patch Changes

  • baed838a: This patch solely addressed an issue with our beta deploys that prevented a proper NPM release

13.0.1

Patch Changes

  • 922c2aa3: Fix build command to run sequencially. This fixes the broken v13.0.0 build.

13.0.0

BROKEN BUILD Use 13.0.1 instead!

Major Changes

  • b7e186ca: Breaking Change

    The Banner (aka Alert) component no longer supports the danger type in favor of error. All instances of danger in code and themes are now replaced with error.

  • 1d5997d0: Breaking Change

    Button no longer supports the default appearance in favor of unstyled. All instances of default must now be updated to use unstyled istead.

  • 2fd3e905: Breaking Change / Bug Fix

    The deprecatedIcons were not being included in Flow validation, so the type for the Icon name was incorrect. A fix has been added that now correctly restricts the name on the Icon component to only allow valid names. An equivalent fix was necessary on the Badge component for iconName prop.

    To migrate, ensure that all Icon.name and Badge.iconName instances are valid icon names.

Minor Changes

  • 60c49d55: Deprecation Notice:

    In prior versions not all type definitions were being exported at the root. In some cases this meant consumers had to import types or related constants from the subdirectories like flow. Importing from these directories is now deprecated. In a future version, these files may move and eventually these files will no longer be accessible.

    To migrate deprecated code, update all imports to use what is accessible at the root. If you need to have access to something that is not currently exported from that location, please submit an issue.

  • 4a36140a: Flow types (flow-bin) has been updated to version 0.131.0. This will help support apps on this more recent version and improve the reliability of types written for Flow.

Patch Changes

  • 3d835017: Move TypeSpaceLiterals types to Stack component and off of Theme

12.24.0

Minor Changes

  • dea3072d: - Renamed campaign-tag SpotIllustration to megaphone to generalize the name and make it easier to find for designers and developers
    • Adjusted the cropping on both tag and megaphone SpotIllustrations to remove unnecessary whitespace

12.23.0

Minor Changes

  • b9585e91: Adds a campaign spot illustration to SpotIllustration and updates the tag illustration

12.22.1

Patch Changes

  • 67770645: Update loader-utils to fix security vulnerabilities

12.22.0

Minor Changes

  • 1c52dc5c: Bump React in peerDependencies from ^16.2.0 to >=16.8.0
    • Updated version number ensures that features like hooks are supported (introduced in 16.8.0)
    • Updated version selection syntax allows consumers to use React 17+ without conflict
    • Does not affect the built package, as we are currently using 16.12.0 in devDependencies

Patch Changes

  • 486b5aaa: Remove playroom dependency and update raw-loader and loader-utils to fix security vulnerabilities
  • abb3d352: Input placeholder CSS selector had a typo that made it not work correctly for dark mode. This is now fixed.

12.21.2

Patch Changes

  • 8461abb8: Fixed the Checkbox SVG, which became broken during the addition of new prettier rules.

12.21.1

Patch Changes

  • e0e4fc78: Storybook addon-essentials has been moved to devDependencies rather than dependencies since it is only used for development and isn't required in production.

12.21.0

Minor Changes

  • ae9f649c: This change includes infrastructure changes to :

    • Storybook and dependency version bumps
    • Removal of deprecated Storybook add-on knobs in favor of supported add-on controls
    • Added system prop types to Stack and TableCell
    • We are now exporting TypeProps for Banner, Box, CharacterCounter, Drawer, FormField, Indicator, Input, KeyboardKey, Link, Select, Stack, TableHeaderCell, Text, TextArea, and TokenInput
  • ae9f649c: This change adds a molecule spot illustration to the SpotIllustration component

Patch Changes

  • ae9f649c: Updated a number of depencies to ensure Racine tech is on the latest versions

  • ae9f649c: An accessibility bug on the Menu has been fixed that caused the Menu.Item index to become out of sync when items are removed.

    The Menu component currently supports adding and removing menu items dynamically, but an index needed for accessibility was only being updated when items are added but not when they are removed.

12.20.0

Minor Changes

  • cd9d6a5: Added feature demo colors to growth extended theme
  • 99c6adb: Updated the Loader Button component to support dark mode

Patch Changes

  • 38f240c: Removed legacy PDF and IE11 icon style hacks
  • 84797d6: Adjusted the values of icon sentiment colors to work more consistently and with better contrast across both light and dark modes
  • f97c4e1: Remove spread property from SVG in PartnerLogo component

12.19.0

Minor Changes

  • 50cd7cb: Updated sproutTheme secondary nav background color to have slight opacity
  • 6304ab1: This change adds three variations of the Sprout Social logo as well as the bigcommerce lockup. Additionally, we slightly tweaked the viewbox values on the bigcommerce mark.

12.18.0

Minor Changes

  • 23b1f66: Added seven new spot illustrations to the SpotIllustration component:
    • asset-cards
    • binoculars
    • instagram-links
    • note
    • planning
    • publishing
    • workflow-steps
  • 339c879: Added text.background.selection semantic token to the base theme to provide text selection support

Patch Changes

  • 484f6c2: Removed unwanted static fills from 4 icons:
    • underline
    • flat-neutral-sentiment-outline
    • flat-negative-sentiment-outline
    • flat-positive-sentiment-outline

12.17.0

Minor Changes

  • c0f0a47: Add BigCommerce logo to PartnerLogo component
  • 2f7fd4f: Added navigation accordion background colors to the sprout extended theme

Patch Changes

  • 04a9121: Change "Pill" Button variant to use border instead of mix-blend-mode
  • a3720e0: Updating the useInteractiveColor React Hook to accept a string instead of the TypeColor theme types
  • c18d171: Adds a new spot illustration titled "browser-doc" for use in the SpotIllustration component.

12.16.1

Patch Changes

  • 3cb36bf: This change fixes a bug where "px" was being appended to a number value when users were already including a pixel value. This was causing incorrect css syntax i.e. "16pxpx"

12.16.0

Minor Changes

  • b2c4834: The aria-label and aria-labelledby props were added to the TypeListboxButtonProps flow type for the ListboxButton component

  • 8b80526: Updated Indicator color to support theming

    • Indicator's color was previously hard-coded to teal.600
    • We are now using a semantic theme value, "icon.info", so that the color of Indicator can reflect the current theme.
    • Please note that "icon.info" currently resolves to a blue color in all bundled themes. Thus, unless you override the color, all Indicators currently in use will change from teal to blue.
    • Support for overriding the Indicator color via the color system prop was added.
  • b2c4834: The checked and indeterminate props on the Checkbox component are now optional

  • 57cb24f: Deprecation Notice:

    The default appearance for the Button component has been deprecated in favor of unstyled. To migrate, change all Button components which use the default appearance to use unstyled instead. Support for the default option will be removed in a future version.

    The following components that use the Button component or its types must also be migrated to use unstyled instead of default for the appearance:

    • ListboxButton
    • LoaderButton
    • MenuButton
    • Message.Button
    • ModalCloseButton
  • b2c4834: The following components now export their prop flow types:

    • Loader
    • Icon
    • Numeral
    • PartnerLogo
    • Popout
    • SpotIllustration
    • Switch
  • b2c4834: The ItemComponent and getItemProps props on the OverflowList component are now optional

  • 8a70eff: We've made some enhancements to the Partner Logo component! The Partner Logo component API now closely aligns with the Icon component.

    • Added support for different logo types ie. wordmark or lockup
    • Added support for predefined sizes. ie. mini, small, medium, large, and jumbo.
    • The partner Logo now has a fixed width by default.
  • 5613a5c: A new Advocacy icon has been added to the icon library

Patch Changes

  • 56fa0b9: Updated Icon component to accept size="small" prop to closer align to the PartnerLogo component

12.15.0

Minor Changes

  • 47d839a: Update dark theme decorative purple background color from purple 800 to purple 900
  • 4cb0239: The spot illustration component has been updated to include three new illustrations.
  • 4cb0239: - The SpotIllustration component now includes four new spot illustrations via contributions from our creators.
    • PartnerLogo now includes Facebook and Linkedin audience network logos.

Patch Changes

  • 750dd91: The type prop on the Banner component was previously implicitly optional, but a refactor in version 12.13.0 inadvertently changed this to be treated as required. This fix updates the Banner component so that the type is explicitly optional.

12.14.0

Minor Changes

  • 6cb6579: The Icon component now offers a "tools" icon.

12.13.0

Minor Changes

  • c8566fd: Deprecation notice:

    The danger type for the Banner component has been deprecated in favor of the error type. The default for the type will be changed from danger to info. A few changes will be required to comply with this deprecation:

    • Any code using the danger type for the Banner component should be migrated to use the error type instead.
    • Any styles using danger props from the theme should be migrated to use error instead.
    • Any instances of the Banner component with no type specified should explicitly set the type to error.

    Use of the danger type for the Banner component and danger props in the theme will be fully removed in a future release.

12.12.0

Minor Changes

  • f2c4585: Add Listening-specific colors to Sprout extended theme

Patch Changes

  • f2c4585: The deprecation for the TypeSpaceLiteral import from the themes/light/theme file will now give a warning of the deprecation in VsCode.

12.11.0

Minor Changes

  • fa63c6b: Deprecation notice:

    The TypeSpaceLiteral type has been added to the Stack component. Use of TypeSpaceLiteral in the theme is now deprecated and will be fully removed in a future release. Any code importing TypeSpaceLiteral from themes/light/theme should be migrated to import this type from Stack/TypeSpaceLiteral instead.

  • fa63c6b: The Partner Logo component now offers the twitter audience network and facebook groups logos

Patch Changes

  • fa63c6b: Add Under Construction illustration to Spot Illustration component

12.10.0

Minor Changes

  • a414187: add extended decorative color palette
  • a414187: Add user semantic token to growth object in extended sprout theme
  • a414187: Expose TypePartnerNames at the root level so that it can be used when typing props for the PartnerLogo component.

Patch Changes

  • a414187: The sprout extended theme now includes a border color for the main navigation.
  • a414187: Toasts now have box shadows that use the proper values from our theme. With this change comes increased contrast in dark mode.

12.9.0

Minor Changes

  • 11f1803: Add cardControl, opportunity semantic colors to sprout theme

12.8.0

Minor Changes

  • 429a4b3: Add secondary navigation widget background color to navigation theme

12.7.0

Minor Changes

  • dbdd391: Adds global-trend and tag small spot illustrations to the Spot illustration component

12.6.0

Minor Changes

  • 2a6861c: Adds size props and common system-props to the partner logo component

12.5.0

Minor Changes

  • b9d2645: add optional label props to checkbox component

Patch Changes

  • e73ecb3: Adjust neutral.background in decorative palette to differ from container.background.base"
  • 178c7d9: Add tiktok to theme in network colors for flow typings
  • 9955641: Fix typo for theme colors for settings navigation

12.4.1

Patch Changes

  • 19d74a4: Quote property names in theme.scss files
    • This fixes a bug where properties with names that have specific meanings in CSS (such as "green") would not be accessible using SCSS's map-get.

12.4.0

Minor Changes

  • bbfada2: Adds a spot illustration component that handles svg illustrations, works with theming, and allows for custom dynamic colors
  • 2b85eee: Add theme colors for settings navigation list items

12.3.0

Minor Changes

  • 80c370a: add color tokens in the extended theme for reporting chart overlays

Patch Changes

  • ecf1eb8: adds bugfix for sideEffect in package.json that was causing errors in SproutSocial

12.2.0

Minor Changes

  • 0ceebbc: Adds new component that dynamically handles partner logos across modes
  • 032436a: fix: remove racine as a dependancy

12.1.0

Minor Changes

  • 76941e3: add growth specific colors to sprout theme for light and dark mode

12.0.0

Major Changes

  • 54639f5: Moved theme.util.interact() to a hook called useInteractiveColor()

    • theme.util.interact() will no longer be available on the theme object and is moved to a hook called useInteractiveColor()
    • To import the hook, use import { useInteractiveColor } from '@sproutsocial/racine'
    • useInteractiveColor() accepts a theme color option and returns a lighten or darken version of that color depending on the theme mode currently in use('light' or 'dark')
    • useInteractiveColor() can only be utilized within a theme context.

    example:

    import { useInteractiveColor } from '@sproutsocial/racine'
    ....
    &:hover,
    &:active {
    color: ${({theme}) => useInteract(theme.colors.icon.base)};
    }

11.9.0

Minor Changes

  • 6c3e703: Extend the sprout theme to add colors for trend arrows

Patch Changes

  • 1c10a77: Fix args

11.8.0

Minor Changes

  • 1b66f38: Input.ClearButton no longer requires onClear prop
    • Input has been updated to be able to clear itself for both controlled and uncontrolled Inputs
    • The onChange function will be called upon clearing the input.
    • Due to this change, Inputs with type "search" will now automatically include a ClearButton, whereas previously a ClearButton would not be rendered unless an onClear prop was provided.

Patch Changes

  • 1b66f38: Adjust Input elemBefore and elemAfter positioning
    • These elements were previously positioned 12px from the side of the Input
    • They are now positioned 8px from the side of the Input, for better alignment with Input.ClearButton.
  • 1b66f38: Expose Input.ClearButton for uncontrolled Inputs
    • Previously, Input.ClearButton would not be usable for uncontrolled Inputs due to checking whether a value was in the input to clear only via the "value" prop.
    • Now, Input.ClearButton is usable for uncontrolled Inputs because it is checking for updates to the value in its handleChange function.

11.7.1

Patch Changes

  • d7b2b1f: - Plug icon
    • Alternate help icon

11.7.0

Minor Changes

  • 90438e2: Add _themed.scss for Sprout theme
    • This allows usage of Sprout theme-specific values in SCSS

11.6.2

Patch Changes

  • 560c463: Added a new extended theme for the compare to period for the date picker.

11.6.1

Patch Changes

  • eb27d01: Fix interact util in dark mode themes
    • The interact util was located at a different location in the light and dark mode base theme objects. It was at the base level of the light theme and nested inside of colors for the dark theme.
    • interact was seemingly available at the base level of the theme in both modes, because we spread the light theme as the basis of the dark theme. However, the interact util accessible at the base level of the theme would behave like light mode in either mode.
    • The interact util located inside the colors object inside the dark mode theme object was not usable, due to only being defined in that location for dark mode, and has been removed.
  • eb27d01: Remove 'just-clone' dependency
  • eb27d01: Fix "navigation" colors in SproutTheme
    • The "navigation" colors were not available in the theme due to being spread in incorrectly.
  • eb27d01: Improve theme types to be more accurate

11.6.0

Minor Changes

  • 43adc28: Added a sprout theme to racine

11.5.0

Minor Changes

  • fa8a45d: Dependency upgrades: upgraded severe vulnerabilities as well as storybook and jest suite fixes. Upgraded styled components from beta to stable v5.2.3.

11.4.1

Patch Changes

  • 89c935f: Handle focus management in Input handleClear more consistently
    • Previously, focus would be returned to the input when Input.ClearButton was triggered only if the innerRef prop was undefined or an object, not if it was a function.
    • Now, focus is always returned to the input when the clear button is clicked, regardless of the type of the innerRef prop.

11.4.0

Minor Changes

  • d888fa0: Add search icon to type "search" Input
    • "" is added to Inputs with type "search" unless an elemBefore prop is passed to override it.
  • d888fa0: Add Input.ClearButton
    • This button is automatically included when Input has type "search" and no "elemAfter" prop is passed
    • This button can be manually included with the "elemAfter" prop for non-search inputs
    • In either case, the button will only be rendered if an "onClear" callback is passed to the Input component
    • A "clearButtonLabel" prop should also be passed to the Input component

11.3.0

Minor Changes

  • e8a9df6: Add text highlight style to theme

Patch Changes

  • 9e66592: Pass TokenInput autocomplete prop to input as autoComplete to suppress JSX console warnings

11.2.5

Patch Changes

  • a73cdfb: remove weird characters from props descriptions

11.2.4

Patch Changes

  • 206bd32: copy updates to the TypeProps comments that power Seeds prop tables

11.2.3

Patch Changes

  • 514d738: Patch badge component flow issue

11.2.2

Patch Changes

  • 9cc377e: Created extended theme directory

11.2.1

Patch Changes

  • 6968733: adds deprecation messaging to typeProps to be displayed on seeds page

11.2.0

Minor Changes

  • a71a431: backwards compatible style and api changes to the badge component

11.1.2

Patch Changes

  • 81f95bc: Add flow support for newer colors in theme

11.1.1

Patch Changes

  • 17cfdda: New Icon: power-up-outline

11.1.0

Minor Changes

  • 03d1f1a: Export system props

11.0.2

Patch Changes

  • f3b0741: Add icon.applied to theme file
  • 521ee2b: Ensure subcomponents have proper displayName attributes

11.0.1

Patch Changes

  • 82a6a89: Adjusted styling of selected state to be less confusing for users based on org wide feedback

11.0.0

Major Changes

  • 3f25fab: Remove themed mixin in favor of functions only

    • Changes in 10.0.0 made the mixin unnecessary
    • The functions that were created for use with the mixin can now be used standalone for the same purpose.
    • Migration requires removal of all @include themed mixin calls. The code inside can stay the same. For example:
    @include themed {
    color: colors("text.body");
    }

    becomes

    color: colors("text.body");

Patch Changes

  • f28456b: Add overlay theme object
  • a3ed9eb: Patches Menu Group margin issue

10.0.0

Major Changes

  • 98f063a: Make theme names consistent by removing references to "default-light" and "default-dark"
    • We no longer refer to the "light" theme as "default-light" in the theme object.
    • We no longer refer to the "dark" theme as "default-dark" in the theme object.
  • 98f063a: Change "themed" SCSS mixin setup
    • A parent theme classname of 'theme--light' or 'theme--dark' is no longer required to use the mixin.
    • A separate mixin is offered per theme, instead of a single mixin for all themes.
  • 98f063a: Rename "default" theme to "light"

9.0.3

Patch Changes

  • a9a06a6: Added aliases for sentiment colors

9.0.2

Patch Changes

  • 3215099: bug fix for mix blend mode

9.0.1

Patch Changes

  • 52052ae: Update MenuGroupContainer so that it takes system props instead of css styling
  • 2fc4f88: Adds a palette prop to Token and uses the proper accessible color tokens
  • 7a87944: Update @storybook/react to resolve a vulnerability in one of its sub-dependencies (immer)

9.0.0

Major Changes

  • a71802f: convert shadow tokens to semantic tokens

8.8.0

Minor Changes

  • 2746920: Add SCSS themed mixin and functions

Patch Changes

  • 69ddb8e: Replace instances of Icon colors with semantic names

8.7.1

Patch Changes

  • 1cf97da: Remove font weight rule from Breadcrumbs styles

8.7.0

Minor Changes

  • bcfb6eb: Export themes as scss variables

8.6.3

Patch Changes

  • 777fcd7: Unset inverted icon color when menu item is hovered and active

8.6.2

Patch Changes

  • 039da3f: Address visual bug on collapsible shadow

8.6.1

Patch Changes

  • c46c79d: Pressing space on a filter input in listbox triggers a submit, preventing users from entering text with spaces. This fix changes the behavior such that if the input is in focus, the space won't trigger a select.
  • b34b463: Invert the icon colors in menu items to mirror the text behavior.

8.6.0

Minor Changes

  • d1c8003: Adds data-viz color rotation to the theme file to support data-viz across dark mode and future themes.

8.5.2

Patch Changes

  • 41b0717: Adds openHeight and collapsedHeight props to Collapsible component for more flexible collapse usage

8.5.1

Patch Changes

  • 48628f0: Sync icons from Figma

8.5.0

Minor Changes

  • 343c636: adds tiktok network color to theme, adds tiktok icon, adds sentiment icons

8.4.0

Minor Changes

  • 311f9bb: Added placement prop to menuButton component

8.3.0

Minor Changes

  • 13699d6: Updating Link component to include flexbox shorthand props

8.2.0

Minor Changes

  • a3887f0: Avatar now has an option for predefined color combos in line with design's accessibility and color guidelines. Overrides are still enabled via styled-system.

8.1.4

Patch Changes

  • c920778: removing duplicate icon

8.1.3

Patch Changes

  • 90dbdfc: update autosizer import

8.1.2

Patch Changes

  • e5bb567: update bigcommerce icon name

8.1.1

Patch Changes

  • b470c46: Fix big commerce icon and naming convention

8.1.0

Minor Changes

  • cda796b: adds bigcommerce icon

8.0.0

Major Changes

  • 856797e: This update includes major changes to the theme file structure that enables theming with a thoroughly tested and more intuitive devEx
  • 856797e: This change includes the newest iteration of the theme file that updates a number of paths in the color object to create more logical semantic names.

7.7.0

Minor Changes

  • dfdb3b5: Added a forwardRef to Modal.Content.

7.6.1

Patch Changes

  • 9cd384f: Add new icons to the icon library

7.6.0

Minor Changes

  • b69f92a: fix(token) hover styling for invalid tokens

7.5.0

Minor Changes

  • 6700ead: This change allows consumers to specify whether or not a Link should be underlined. This work is part of our accessibility initiatives.

7.4.2

Patch Changes

  • da247d2: update whatsapp icon

7.4.1

Patch Changes

  • 17fcee6: Revert beta-release feature.

7.4.0

Minor Changes

  • e1cff9d: Add beta release capability to the Racine development process.

7.3.8

Patch Changes

  • 80f49f8: Remove npm deprecation from beta release action.

7.3.7

Patch Changes

  • df202ec: Use Node 15 for beta-release action.

7.3.6

Patch Changes

  • 3b01ae7: Fix NPM deprecation behavior.
  • f1eabea: Add registry specifier.

7.3.5

Patch Changes

  • a929081: Fix quoting of package version in deprecate command in beta release action.

7.3.4

Patch Changes

  • 2fa8f19: Fix beta deprecation command in beta-release action.

7.3.3

Patch Changes

  • 4fc0375: Fix use of $BETA_SEMVER env var.

7.3.2

Patch Changes

  • 9e41c57: Fix auth token access in beta release action.

7.3.1

Patch Changes

  • d5f607e: Add missing NPM token env var to beta-release action.

7.3.0

Minor Changes

  • 80a1ed7: Update seeds-networkcolor, add WhatsApp to theme.js

7.2.2

Patch Changes

  • 4db6157: Fix missing dash in beta-release action.

7.2.1

Patch Changes

  • 0175581: Update beta release Github action to publish to NPM.

7.2.0

Minor Changes

  • 4f1ea48: Add beta release Github action.
  • a2f7821: Added subcomponents that support common type styles recommended for product use

7.1.0

Minor Changes

  • 0113a82: Update table components to render explicit children

7.0.2

Patch Changes

  • 482968e: Pass inputProps to Checkbox

7.0.1

Patch Changes

  • 145b487: Align icons within Banner components to the first line of the message, instead of centered

7.0.0

Major Changes

  • 052802b: This work includes adding semantic color tokens to our Racine theme and updating the Racine components to use the new tokens. Breaking changes include modifications to the the theme properties. Breaking changes include error → error.color, warning → warning.color, cta.primary → cta.primary.color, cta.secondary → cta.secondary.color, and cta.link → cta.link.color

6.25.2

Patch Changes

  • 0a8ab22: fixes yelp addition in Theme.js
  • 0a8ab22: Adds Yelp to theme.js file

6.25.1

Patch Changes

  • b0b1c60: delay triggering open of modal to run async and prevent render weirdness
  • e97c613: Adds Yelp to theme.js file

6.25.0

Minor Changes

  • 38b94ac: Bump up seeds packet for Yelp token addition

6.24.0

Minor Changes

  • e5d8bcb: adds yelp star rating icon to seeds

6.23.0

Minor Changes

  • 49cb663: Add stories icon

6.22.3

Patch Changes

  • 4ec7f47: Removes the ARIA role of "button" from the Popout component

6.22.2

Patch Changes

  • 7a5e031: Make the new dependencies added for the date pickers be peer vs direct dependencies.

6.22.1

Patch Changes

  • 19d9d3f: revert Remove a11y labels changes

6.22.0

Minor Changes

  • 6aa35b4: add filled-in cart-plus icon and rename previous cart icon to cart-plus-outline

6.21.0

Minor Changes

  • cb6244e: make font-weight on Link configurable
  • cc30795: Fix issue with Popout event propagation

Patch Changes

  • ea40b82: remove a11y labels and fixed tests

6.20.0

Minor Changes

  • f0d70f5: add marketo icon

Patch Changes

  • cd3d6da: update modal css to use flex for centering

6.19.0

Minor Changes

  • 9726c45: Add export for dark theme

6.18.3

Patch Changes

  • 3e505cf: Changes the hyphen for the null case in Numeral.js to an em dash

6.18.2

Patch Changes

  • b2015e3: # Changes

    • Fix wording of abbreviation prop comment.

6.18.1

Patch Changes

  • 4aea53e: # Changes

    • Update the comment for the abbreviate prop.
    • Move TypeProps back into index.js in order for Seeds prop table to be able to find them automatically.

6.18.0

Minor Changes

  • 90eaa51: use "standard" when compact fails in Intl.NumberFormat

6.17.0

Minor Changes

  • 1c45fd1: Added additional color for "Suggestion" badge

6.16.0

Minor Changes

  • df8fd68: Added appearance to Input, with "secondary" being a borderless input.
  • fcffab0: Added ariaLabel to the Button component.

6.15.2

Patch Changes

  • 1807bb7: Add Shopify network color from seeds packet

6.15.1

Patch Changes

  • 1bca469: Update Racine GitHub release process to use Node v14

6.15.0

Minor Changes

  • 9818e70: ## Improvements

    Behavior Fixes

    • Ensures abbreviated numbers always include 2 decimal places of precision, by default.
    • Ensures decimal numerals show up to 2 decimal places of precision, by default.
    • Ensures percent numerals show up to 1 decimal places of precision, by default.
    • Ensures currency numerals always display 2 decimal places of precision - in both the display and tooltip text, by default.
    • Makes abbreviated numerals show their specified level of precision in both the display text and tooltip text.

    New Features

    • Properly handles abbreviations in non-US locales, such as Spain, France, Brazil, and Germany.
    • It also handles abbreviations in non-arabic numerals such as Eastern Arabic.
    • Enables specifying a numeral as currency by simply including the currency prop without the format prop.
    • Enables specifying an abbreviation threshold (different from the default value of 10000) via the abbreviate prop.

    Implementation Improvements

    • Simplifies the formatting of numbers eliminating the numeral package, by relying solely upon the built-in Intl.NumberFormat.
    • Refactors away long if-else-if sequences.
    • Refactors away magic numbers.

    Implementation Fixes

    • Fixes the use of the lru-memoize package to ensure its results are properly cached.

    Other Improvements

    • Improves the knobs in Numeral's storybook to include more options, including an unset option for the optional props.

6.14.1

Patch Changes

  • 89dc334: Update Jenkins to use Node v14

6.14.0

Minor Changes

  • 686fa35: # Improvements

    • Updates the required version of Node to v14.15.5

6.13.0

Minor Changes

  • 73e81d1: Updates FormField to accept a labelHidden prop

6.12.0

Minor Changes

  • e8a64f1: fix(tokeninput) add aria-describedby

Patch Changes

  • 6be9173: Add gear icon

6.11.2

Patch Changes

  • 18ff3c9: Security updates
  • 806b867: Fixes Arrays in Tooltips

6.11.1

Patch Changes

  • 51604f1: Pass readOnly prop to textarea

6.11.0

Minor Changes

  • 5c6591d: Smart aria-labels for listbox component

6.10.2

Patch Changes

  • ba44d23: Adds Canva Icon

6.10.1

Patch Changes

  • 5881622: Remove Collapsible animation when initially expanded

6.10.0

Minor Changes

  • 89f4ef8: Publishes individual SVGs in NPM package

6.9.1

Patch Changes

  • e673a62: [SEC-8155] Deploy CodeQL

6.9.0

Minor Changes

  • e7f7eac: Added support for individual token icons in TokenInput

Patch Changes

  • e7f7eac: Export TypeToastOptions

6.8.0

Minor Changes

  • a314af7: Add whiteSpace system prop

Patch Changes

  • 027eb60: Pass flex-align property into MenuItem

6.7.4

Patch Changes

  • a2100de: Added ariaDescribedby to FormField type props
  • 26ea7b6: MenuCheckbox now supports indeterminate state

6.7.3

Patch Changes

  • 4cf1346: Fixes for performance issues in Menu and OverflowList

6.7.2

Patch Changes

  • d1b6ef7: Added aria-describedby association to FormField and other form components
  • 2618ece: Use aria-pressed in Switch for more accessible component

6.7.1

Patch Changes

  • e918f98: Don't override menu item with an aria-label

6.7.0

Minor Changes

  • 0136d44: Update TokenInput event props logic

6.6.0

Minor Changes

  • 294759c: Add a truncated prop to the Tooltip component
  • 99e34cc: Add border radius token 400

6.5.0

Minor Changes

  • 3ebb3dc: Add the ability to change the MenuGroup title's element

6.4.1

Patch Changes

  • b131840: Export TypeToastOptions

6.4.0

Minor Changes

  • 46e67fa: Export the MenuButtonContext so consumers can selectively close menus

6.3.2

Patch Changes

  • 3c58977: Remove unneccessary role from Collapsible component

6.3.1

Patch Changes

  • a5a9d29: Explicitly declared some table styles in DatePicker to prevent css stylesheet overrides on Seeds

6.3.0

Minor Changes

  • 951dfae: Add autocomplete as a prop to tokeninput so consumers can disable when using a menu

6.2.1

Patch Changes

  • e78d2c9: # Fix remaining node-fetch vulnerability

    Use resolutions to force react-popper to use a more current version of its dependency, create-react-context, since we are unready to upgrade react-popper.

    yarn audit v1.21.1
    ┌───────────────┬──────────────────────────────────────────────────────────────┐
    │ low │ Denial of Service │
    ├───────────────┼──────────────────────────────────────────────────────────────┤
    │ Package │ node-fetch │
    ├───────────────┼──────────────────────────────────────────────────────────────┤
    │ Patched in │ >=2.6.1 <3.0.0-beta.1|| >= 3.0.0-beta.9 │
    ├───────────────┼──────────────────────────────────────────────────────────────┤
    │ Dependency of │ react-popper │
    ├───────────────┼──────────────────────────────────────────────────────────────┤
    │ Path │ react-popper> create-react-context > fbjs > │ │ │ isomorphic-fetch >
    node-fetch │
    ├───────────────┼──────────────────────────────────────────────────────────────┤
    │ More info │ https://www.npmjs.com/advisories/1556 │
    └───────────────┴──────────────────────────────────────────────────────────────┘

6.2.0

Minor Changes

  • 402e384: make Popout.Content system props overridable
  • 402e384: add SingleDatePicker and DateRangePicker
  • 402e384: add moment, moment flow types

Patch Changes

  • 402e384: remove duplicate build process in watch

6.1.4

Patch Changes

  • d10ba31: Removes double box-shadow focus state on tokenInput

6.1.3

Patch Changes

  • c31b1d0: Update packages to handle highest priority security vulnerabilities

6.1.2

Patch Changes

  • 6274b87: Adjust the weight of external-link-alt to match other icons

6.1.1

Patch Changes

  • 0350000: Fix menu test broken when upgrading React Test Library

6.1.0

Minor Changes

  • 112712b: Modify the target element a user needs to click in order to close an opened Drawer"

6.0.0

Major Changes

  • 2e75622: # BREAKING CHANGES to the TokenInput component interface

    Changes

    Added props

    • onChangeTokens?: (tokens: TypeTokenSpec[]) => void
    • onAddToken?: (tokenSpec: TypeTokenSpec) => void
    • onRemoveToken?: (tokenId: string) => void
    • onClickToken?: (e: SyntheticEvent<HTMLButtonElement>, tokenId: string) => void
    • delimiters?: string[]

    Removed props

    • onTokenClick?: (e: SyntheticEvent<HTMLButtonElement>, token: TypeTokenInputToken) => void

    Added types

    • type TypeTokenSpec = { id: string, text: string, valid?: boolean, }

    Removed types

    • type TypeTokenInputToken = { ...React.ElementConfig<typeof Token>, id: string, children: string, }

    Discussion

    The semantics of TokenInput have been changed to pass in data - ids and token specs - instead of elements as parameters to the token handler props.

    Specifically, the onTokenClick prop has been replaced with the onClickToken to:

    1. simply pass the id of the clicked token as opposed to an entire element;
    2. be consistent with the naming of the other token-oriented props.

    The TokenInput enables either simple or fine-grained control. In most cases, you can simply use the onChangeTokens prop. For more control over the creation and deletion of tokens, use the onAddToken and onRemoveToken props, instead.

    Also, you can now specify the delimiters used to separate the inputted text into new tokens.

Patch Changes

  • ff66ead: Update network colors to include new pinterest and linkedin values

5.29.3

Patch Changes

  • 56c299c: Put min-width on the correct wrapper

5.29.2

Patch Changes

  • 91e0a01: Add min-width:0 to MenuItem

5.29.1

Patch Changes

  • a0f4217: Reverting the upgrade to react-popper

5.29.0

Minor Changes

  • 9df6933: Bumped react-popper to 2.2.4. This is a major version bump which migrates to Popper V2. Now, @popperjs/core must be installed as a peer dependency. Additionally, there were two places in the Racine Popout component that needed to be updated. The scheduleUpdate method has been renamed to update and returns a promise, and the outOfBoundaries prop has been replaced with isReferenceHidden and hasPopperEscaped. See here for the full release notes.

5.28.0

Minor Changes

  • e3e595e: Add opportunity type to banner component

5.27.1

Patch Changes

  • a314a7b: correctly pass readOnly prop to input

5.27.0

Minor Changes

  • 5ff0e02: Add onClear callback to useMultiSelect hook

5.26.2

Patch Changes

  • f9ea96f: Attempt to fix OverflowList in webapp jest env

5.26.1

Patch Changes

  • 8f9c842: Moves the element where a user can close the Drawer by clicking outside of it down to the first child element (the main app) from the body element. The fixes an issue where a user using the dropdown filters clicks inside it will cause the Drawer to accidentally close.

5.26.0

Minor Changes

  • 1d49713: Creates fall back for color prop on Icon component used in Toast Component

5.25.0

Minor Changes

  • 108b148: Updates Toast component to use more Icon options

5.24.2

Patch Changes

  • 0f1c7e6: Bump seeds-networkcolor version

5.24.1

Patch Changes

  • 9e0268e: fix swapped network colors

5.24.0

Minor Changes

  • 1effa28: Add network colors for Salesforce, Zendesk, and Hubspot

5.23.3

Patch Changes

  • 3a7df5e: Add book icon

5.23.2

Patch Changes

  • c000ba1: MenuItem - allow data-qa-menu-item prop to be overriden
  • ca38ab7: Various TokenInput type fixes

5.23.1

Patch Changes

  • 55c3bf8: Globally export TokenInput component

5.23.0

Minor Changes

  • 3e92a83: Add new TokenInput component

5.22.4

Patch Changes

  • 9196d49: Add closed caption icon

5.22.3

Patch Changes

  • 26b8664: Specify react-virtualized 9.18.5 to match webapp

5.22.2

Patch Changes

  • 42755dd: update Input isValid prop to force boolean values in rendered elements

5.22.1

Patch Changes

  • e5f8435: Fix spacing of form field title when using helper text

5.22.0

Minor Changes

  • 6d29a11: make Fieldset more composable with child components

Patch Changes

  • 6d29a11: add jest flow typings

5.21.0

Minor Changes

  • 95b488d: Add OverflowList component

5.20.0

Minor Changes

  • ab4fb13: Add Google Business Messages network color to theme

5.19.2

Patch Changes

  • 1e1684d: Change children and content prop types of Tooltip to React.Node
  • 73b1380: Add Layout System Props group to Text component

5.19.1

Patch Changes

  • b232234: Only add aria-describedby on tooltips that are open

5.19.0

Minor Changes

  • ec1dde4: Remove unused icons: gplus, gplus-alt, pinterest-square, reddit-square, rss-square, twitter2, youtube-square

Patch Changes

  • 5010b66: Add google-business-messages icon

5.18.3

Patch Changes

  • 2b30923: Add disabled prop for Menu.Group and Listbox.Group
  • 2b30923: Design tweaks for Menu and Listbox

5.18.2

Patch Changes

  • 31c5234: Update overflow props on breadcrumb component to be optional

5.18.1

Patch Changes

  • c39760f: Adds disabled styles for disabled Listbox items
  • c39760f: Align ListboxButton popouts to bottom-start by default
  • cdfedad: Fix flow issue with “size” prop on ListboxButton

5.18.0

Minor Changes

  • d6d3593: Add overflow menu capability to Breadcrumb

5.17.6

Patch Changes

  • b3d2014: Make Token a non-submit button

5.17.5

Patch Changes

  • 2ae8896: Set tabIndex on Checkbox input instead of container
  • 7809bce: Add archive icon

5.17.4

Patch Changes

  • 9a5f35e: Fix size of x icon in Toast
  • db90795: EmptyState: Hide wrapping box when media is not provided

5.17.3

Patch Changes

  • a0ec170: Makes EmptyState's media prop optional
  • 8ef9296: Flow fix for Menu

5.17.2

Patch Changes

  • 14c59ac: Minor bug fixes for Menu and Listbox

5.17.1

Patch Changes

  • 35a189c: Change version of scroll-into-view-if-needed to match web app

5.17.0

Minor Changes

  • ca65014: Add Menu and Listbox components

5.16.0

Minor Changes

  • ac3924c: Allow styling to FormField component and clean up of qa fields

5.15.9

Patch Changes

  • 1b7230b: Add Facebook Groups icon

5.15.8

Patch Changes

  • 7043ff1: raw-loader is used in Toast so it needs to be a dependency
  • d7016f9: Changing the default precision for the Numeral component when dealing with currencies
  • bfe073a: Making the content prop on the Popout and Tooltip components optional
  • c8f17c1: Add Glassdoor color
  • e6c98a1: Disable interactivity for "pill" tooltips

5.15.7

Patch Changes

  • 8f23014: Add Glassdoor icon

5.15.6

Patch Changes

  • 8b33446: Adjusted animation on skeleton component now communicates forward progress
  • 8ac502a: Toast updated to use semantic Seeds values

5.15.5

Patch Changes

  • 2a29537: Fixed a small bug on checkbox where the pill variation did not have a transition on hover.
  • 240ea47: Update Slack icon to match their new logo

5.15.4