CHANGELOG.md

Changelog

---

This project adheres to Semantic Versioning. All Major and Minor changes to this project will be documented in this file.

What is considered a "breaking change"?

Any code change in this software that requires consumers to update their usage is considered a breaking change (e.g. prop name changes, deletions, interface/argument changes, etc).

---

[Major.Minor] (example)

This is an example of a brief overview of the Major or Minor version changes.

• this is an example of a change note
• this is an example of a change note
• this is an example of a change note

BREAKING CHANGES

• this is an example of a change note

Deprecations

• this is an example of a deprecation note

---

[11.12] Icons update

• Adds VerifiedCheck icon shape
• Adds UploadOutlined icon shape
• Adds UploadFilled icon shape
• Adds DownloadOutlined icon shape
• Adds DownloadFilled icon shape

[11.11] Dialog update

• Adds the 'subTitle' prop to the Dialog component

[11.10] Icons update

• Adds Strategy icon shape

[11.9] Icons update

• Modfies Target icon shape
• Adds Goal icon shape
• Adds Advise icon shape

[11.8] Icons update

• Adds Target icon shape
• Adds Store icon shape

[11.7] Icons update

• Adds Factory icon shape
• Adds Feeds icon shape
• Adds Devices icon shape
• Adds Heart icon shape
• Adds LightBulb icon shape
• Adds PiggyBank icon shape
• Adds ShoppingCart icon shape
• Adds Umbrella icon shape
• Adds Car icon shape
• Adds Battery icon shape
• Adds Bankicon shape

[11.6] Responsive classes

• Added responsive variants for the following classes: align, display, padding, margin, alignChild. All responsive variants have 4 variants: s, m, l, xl, and can be used like so: .xl:align--left

[11.5] Responsive Flex

• Added switchDirection prop to Flex that allows flex direction to change based on viewport size.

[11.4] violet bgColor class added

• Added bgColor--violet

[11.3] Icons update

• Added GraduateCap shape to icons

[11.2] Button theme addition

• Added theme prop: outlined--blue to FDS Button

[11.1] Button theme addition

• Added theme prop: orange to FDS Button

[11.0] MAJOR

BREAKING CHANGES

Popover component

• Popover API reverted to v9 API to fix issues caused by the introduction of Tippy in v10

[10.1] Added font-family classes

• Added fontFamily--condensed, fontFamily--default, and fontFamily-mono FDS classes

[10.0] MAJOR

Changes / Additions

• Fade classes added, which work via pseudo elements and support using multiple at a time
• FDS Popover now has 2 themes: default and unthemed
• FDS Dialog now has a disablePortal prop
• FDS Prompt now has a disablePortal prop
• CornerPosition component added to help decorate nodes
• Badge (previously indicator) has a showDot prop to specify whether you want a dot to show if there is no label

BREAKING CHANGES

Toaster component

• toastProps changed to toastInstance (to better explain what it encompasses)
• onDismiss prop removed. Now should reside in toastInstance object
• dismissDelay prop removed. Delay can no longer be customized. isAutoDismiss should be disabled if there is a lot of content to read / parse in the toast.

TextInput component

• onThrottledChange has been removed

Popover component

• Prop interface has completely changed. Refer to documentation for full information on new prop names and usage.
• Default look of Popover now has included styling (dropshadow, border-radidus, etc)

Tooltip component

• trigger MUST be able to receive focus now

Component reorganization

• bgFade classes are removed

Badge & Indicator components

• Badge component is now the Indicator
• Indicator component is now the Badge

Double and Half spacing removed

• classes, css variables, and js variables all updated
• upgrade guide:
  • half (8px) maps to s (8px)
  • double (32px) maps to xl (32px)
• Examples:
  • CSS Variable: { margin: var(--space-half) } becomes { margin: var(--space-s) }
  • JS Variable: FDS.SPACE_DOUBLE becomes FDS.SPACE_XL
  • classes: .margin--top--half .becomes margin--top--s

Removed components

• HScroll (use fade classes + useScrollAttributes hook)
• GapList (use FDS classes instead for spacing, border)
• Updatable (use CornerPosition component + Badge instead)

[9.21] MenuLink

• Added FDS MenuLink component. Use alongside FDS MenuItem inside of FDS Menu.

[9.20] 🎁 Unwrapped Icons

• Icon components are no longer wrapped with the withFdsIconWrapper HOC. The props signature and import statements remain unchanged. Your editor may now have improved autocomplete features for FDS icon components.

[9.19] Added useScrollAttributes hook

• Added useScrollAttributes hook to return 2 booleans for if scroll is at the left or right, respectively

[9.18] Breakout Links

• Added breakoutLink class (to extend clickable area to nearest relative parent)
• Added isBreakoutLink props to Button and IconButton components to apply the breakoutLink class

[9.17] Added ZeroState component

• Added ZeroState component, useful for displaying when a lack of the primary UI isn't available (due to lack of results, columns, etc)

[9.16] 👍

• Added Thumbsup icon shape

[9.15] Updatable dot

• Added the showDot prop to Updatable to support showing an Indicator dot when the message is empty.

[9.14] Tooltip text alignment

• Added testAlign prop for Tooltip component

[9.13] Standalone Updatable bubble

• Added Indicator component that supports optional labels and two variants (count, update)
• Refactored Updatable component to use Status internally

[9.12] Icons Update

• Adds Handshake icon shape
• Adds Briefcase icon shape
• Adds LinkedinFilled icon shape
• Adds TwitterFilled icon shape

[9.11] Icons Update

• Adds Help icon shape
• Adds Error icon shape
• Adds Warning icon shape

[9.10] Toast performance

• Refactored top bar of Toast to use SVG with a stroke-dashoffset animation

[9.9] Icons update

• Added "Paint" icon shape

[9.8] Icons update

• Added "History" icon shape
• Added "Selection" icon shape

[9.7] UI copy guidelines

• Added "UI Copy Guidelines" to storybook

[9.6] Chip enhancements

• Added Icon prop

[9.5] zindex--navigation classname addition

• Added zindex--navigation utility classname

[9.3] DateInput popover behavior

• DateInput now opens the calendar popover on input focus
• The calendar popover in DateInput will now close itself on date selection

[9.2] Avatar enhancements

• Added l size to Avatar
• Added PlaceholderIcon prop

[9.1] TextInput enhancements

• Added labelWidth prop to control width of label (helpful when used in combination with labelPosition)

[9.0] MAJOR

Changes / Additions

• Components can be imported via a destructure pattern. import { Button, IconButton } from '@cbinsights/fds/lib/components'
• FDS Icons (only React) can be imported via a destructure pattern. import { AddIcon, CaretDownIcon } from '@cbinsights/fds/lib/icons/react'
• TextInput:
  • hasError prop added to enable the input error state without passing errorText
  • isLabelBold prop added to allow label to be bolded
• Added x and y directions to spacing classes (e.g. margin--y)
• Added new end value for spacing classes: xs, s, m (default), l, and xl, which correspond to pixel values
• Added GapList component
• Added zindex--modal class

BREAKING CHANGES

Component reorganization

• The following folders no longer exist: media, interactive, layout forms, modals, popovers
• All components now live in lib/components. This is going to break tons of import paths!

MenuButton Component

• Now only accepts a button element, or a component that renders a button element as a trigger
• isInModal is no longer accepted

Popover Component

• The popover no longer closes on user dismissal actions in controlled mode. The onUserDismiss callback must now be used to update the state of isOpen when the popover is in controlled mode.

Dialog Component

• width and height now do not accept numbers. You must pass the unit type (px, vh, etc).

Flex Component

• wrap prop is no longer accepted on Flex

raw/ Icons distribution

• lib/icons/raw/ will no longer exist in packages published v9 or later. For raw SVG icons, use lib/icons/svg/.

Renamed InlineBlockList component

• `InlineBlockList is now SeparatorList. This component is primarily used for configuring separator characters between items in an inline-block list. If you'd like to just space out items, please use GapList, a new component also added in v9.

Removed components

• CountdownButton (only used by Toast)
• DecoratedInput (use TextInput instead)
• IconInput (use TextInput instead)
• Section (use fds classes instead)

z-index

• popover and shim redundant values were removed (use modal value instead and rely on source order)

Deprecations

• half and double end values are now deprecated and will be removed in a feature release. Please use the new end values added for these classes that were added in this minor release.

[8.10] DateInput refs

Added ref props for the input and popover content elements:

• inputRef
• popoverRef

[8.9] DateInput callbacks

• added onInputChange callback to DateInput

[8.8] Popover ref forwarding

• Popover now accepts a ref prop that will be forwarded to the content container DOM element

[8.7] Popover configuration in DateInput

• Adds popoverProps to DateInput for user configuration of the popover that contains the date picker

[8.6] DateInput enhancements

• Adds minDate and maxDate props to Dateinput for specifying a selectable date range in the calendar UI
• Adds icon to the input element in DateInput
• Adds optional label prop for DateInput

[8.5] PNG Icons

• Adds lib/icons/png PNG distribution for icons

Deprecations

• lib/icons/raw is now deprecated. It will be removed in a future major release. please use lib/icons/svg when importing raw SVG files.

[8.4] Add delay to Tooltip

• Adds support for delay prop in base Popover component
• Adds a 1000ms hover delay to Tooltip

[8.3] DateInput date formatting

• Adds dateFormat prop to DateInput to allow different date order (MDY, DMY, YMD)

[8.2] DateInput rest props and IconButton role

• Adds rest prop spread onto the Date Input to allow input specific props
• Remove the role="image" declaration on IconButton

[8.1] History icon

• Added HistoryIcon

[8.0] MAJOR

Changes / Additions

• Toast now accepts a dismissOnAction boolean that controls whether the Toast is dismissed when the user clicks on the actionLabel

BREAKING CHANGES

Toaster Component

• Toaster was refactored, and no longer uses most of it's previous props (onDismiss, content, and type). It still uses isAutoDismiss.
• Toaster now renders its own Toast component, configured via toastProps
• Toaster now needs an id to trigger a re-animation of the Toast
• Toaster accepts an isOpen prop to show whether the Toast is visible or not
• Toaster now also accepts a dismissDelay prop directly.

StackedButton

No longer has a min-height

Radio Component

inputRef prop removed. Radio now uses forwardRef for the input element and accepts a ref prop.

z-index

popover, shim, and modal z-index are now all 20

Button Component

iconPlacement and Icon removed, in favor of IconLeft and IconRight

[7.20] Default background color

• Set default background-color property for html and body to white.

[7.19] Updated IconButton

• IconButton now has an outlined theme

[7.18] Updated Button

• Button now has an isActive state
• Dropdown now has an isActive state
• StackedButton now has an isToggled state
• Added inverted outlined theme to Button
• Button colors / look and feel were completely overhauled (no breaking changes)
• Added bgColor--blue

[7.17] Add TextInput

• Added TextInput form component for inputs

[7.16] Updated Popover

• Added disableScrollRef to disable an elements scrolling while the popover is visible
• Added closeOnScrollRef to close the popover when the user starts scrolling the given element

[7.15] Disabled Menu

• Added isDisabled prop to Menu

[7.14] Configurable InputGroup

• All InputGroup components will now fill their parent container using 100% width
• Updated internal logic of InputGroup for setting shrink/grow defaults
• Added flexSettings prop to InputGroup to allow for customization of shrink/grow for each input item

[7.13] Attachment Icon

• Added AttachmentIcon to icons

[7.12] DateInput

• Added DateInput component.

[7.11] Disabled MenuItem

• Adds support for isDisabled prop in MenuItem
• Changes default z-index for Menu to zindex-popover
• Adds isInModal prop to Menu for bumping up z-index

[7.10] Updated DropdownButton

• DropdownButton now accepts an isFullWidth
• It's background color is now white by default.

[7.9] Updated Dialog

• Dialog now takes a height prop (that's applied as `max-height internally)
• Dialog now has the option to always render the footer border via alwaysShowBorder

[7.8] Menu + Dialog fixes

• Added disableFocusTrap prop to Dialog
• Adjusted z-index value of the popover in Menu

[7.7] Menu component

• Added Menu component for building accessible dropdown menus

[7.6] Import Icon

• Added ImportIcon

[7.5] Popover positioning

• 🐛 Fixed bug where Popover boundary was the nearest parent with overflow set. Popover will now use the entire visible viewport area the reference to avoid content overflow.

[7.4] Updated Buttons

• outlined Button now has updated presentation (white background, different pseudo state colors)
• Button, StackedButton and IconButton all have updated text color (--button-secondary-color updated to --button-primary-color)

[7.3] react-hook-form fixes

Makes Checkbox and Radio compatible with react-hook-form.

• Removed Checkbox and Radio internal state; these components are now fully uncontrolled
• Checkbox and Radio now both accept an inputRef prop that places a ref on the input element they render

[7.2] DropdownButton

• Added DropdownButton component

[7.1] Button updates (inverted)

• Added .inverted support for ghost and outlined theme FDS buttons

[7.0] MAJOR

Changes / Additions

• Added Radio component

BREAKING CHANGES

AvatarRow Component

Component removed (was not publicly documented).

MuiAvatarShim Component

Component removed (was not publicly documented).

Checkbox Component

• onChange callback now receives the entire event object
• name is no longer a required prop
• label is now required - to hide the label, set showLabel to false

transition-default class renamed

transition-default is now transition--default

[6.14] Updated Prompt

• Prompt can now be dismissed (displays a x icon, and can press esc to dismiss it)

[6.13] Updated Avatar

• Avatar now accepts a radius prop, to render as a circle or a square. Renders as a circle by default

[6.12] Checkbox

• Added Checkbox component

[6.11] Updated Avatar

• Avatar will now render as a button underneath the hood if passed a href, onClick, or Link

[6.10] color--gray

• Added color--gray helper class

[6.9] Updated Chip

• Added border--focus to Chip close button

[6.8] IconInput fixes

• input elements inside of IconInput are now set to 100% width. Use a parent container IconInput to constrict width as needed.

[6.7] Refactor Toaster transition

• Moves Toaster transition into a generic set of CSS classes to use with react-transition-group

[6.6] New dictionary properties

• Added --border-color-input and --border-color-focusRing properties
• Use standard focus ring color in border--focus class

[6.5] border focus and transition

• Added border--focus and `border--focus--noTransition' helper classes for standard focus styles
• Added transition-default helper class for default transition

[6.4] Avatar

• Adds Avatar component for displaying avatar initials and images
• Added bgColor--red and bgColor--purple helper classes

[6.3] InputGroup

• Fixes alignment of side labels in DecoratedInput
• Adds InputGroup component for visually grouping multiple form fields

[6.2] IconInput

• Adds IconInput component for input elements with icons inside them

[6.1] Dialog width

• Adds width prop to Dialog for custom widths

[6.0] MAJOR

• Adds DecoratedInput component
• right-aligns number-like inputs (time, date, number, etc.)

BREAKING CHANGES

MuiButtonShim Component

Component removed (was not publicly documented).

CountdownButton Component

This component no longer accepts text as an icon. You must pass it a component. It will render a DenyIcon by default.

Form inputs

This release may introduce minor visual regressions on inputs in consumer applications.

• Added default styles to all form elements, including box-shadow focus ring
• resetInput helper class now removes box-shadow

z-index changes in dictionary

Removed some z-index values:

• main
• banner
• floatingAction

Changed some existing z-index values (see migration tables below).

Updated JS vars

fds-dictionary z-index migration:

Old JS var	New JS var
ZINDEX_MAIN	ZINDEX_NAVIGATION OR remove z-index
ZINDEX_BANNER	ZINDEX_NAVIGATION
ZINDEX_FLOATING_ACTION	ZINDEX_NAVIGATION

Updated CSS vars

fds-dictionary z-index migration:

Old CSS var	New CSS color var
--zindex-main	--zindex-navigation OR remove the property
--zindex-banner	--zindex-navigation
--zindex-floatingAction	--zindex-navigation

[5.10] Update IconButton

• Added ability to pass href or Link prop to IconButton component

[5.9] FloatingAction

• Adds shape--circle helper class
• Adds FloatingAction component for floating action buttons

[5.8] Popover callbacks

Adds onClose and onOpen callbacks to Popover

[5.7] Fade helpers

Adds bgFade--<direction>--<color> helper classes to base stylesheet.

[5.6] Updated IconButton

• Added small IconButton: size="s"
• Default IconButton size now becomes medium: size="m"

[5.5] Medium weight font

Adds full support to FDS for medium weight Roboto.

• Adds medium weight to dictionary font weights
• Adds fontWeight--medium helper class
• Replaces hard coded 500 weights in components to use new dictionary var

[5.4] Update hover Popovers

• In Popover, focus and blur events were replaced with keyUp and keyDown events. This allows hover-triggered popovers to show the popover content on keyboard navigation without side effects from focus events on the trigger itself.

[5.3] Updated Button

• Adjusted padding on small button

[5.2] Update Buttons / Icons

• Updated SortUp Icon
• Updated SortDown Icon
• Make all default interactive buttons be 32px computed height: Button, IconButton, and GroupButton
• Make small button 24px height
• Apply focus states for interactive buttons to ButtonGroup
• Bump up size of icons in Buttons

[5.1] Helper class specificity

• Change source order for some helper classes in base-styles

[5.0] MAJOR

Changes

• Added InlineBlockList layout component.

BREAKING CHANGES

mui-theme Removed

The material-ui theme object has been removed from FDS. Consumers are now responsible for declaring theme values for the material-ui framework.

raf-schd is now a peer dependency

Consumers must add version ^4 of the raf-schd package as a dependency.

Icons

The className prop in all icon components will be ignored. Use customSize or color to customize the size or color of the icon. Prefer the size prop, which takes tee shirt sizes and sets the icon to a standard media size.

-<CloudIcon className="customSizingClass customColorClass" />
+<CloudIcon color={FDS.COLOR_TIMBERWOLF} customSize={42} />

Chip Component

The Chip component no longer provides margin. Use the InlineBlockList layout component to create a list of chips.

-<Chip /><Chip /><Chip />
+<InlineBlockList items={[<Chip />, <Chip />, <Chip />]} />

The size prop value in Chip has been changed to align values with the FDS standard size values.

-<Chip size="md" />
+<Chip size="m" />

MenuButton component

MenuButton component was removed. Please use StackedButton instead.

-<MenuButton />
+<StackedButton />

Flex and FlexItem components

className is no longer supported. Move your custom classes to a parent or child.

-<FlexItem className="type--caption" />
+<FlexItem><div className="type--caption" /></FlexItem>

dataTest props are now ignored. Move your test data attributes to a parent or child.

-<Flex dataTest="lol" />
+<div data-test="lol"><Flex>...</Flex></div>

[4.35] Updated Button component

• Added hasCaret prop to visually toggle right aligned caret

[4.34] Popovers

• Added .bgColor--charcoal helper class
• Added base Popover component
• Added Tooltip component composed from Popover

[4.33] Updated buttons

• Updated IconButton, StackedButton, and Button to have lower opacity for disabled states

[4.32] Added IconButton and StackedButton components

• Added IconButton to components
• Added StackedButton to components

[4.31] Add background classes for gray and aqua.

• Added bgColor--gray and bgColor--aqua helper classes

[4.30] Updated Star Icons

• Updated StarEmpty Icon
• Updated StarFilled Icon

[4.29] Added UserFilled Icon

• Added UserFilled Icon

[4.28] Updated Button components

• Adjusted icon size to be as high as text size

[4.27] Fixed Button component

• Updated Button Icon alignment to be centered
• Added box-sizing: border-box to button
• added correct font-size (was using fontSize--m which isn't a thing)

[4.26] ol/ul decoration

• Added list--decorated class to add bullets/numbers to ordered or unordered lists.

[4.25] Updated Button components

• Added size prop to Button to component
• Added new small variant (s) to Button.
• Existing Button variant is now medium (m)

[4.24] Fix Dialog component

• Add transparency to close icon (fixes background for Safari)

[4.23] Added width helpers

• Added span--100 & span--50 classes to base styles.

[4.22] Added Dialog and Prompt components

• Added Dialog to components
• Added Prompt to components

[4.21] 🐛 Bugfix: IE11 Button and Hscroll

• Fixes IE11 issues with Button and Hscroll styling.

[4.20] Section component

• Added .border--<side> helper classes
• Added .bgColor--<color> helper classes
• Added --double variants for spacing helper classes
• Added Section component to react component library.

[4.19] Updated ViewColumns and ViewList Icons

• Updated ViewColumns and ViewList Icons

[4.18] Changed display helpers

• Added !important to all display class helpers

[4.17] Updated Button

• Button now has 500 font weight

[4.16] Added CheckIndeterminate Icon

• Added CheckIndeterminate Icon

[4.15] Updated Icons

• Added customSize prop to icons to enable arbitrary sizes (we do not want to encourage active use of this prop however)

[4.14] Updated / Added link colors

• Increased link contrast by making default links appear as blue (instead of aqua) Added linkInverted property to dictionary and set up inverted link context in base-styles

[4.13] Fixed Chip

• Corrected subtitle color for blue Chip (should be aqua)

[4.12] Added Wrapper prop to GroupButton

• Allows a Wrapper prop to be passed to GroupButton to support things like wrapping tooltips.

[4.11] Added View and Date Picker icons

• Added View and Date Picker to icons

[4.10] Grid prefixing

• Enabled prefixing for CSS Grid properties for IE11 support

[4.9] Added Button

• Added Button to components

[4.8] Added border helpers

• Added rounded--<direction> classes to base styles.

[4.7] Added font smoothing

• Added font-smoothing vendor declarations for webkit and firefox

[4.6] Updated Chip

• Replaced hasClose boolean with onClose click handler
• Close icon now has a separate click handler from the main click handler

[4.5] Hscroll component

• Added Hscroll component to layout utils

[4.4] Add color--slate class

• Add color--slate class back to styles

[4.3] Add double spacing helpers

• Add --double variants for margin helper classes
• Add --double variants for padding helper classes

[4.2] Support alpha mod in colors

• Add value/rgbComponents transform to dictionary
• Add css/rgbComponents format to dictionary
• Add new distribution to dictionary, lib/dictionary/css/rawRgbColors.css

[4.1] Removing some global button css

• Removed global button line-height
• Removed global button margin bottom

[4.0] MAJOR

• All modules in the Form Design System are now published as a single package, @cbinsights/fds.
• Brand new typography defaults with updated dictionary and CSS utilities.
• Removed some components
• Changed some prop interfaces
• Switched to Storybook for docs
• Added display classes

BREAKING CHANGES

Removed components

• Chips was removed from codebase

Prop interface changes

• ButtonGroup prop as was removed in favor of Link
• Chip prop as was removed in favor of Link

Removed deprecated fields

• Removed value and content deprecated fields on ButtonGroup

Import paths have changed

Because modules of the design system are no longer published as separate node packages, consumers must update their import statements.

In v4.0, all FDS code compiles to a root lib directory.

-import FDS from 'fds-dictionary/dist/js/styleConstants';
+import FDS from '@cbinsights/fds/lib/dictionary/styleConstants';

former npm module import	new import statement
fds-dictionary/dist	@cbinsights/fds/lib/dictionary/
fds-icons/lib/react	@cbinsights/fds/lib/icons/react
fds-components/lib/	@cbinsights/fds/lib/components/
fds-mui-theme/	@cbinsights/fds/lib/mui-theme/

New stylesheet for consumers

Instead of using the rollup stylesheet from fds-components, version 4.0 provides a special assets dir in ./lib that includes combined styles:

@cbinsights/fds/lib/assets/all-styles.min.css

New typography scale and classes

Typography has been completely rewritten for version 4.0 to reflect new design standards. Use the tables below as a migration guide:

Updated JS vars

fds-dictionary color migration:

Old JS color var	New JS color var
FONT_COLOR_DARK	FONT_COLOR_HEADING
FONT_COLOR_DEFAULT	FONT_COLOR_PRIMARY
FONT_COLOR_LIGHT	FONT_COLOR_SECONDARY
FONT_COLOR_DISABLED	FONT_COLOR_HINT

fds-dictionary size migration:

Old JS size var	New JS size var
FONT_SIZE_HEADING1	FONT_SIZE_4_XL
FONT_SIZE_HEADING2	FONT_SIZE_3_XL
FONT_SIZE_HEADING3	FONT_SIZE_2_XL
FONT_SIZE_BIG	FONT_SIZE_XL
FONT_SIZE_SMALL	FONT_SIZE_S
FONT_SIZE_TINY	FONT_SIZE_XS

Updated CSS vars

fds-dictionary color migration:

Old CSS color var	New CSS color var
--font-color-dark	--font-color-heading
--font-color-default	--font-color-primary
--font-color-light	--font-color-secondary
--font-color-disabled	--font-color-hint

fds-dictionary size migration:

Old CSS size var	New CSS size var
--font-size-heading1	--font-size-4xl
--font-size-heading2	--font-size-3xl
--font-size-heading3	--font-size-2xl
--font-size-big	--font-size-xl
--font-size-small	--font-size-s
--font-size-tiny	--font-size-xs

typeset classes changed

All typeset--<classOfTypography> classes have changed their signature.

• typeset--<classOfTypography> => type--<classOfTypography>
  • e.g. typeset--head3 becomes type--head3

typemod classes changed

All typemod--<modification> classes have changed to reflect the CSS property being modified by the class.

fds-styles size migration:

Old size CSS class	New size CSS class
typemod--huge	fontSize--4xl
typemod--xxlarge	fontSize--3xl
typemod--xlarge	fontSize--xl
typemod--large	fontSize--l
typemod--small	fontSize--s
typemod--tiny	fontSize--xs

fds-styles color migration:

Old color CSS class	New color CSS class
typemod--dark	color--heading
typemod--light	color--secondary
typemod--<colorName>	color--<colorName>

fds-styles weight migration:

Old weight CSS class	New weight CSS class
typemod--bold	fontWeight--bold
typemod--book	fontWeight--book

fds-styles font style migration:

old font style class	new font style class
typemod--italic	fontStyle--italic
typemod--underline	fontStyle--underline
typemod--caps	fontStyle--caps

[3.8] Add view and sort icons

• Added icons to fds-icons
  • SortDownIcon
  • SortUpIcon
  • ViewColumnsIcon
  • ViewListIcon

[3.7] Fixed GroupButton

• GroupButton now should not overlap any other items that are positioned over it

[3.6] Fixed GroupButton

• key now will properly be applied from array items passed to ButtonGroup

[3.5] Fixed GroupButton (Firefox)

• GroupButton background-color in Firefox is now fixed
• GroupButton active states now work (removed :enabled)

[3.4] Fixed / Updated ButtonGroup

• onChange now works again in ButtonGroup
• deprecated icon prop in favor of Icon prop in ButtonGroup
• className no longer accepted on ButtonGroup or GroupButton

[3.3] Fixed ButtonGroup

• Key now properly gets generated from label
• Anchor buttons can now have a disabled style
• Fixed bug that happens when onChange is not specified

[3.2] Updated ButtonGroup

• Standardized ButtonGroup in line with Chips
• Array items in ButtonGroup can now be rendered as anchors, buttons, or custom components (e.g. Link)
• Added label prop to define display
• Added key prop to override key (if labels are not unique)
• content is now deprecated
• value is now deprecated

[3.1] Updated Chips

• Can now specify key instead of value on array items
• Corrected propTypes

[3.0] FlexGrow

**⚠️ No consumers were using flexGrow, but we're making this a breaking change just to be safe **

BREAKING CHANGES

• Removed flexGrow prop from FlexItem

[2.38] Added Chips

• Adds Chips component to fds-components

[2.37] Updated ButtonGroup per new designs

• ButtonGroup now manages z-index more carefully
• GroupButton styles were updated, including having a new focus style

[2.36] Added correct fds-icon displayName

• fds-icons Changed icon displayName to reflect the actual name

[2.35] Arrow Icons

• Added arrow icons to fds-icons
  • NavArrowBackIcon
  • NavArrowDownIcon
  • NavArrowForwardIcon
  • NavArrowUpIcon

[2.34] Changed default cursor on disabled items

• fds-styles Changed default cursor on disabled items

[2.33] Changed fds-icon color

• fds-icons updated to utilize currentColor

[2.32] Added segmented button

• Adds ButtonGroup component to fds-components
• Pass GroupButton as children to ButtonGroup
• Adds GroupButton component to fds-components

[2.31] Deduplicate Icons

• ShareIcon icon updated to always use an arrow shape.
• HideIcon icon now uses a crossed out eye shape.
  • To use a "no sign" shape, please use NopeIcon
• NetworkIcon added (connected dots style share icon).

[2.30] Added link helper class

• Adds typeset--link helper class to fds-styles

[2.29] Added font-color-link

• Adds font-color-link variable to fds-dictionary

[2.28] Standard box shadows

• Adds elevation--<level> box shadow classes to fds-styles
• Adds depth--<level> box shadow classes to fds-styles

[2.27] Add resetButton class

• Adds resetButton utility class to fds-styles.

[2.26] Add Export icon

• Adds Export icon
• Puts dollar sign back in Investor icon

[2.25] Fix Move icon

• Roll back SVG changes to Move icon

[2.24] Updatable signature change

• Updatable component now takes children instead of a component prop.

[2.23] New Icons

• Add ExpertTag icon to fds-icons
• Add StoryDossier icon to fds-icons

[2.22] (stable) Fix babel transpile for IE11

• Add IE11 target to babel/preset-env configuration to ensure arrow functions are transformed.

[2.21] ☢️ (broken) Upgrades / Housekeeping

⚠️ In this version, babel fails to read browserslist and does not transform "=>"

• Move all jest configuration to repo root; run tests from root
• Upgrade some dev dependencies to latest...
  • babel (cli, core, etc)
  • webpack-blocks
  • enzyme
  • enzyme-to-json
  • lint-staged
  • react-styleguidist

[2.20] MoreIcon

• adds "more" icon to fds-icons
• modifies "investor" icon in fds-icons (adds dollar sign to briefcase)

[2.19] Progress Toast update

• If a Toast is of type progress, it will not render a dismiss button. This helps avoid confusion that dismissing a toast is the same as cancelling the operation in progress (it doesn't).
• Adds new yarn command for updating snapshots in all packages

[2.18] Explicit input type selectors in fds-styles

• Changes high-specificity negating selector for non-checkbox, non-button inputs. Instead, base input styles will be set by single attribute selectors (e.g. input[type="text"])

[2.17] Form tag fixes

• Includes fixes for...
  • checkbox wrapping
  • input border-box size bugs

[2.16] Form field defaults

• Added better base tag defaults for form elements
• Added error and resetField helper classes for form elements

[2.15] Toast onAction Dismiss

• When user engages the action on a Toast we will not dismiss the message

[2.14] Custom Media

• Added custom media properties to fds-dictionary. Assuming the consumer has postcss-preset-env set up, consumers can import customMedia.css to support the following standard viewports:
  • @media (--viewport-xs) { ...extra small and larger.. }
  • @media (--viewport-s) { ...small and larger.. }
  • @media (--viewport-m) { ...medium and larger.. }
  • @media (--viewport-l) { ...large and larger.. }
  • @media (--viewport-xl) { ...extra large and larger.. }

[2.13] ShareIcon

• Updates all icons from latest sketch file
• Modifies ShareIcon to use an arrow instead of a network icon

[2.12] Updatable

• Adds Updatable component to fds-components.

[2.11] Adding more style defaults

• Adds more base element defaults to fds-styles to help us move away from bootstrap.

[2.10] Bottom left toasts

• Modifies Toaster component to position appearing toasts to the bottom left of the viewport.

[2.9] 🍞 Toasts

• Adds Toast component to fds-components
• Adds Toaster controller component to fds-components
• Adds CountdownButton component to fds-components

[2.8] Material ui theme

• Gives modals and -based components a z-index of 9999

[2.7] data-tests

• Adds dataTest props to Flex and Flex-Item

[2.6] easing standards

• Adds motion/easing standards to fds-dictionary

[2.5] React hooks

• Upgrades react to ^16.8

[2.4] FlexGrow

• Add flexGrow prop to FlexItem

[2.3] New Icons

• Adds two icons to fds-icons
  • FunnelIcon
  • NumbersIcon

[2.2] zindex vars

• Adds z-index tokens to fds-dictionary. Available in CSS as var(--zindex-<VALUE>) and in JS as FDS.ZINDEX_<VALUE>.

[2.1] half spacing helpers

• Added --half variants to padding and spacing utility classes in fds-styles

[2.0] Major Icon Update

Updated fds-icons package with breaking changes.

Changes

• Added new icons

+ActionsArrowDown
+ActionsArrowLeft
+ActionsArrowRight
+ActionsArrowUp
+AdvancedSearch
+At
+AutoBuild
+Bell
+CbiData
+CheckFilled
+CompanyCustom
+Line
+Reset
+StarEmpty
+StarFilled
+Story
+StoryAdd
+StoryExpert
+ThreeDot
+Visualize
+WorkFaster

BREAKING CHANGES

Renamed a number of icons...

• Down => CaretDown
• Right => CaretRight
• Left => CaretLeft
• Up => CaretUp
• Collection => CollectionPublic
• EmptyCheck => CheckEmpty
• ExpertCollection => CollectionExpert
• HanburgerBars => HamburgerBars
• AlphabeticalAz => OrderAlphabeticalAz
• AlphabeticalZa => OrderAlphabeticalZa
• Ascending => OrderAscending
• Decending => OrderDescending
• RadioButtonEmpty => RadioEmpty
• RadioButtonFilled => RadioFilled

[1.21] fds-icons

• Adds fds-icons package to form-design-system
  • Documentation
  • Github
• fds-components now imports css from fds-icons into main stylesheet

[1.20] stable

• Fixes issue occurring in some patch versions of 1.19 where packages were published without lib/ or dist/ dirs.

[1.19]

• Adds type modifier classes to fds-styles for underline, italic, and all caps

[1.18] MenuButton

• Adds disabled font color to fds-dictionary
• Adds MenuButton component to fds-components

[1.17]

• Fix import statement in fds-mui-theme

[1.16] AvatarRow

• Added AvatarRow component to fds-components.

[1.15]

• Added important declarations to modifier classes commonly used to override things. For example, typemod--red should always override any inherited color attribute.

[1.14] Media Sizes

• Added media properties to fds-dictionary for standard media sizing (icons, avatars, etc.)
• Added media-- helper classes to fds-styles to set dimensions of a selected element to a given standard media size.

[1.13] material-ui theme

• Added fds-mui-theme package. This provides a theme for material-ui based on our standard styles defined in fds-dictionary.

[1.11, 1.12]

bad publish - identical to 1.10.

[1.10]

• Added material UI palettes to fds-dictionary. Light and dark variants are generated for each base color for use in material-ui framework theming.

import with: `import { blue } from 'fds-dictionary/dist/js/materialPalette.js'`

blue[500]; // base blue color
blue[100]; // lightened blue
blue[900]; // darkened blue

[1.9]

• Added distribution to fds-dictionary, a map of CSS custom property names to values. This is used to populate a PostCSS plugin with fallback values of custom properties for IE11.

[1.8]

• Added whitespace "wrap" helpers to fds-styles

[1.7]

• Changed align-- classes to use left and right instead of start and end. Fixes bug where PostCSS was producing invalid CSS by nesting [dir] attribute selectors inside align-- blocks.

[1.6]

• Added react native dist to fds-dictionary. Import path is 'fds-dictionary/dist/js/reactNative'.

[1.5]

• Removed default background color on body and html elements
• Fixed defect where table was being set to display: block by default
• Modified publish routine - allow lerna to version root package

[1.4]

• Added sketch/palettes distribution to fds-dictionary
• Changed javascript distribution in fds-dictionary to commonJS modules

[1.3]

• Improved signature of type modifiers
• Added type specimen to docs (not linked publicly)
• Use condensed Roboto where appropriate
• Fixes issue where default body type size was not being set

[1.2]

Added typesetting and type modifier classes to fds-styles.

[1.1]

Added dictionary properties for typography.

[1.0] - Stable

Public API defined; all packages ready for use in production, but most are very basic stubs. For v1.0.0, the package to consume is fds-components, which includes Flex and FlexItem layout helper components.

[0.2]

Add cross-package dependencies. The component lib now imports the foundational stylesheet from fds-styles. The foundational stylesheet imports custom properties from fds-dictionary.

• fds-styles now depends on fds-dictionary
• fds-components now depends on fds-styles

[0.1]

First published beta version of FDS components. Use with caution.

• Add fds-dictionary package
  • Add color properties
  • Add font weight properties
  • Add distributions for js and css
• Add fds-styles package
  • Add flush, and align helper classes
• Add fds-components package
  • Add Flex and FlexItem layout components