Canvas v8 Announcements

Canvas Kit 8.6.0 Release

Canvas Kit 8.6.0 is now available.

This Canvas Kit release contains the following updates:

• inset has been added to the PositionStyle prop to enable users to set more than one position prop with the logical property syntax
• The getColor API has been extended to AccentIcon which will enable it to use Canvas color tokens for color related props

This update will not impact developers. To access these changes, please upgrade to Canvas Kit 8.6.0.

April 2023 Figma Library Release

The Canvas Web Figma library has been updated to minimize breaking changes for the upcoming Canvas v9 release.

This update includes:

• Re-labeling components to remove emojis and typos that may impact library swapping
• Updating the component description to indicate what Canvas version a component is being pulled from
• Restructuring the Delete Button to match the structure of other Canvas buttons and adding a phantom x-small layer to it to prevent breaking changes when swapping to the new Canvas Web v9 Figma library
• Adding text props to Status Indicator and Radio to minimize breaking changes when swapping to the new Canvas Web v9 Figma library
• Replacing the icon show/hide prop with a boolean prop in the Status Indicator component to reduce the number of variants needed and improve memory usage
• Deprecating Status Indicator variants with the old icon show/hide prop. It is still available for use in the Canvas Web library, but the component name and description now contain deprecation warnings
• Replacing the text show/hide prop with a boolean prop in the Radio/Single component to reduce the number of variants needed and improve memory usage
• Deprecating Radio/Single variants with the old text show/hide prop. It is still available for use in the Canvas Web library, but the component name and description now contain deprecation warnings
• Merging Segmented Control components into a single variant group to standardize the component structure

This update will not will not result in any breaking changes and should help negate the several breaking changes identified for the Canvas v9 release.

To uptake these bug fixes, please accept the updates in your Figma files.

April 2023 Design Asset Release

The April 2023 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following assets were released in this update:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.15)
  • wd-icon-find-inventory.svg (findInventoryIcon when using SystemIcon)
  • wd-icon-adjust-inventory.svg (adjustInventoryIcon)
  • wd-icon-move-inventory.svg (moveInventoryIcon)
  • wd-icon-convert-inventory.svg (convertInventoryIcon)
  • wd-icon-find-transactions.svg (findTransactionsIcon)

The Canvas Assets Figma library has been updated to include the new icons listed above. This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

For more information or to access these new icons in this update, please reference the Design Asset repo.

March 2023 Design Asset Release

The March 2023 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following asset was released as part of this release:

• Accent Icons (upgrade @workday/canvas-accent-icons-web to 3.0.5)
  • wd-accent-notification.svg (notificationIcon when using AccentIcon)

The following asset was updated as part of this release:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.11)
  • wd-icon-check-circle.svg (checkCircleIcon when using SystemIcon) has been updated to remove the faint ring between layers

The Canvas Assets Figma library has been updated to include the new notification accent icon. This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

For more information, or to access these new icons in this update, please reference the Design Asset repo.

Canvas Kit 8.5.0 Release

Canvas Kit 8.5.0 is now available.

This Canvas Kit release contains the following updates:

• The overall padding for Modal on smaller screen sizes (320px to 767px) has increased from 16px to 24px in Canvas Kit to align with Mobile
• The spacing between Modal.Heading and Modal.Body has been reduced from 16px to 8px on smaller screen sizes (320px to 767px)
• An enhancement has be applied to SystemIcon that enables the use of token colors
• Docgen parsing has been added to enhance documentation for APIs, hooks, and more!

The responsive Modal variant in the Canvas Web Figma library has also been updated to decrease the padding between the body copy and action buttons from 32px to 16px.

This update will not impact existing design or development work. To access these changes, please upgrade to Canvas Kit 8.5.0 and accept the changes to the Figma libraries.

February 2023 Design Asset Release

The February 2023 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following assets were updated as part of this release:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.9)
  • wd-icon-check-circle.svg (checkCircleIcon when using SystemIcon) has been updated to include additional layers that will allow teams to modify the background, accent, and fill
• Third Party Icons (upgrade @workday/third-party-icons-web to 1.0.5)
  • wd-accent-workday-circle.svg (workdayCircleIcon when using SystemIcon) has been updated to use the correct dub and sunrise element, which will result in minor design changes to the icon

The Canvas Assets Figma library has been updated to include the update to the check-circle system icon. This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

For more information or to access these new icons in this update, please reference the Design Asset repo.

Canvas Kit 8.4.0 Release

The Canvas Kit React 8.4.0 is now available.

This release includes the soft deprecation of the following components:

• Stack
• VStack
• HStack

Teams using these soft deprecated components should transition to using the newly enhanced Flex component. A code mod is also available to help with the transition to Flex.

To access these changes, please upgrade to Canvas Kit 8.4.0

January 2023 Design Asset Release

The January asset release is now available and includes:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.8)
  • wd-icon-component-edit.svg (componentEditIcon when using SystemIcon)

The Canvas Assets Figma library has been updated to include this new icon.

In addition to this change, previously deprecated assets have also been removed from the Canvas Assets Figma library.

This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

Note: There were two asset releases in January 2023 due to an alignment issue with the new component-edit icon. Teams that have already upgraded to 3.0.7 should upgrade to 3.0.8 to access the correctly aligned component-edit icon.

For more information or to access these new icons in this update, please reference the Design Asset repo.

December 2022 Design Asset Release

The December 2022 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following asset was released with this update:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.6)
  • wd-icon-compare-files.svg (compareFilesIcon when using SystemIcon)

The Canvas Assets Figma library has been updated to include the new icon.

In addition to this new asset, the following bug fixes have also been rolled out:

• Illustrations (upgrade @workday/canvas-graphics-web to 4.0.6)
  • Removed empty space to fix aspect ratio for wd-illustration-spot-woman-flying-graphic.svg (wdIllustrationSpotWomanFlyingGraphic when using Graphic)

The deprecated assets on the deprecation page of the Canvas Assets Figma library have also been hidden as part of this release and will no longer be searchable in the Figma assets panel.

This release will not impact developers. Designers can upgrade to the latest version of the Canvas Assets Figma library without any impact to their existing designs. However, it is recommended to switch out the deprecated and outdated spot graphics in active design files with the new spot graphics.

For more information or to access these new icons in this update, please reference the Design Asset repo.

December 2022 Figma Library Bug Fixes

A Canvas Web Figma library update will be released on December 14th, 2022 with the following bug fixes:

• Missing hover states will be added for Expandable Container
• The navigational chevron icons in Pagination will be updated to Black Pepper 400 to align with Canvas Kit and the left hint text will be modified to be right aligned to maintain consistent spacing
• The text within Breadcrumbs will be updated to be left and right aligned in order to account for bidi and layout
• The height for Search Form will be updated from 48px to 40px to align with Canvas Kit
• The icon in Search Form has been replace with the new icon only Tertiary Button variant to align with Canvas Kit

The updates to Expandable Container, Pagination, and Breadcrumbs will not have an impact on existing designs. However, teams that have aligned UI elements to be the same height as Search Form may need to realign the UI elements to Search Form after they have accepted the changes.

To uptake these bug fixes, please accept the updates in your Figma files.

November 2022 Design Asset Release

The November 2022 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following assets were released with this update:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.5)
  • wd-icon-filter-checked.svg (filterCheckedIcon when using SystemIcon)
• Applet Icons (upgrade @workday/canvas-applet-icons-web to 2.0.6)
  • wd-applet-guidance-workspace.svg (guidanceWorkspaceIcon when using AppletIcon)
• Illustrations (upgrade @workday/canvas-graphics-web to 4.0.5)
  • wd-graphic-banner-urban-people.svg (bannerUrbanPeopleGraphic when using Graphic)
  • wd-illustration-spot-woman-flying.svg (wdIllustrationSpotWomanFlyingGraphic)

The Canvas Assets Figma library has been updated to include the new icons and illustrations.

The following changes have also been made in the Canvas Assets Figma library to align with the Design Asset repo:

• 10 banners have been added (previously missing from the Canvas Assets Figma library)
• 16 new spots illustrations have been added (previously missing from the Canvas Assets Figma library)
• 30 outdated spot graphics have been moved to the deprecation page (updated spot graphics are now all available in the Canvas Assets Figma library)

The deprecated assets will be hidden with the December 2022 Design Asset release (December 14th) before being fully removed from the Canvas Assets Figma library for the January 2023 Design Asset release (January 11th).

This release will not impact developers as they are net-new assets with no changes to previously released assets. Designers can also upgrade to the latest version of the Canvas Assets Figma library without any impact to their existing designs. However, it is recommended to switch out the deprecated and outdated spot graphics in active design files with the new spot graphics.

For more information or to access these new icons in this update, please reference the Design Asset repo.

---

Canvas Kit v8 and Figma Library Release

Canvas Kit v8 will be released on November 2nd, 2022, alongside updates to the Canvas Web Figma library to reflect the v8 changes. An upgrade guide will be available once v8 goes live to assist product teams with their migration to the newest version of Canvas Kit.

Note: Due to an unintentional release of Canvas Kit v8.0.0 earlier this year, Canvas Kit v8 will be released as v8.0.1 to maintain semantic versioning. Teams looking to upgrade to v8 should skip v8.0.0 and upgrade straight to v8.0.1 as the accidental release of v8.0.0 has already been deprecated. For more information, please view our previous Slack announcement.

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v8 release. The impact for designers and developers are defined as follows:

• None: inapplicable to the role or no actions are required for users to adopt the change; Updates will be applied automatically once users accept the changes in Figma and/or upgrade to Canvas Kit v8
• Low: minor changes are required for users to adopt the change
• Medium: a moderate amount of changes are required for users to adopt the change, such as switching out UI elements
• High: a large amount of changes are required for users to adopt the change, requiring product teams to make major design or development decisions

Change	Short Description	Designer Impact	Developer Impact
React 18 Upgrade	Canvas Kit will be upgrading to React 18, but will still maintain support for the same React versions as v7	None	None
Breadcrumbs Collection Enhancements	The new Collection Systems introduced in v7 will be added to Breadcrumbs, which will also be promoted to the Main package	None	Low
Primary Button Data Variant Hard Deprecation	The Data variant for Primary Button will be hard deprecated in the Canvas Web Figma library	Medium	None
Component Name Alignment	Updated component names in the Canvas Web Figma library and Canvas documentation to align all Canvas touchpoints	Low	None
Depth, Label, and Auto Layout Update for Menu	The Menu in the Main package will be updated to use depth 3 instead of depth 1 to align with the Canvas Figma libraries. The Menu in the Canvas Web Figma library will also be updated to fix text wrapping and alignment issues	None	None
New Responsive Utility	A new responsive utility will be released that will provide responsive styles for a given container width. This will also allow developers to easily adjust styles based on their current breakpoint range	None	None
New Grid Component	A new Grid component will be released in Canvas Kit to help developers create a grid system with Canvas. Documentation for the new Grid will be available on the Canvas Design System site within the Layout page	None	None
New Text Components	New Text components will be released in Canvas Kit to help developers quickly switch between different type token	None	None
New Tabs Variants, Fix, and Documentation	A touch based Tab variant will be added to the Canvas Web Figma library as well as updated documentation and a fix to add left padding back to Tabs	None	None
New Touch and Responsive Behavior for Modal	New touch and responsive based behavior will be added to Modal in Canvas Kit, along with updated documentation and variants in the Canvas Web Library	None	None
Component Soft Deprecations	Drawer, Menu (in Preview), and Layout will be soft deprecated	None	None
New and Updated Documentation	Updated documentation for Modal, Popup, and Tooltip. New documentation for FormField	None	None
Default Export Clean Up	Leftover default exports will be removed from Canvas Kit components	None	None
Internet Explorer 11 Deprecation	IE specific code will be removed from Canvas Kit	None	None
Checkbox and Radio Optimization	Updates will be made to the Checkbox and Radio components in the Canvas Web Figma library to reduce the component complexity	None	None
Removal of Previously Deprecated Components	Components that have already been hard deprecated over the last few Canvas releases will be removed from the Canvas Web Figma library	None	None
Testing Components and Utilities Promotion	Several testing components and utilities will be promoted to @workday/canvas-kit-react/testing, a new testing package	None	None
Refactor and Reorganize Style Props	Style props implementation will be refactored and reorganized as general clean up and improve documentation	None	None
Redesigned Status Indicator Component	A new redesigned Status Indicator component with Title Casing will be added to the Preview package	None	None
Redesigned Segmented Control Component	A new redesigned Segmented Control component will be added to the Preview package	None	None
Default Update for Popup Close Buttons	Update close buttons for Popup, Modal, and Dialog to default to type=button so they do not unintentionally submit forms	None	None
Action Bar Overflow Button Refactoring	The hard-coded OverflowButton in Action Bar will be refactored to allow users to modify and pass props into it	None	None
Utility Soft Deprecations	createEventMap and useEventMap will be soft deprecated	None	None

React 18 Upgrade

Canvas Kit will be upgraded to React 18 as part of the v8 release. This will not include any other dependency updates. However, Canvas Kit will continue to support React 16.14, React 17.X, and React 18.X in v8.

This change will not impact product teams that are already on v7 and are looking to upgrade to v8 as v8 will support the same React versions as v7 while still giving teams the ability to upgrade to React 18 as needed.

Since this is a Canvas Kit dependency upgrade, this will not impact existing designs created with the Canvas Figma libraries.

Breadcrumbs Collection Enhancements

The Collection System released in Canvas Kit v7 will be added to the Breadcrumbs component, which will help optimize Breadcrumbs and resolve some of the issues associated with the current Breadcrumbs component. The new Collection System will introduce some visual changes into Breadcrumbs, so to maintain the same visual design, the following updates will also be made to the Menu in Breadcrumbs:

• Max Width: No max width → 280px
• Max Height: 200px → 296px

These Menu updates are specific to the Menu embedded into Breadcrumbs, not the standalone Menu component in the Main or Preview package. With this enhancement, Breadcrumbs will also be promoted to the Main package.

A codemod will be available to help most teams transition to the new v8 Breadcrumbs. However, teams using Breadcrumbs.List or Breadcrumbs.CollapsibleList will not be able to use codemods for this update. For additional information, please view our GitHub discussion to assist with the Breadcrumbs update.

This enhancement will not impact existing designs.

Primary Button Data Variant Hard Deprecation

The data variant for Primary Button will be hard deprecated in v8, meaning that it will be removed from the Canvas Web Figma library.

This variant was already deprecated in Canvas Kit as part of the v7 updates so no action will be required for developers to uptake this change.

This hard deprecation will not impact existing designs, but designers should swap out the data variant for Primary Button in active designs with the icon left Primary Button variant.

Component Name Alignment

Component names in the Canvas Web Figma library will also be updated to align with their counterparts in Canvas Kit in order to improve the design to development hand-off. The following component names will be updated as part of this release:

• Check Box to Checkbox
• Select Drop-down to Select
• Badge to Count Badge

The Loading Animation component documentation, along with all other mentions of Loading Animation on the Canvas Design System site, has been updated to reference “Loading Dots” instead. Additionally, the Loading Animation in Canvas Kit has also been renamed to LoadingDots. This is being done to:

• Align with the Canvas Web Figma library
• Create a clearer distinction between Loading Dots and loading animation, which can be used to describe a wide variety of UI elements (ex: Loading Dots, Skeleton) that are used to indicate that content is being loaded.

A codemod will handle this change when developers upgrade to v8. This change will also not impact existing designs. However, designers should make note of the name changes when searching for these components in the Figma assets panel.

Depth, Label, and Auto Layout Update for Menu

The Menu in Canvas Kit’s Main package will be updated to use Depth 3 instead of Depth 1 in order to align with the Menu available in the Canvas Web Figma library. Additionally, the Menu component in the Canvas Web Figma library will contain updates to:

• Auto layout to fix text wrapping issues
• Add a container to the menu label to improve text alignment

All three updates are bug fixes that will not impact existing designs. Changes will be applied automatically, and no actions will be required for developers or designers to uptake this change.

New Responsive Utilities

The following Canvas Kit responsive utilities will be released as part of v8:

• useResponsiveContainerStyles: A hook that allows developers to create container-based responsive styles using style objects.

This is a net-new utility that developers can opt-in to start using, but no action is required to uptake this change.

This update is specific to Canvas Kit and will not impact existing designs.

New Grid Component

A new Grid component created using CSS Grids will be released in Canvas Kit to help developers create grid systems to align their product(s). This Grid component will be released in the Main package and correlates to the Layout Grid component in the Canvas Web Figma library that was released in v7.

Since this is a net-new component, no action will be required to uptake this change. However, it is recommended for teams using the current Layout component in Canvas Kit to switch over to this new Grid component as Layout will be soft deprecated in v8 (more information will be provided in the sections below).

This update will not impact existing designs. Designers can continue to use the Layout Grid component in the Canvas Web Figma library.

New Text Components

The following Text components will be released in v8 to help developers quickly apply and switch between different type tokens:

• Text
• LabelText
• Subtext
• BodyText
• Heading
• Title

The Text component will also allow developers to set text styles for component groupings. These will all be net-new components so no action will be required for developers to uptake this change.

The new Text components will also not impact existing designs since it is an implementation detail intended to improve the developer experience and will not be represented as a component in the Canvas Web Figma library.

New Tabs Variants, Fix, and Documentation

The following Tabs variants will be released in the Canvas Web Figma library as part of the v8 release:

• Overflow Fade: Scrollable touch based Tabs (released in Canvas Kit 7.1.0) with fade
• Overflow Menu: Tabs with an overflow Menu that can be toggled on/off

The new touch based Tabs variant (Overflow Fade) will also be accompanied by updated documentation for Tabs on the Canvas Design System site and a fix to add a 24px padding back to the left side of all Tabs variants, with the exception of the full-width variant.

This update will not impact developers since it is being rolled out in the Canvas Figma libraries and on the Canvas Design System site. It will also not impact existing designs as touch based Tabs will be a net-new variant and the Tabs left side padding fix will be applied automatically once designers accept the changes.

New Touch and Responsive Behavior for Modal

The Modal component will be updated to include new touch and responsive behaviors. Users interacting with Modal on touch will not be able to exit out of the Modal by tapping on the overlay. The responsive Modal component will be displayed when users are browsing on screen sizes between 320px and 768px and will have the following visual differences compared to the standard Modal:

• Corner Radius: 8px → 24px
• Padding: 32px → 24px
• Line Spacing between Modal.Heading and Modal.Body: 24px → 16px

To support responsive Modal on the Canvas Web Figma library, the following variants will also be added:

• Responsive Fullwidth: Modal with side-by-side center aligned buttons that take up the fullwidth of the Modal, this is the “Fullwidth” variant in Canvas Web
• Responsive Stacked: Modals with stacked buttons that take up the full width of the Modal, this is the “Stacked” variant in Canvas Web
• Responsive Center Aligned: Modal with side-by-side center aligned buttons that do not take up the fullwidth of the Modal, this is the “Center” variant in Canvas Web
• Responsive Right Aligned: Modals with side-by-side right-aligned buttons, this is the “Right” variant in Canvas Web
• **Responsive Left Aligned (Default) **: Modals with side-by-side left-aligned buttons, this is the “Default” variant in Canvas Web

The Modal documentation on the Canvas Design System site will be updated to reflect the new touch and responsive behavior. No action will be required for developers to uptake this change. The new touch and responsive behaviors will be applied automatically as teams upgrade to v8.

This update will also not impact existing designs since it is a net-new variant.

Component Soft Deprecations

Drawer, Layout, and Menu (in Preview) will be soft deprecated in v8. Warnings will be added to notify users about the soft deprecation and subsequent hard deprecation in v9. The components will also be renamed to indicate that they are being deprecated.

These components will still be available for use in Canvas Kit v8, but will be accompanied by the deprecation warnings mentioned above. Codemods will be available to help developers uptake the component name changes as part of the soft deprecation, but developers using:

• Drawer should start switching over to the Side Panel component in Preview, which contains the same capabilities as Drawer (and more!)
• Layout should switch over to the new Grid component that will be released in v8
• Menu in Preview should start switching over to the most updated Menu component in the Main package

Drawer is the only soon-to-be soft deprecated component available in the Canvas Web Figma library. While it will still be available for use with the deprecation warnings in v8, it is recommended for designers to switch out all uses of Drawers in active designs with the Side Panel component (currently available in the Canvas Web Figma library).

New and Updated Documentation

New usage guidance will be released for the Modal and Popup documentation on the Canvas Design System site. The Tooltip documentation will be updated to include additional guidance for text wrapping and new documentation will be released for FormField.

These documentation updates will not impact existing designs and or development.

Default Export Clean Up

The remaining default exports leftover in Canvas Kit will be removed as part of general Canvas Kit maintenance. A codemod will be available to help developers uptake the change and no actions will be required.

Since this is a Canvas Kit maintenance update, it will not impact existing designs created with the Canvas Figma libraries.

Internet Explorer 11 Deprecation

Canvas will stop supporting IE11 in v8. The IE11 deprecation will include:

• Removing IE specific code from Canvas Kit
• Turning off Chromatic for IE

No action will be required from designers or developers to uptake this change. However, teams supporting IE11 should note that certain components and utilities may be built that IE11 cannot support. This means applications built using Canvas Kit React v8 and beyond may not be loaded or not work properly for users accessing it through IE11.

Checkbox and Radio Optimization

The following updates will be made to the Checkbox and Radio components in the Canvas Web Figma library to improve optimization and minimize the risk of future bugs:

• Hidden Checkbox and Radio components will be added to replace existing instances of component inceptions
• Extra shape layers will be reduced and replaced with a frame that contains a border with drop shadows in both components

This optimization work is specific to the Canvas Web Figma library and no action will be required from developers. The update will also not impact existing designs.

Removal of Previously Deprecated Components

Components that have previously been hard deprecated in past Canvas releases will be completely removed from the Canvas Web Figma library. This includes all the components on the Deprecated page of the Canvas Web Figma library, with the exception of Drawer which is being soft deprecated in v8. These previously hard deprecated components have either been rebuilt for optimization and added to the Canvas Web page of the Canvas Web Figma Library or are no longer being supported by Canvas.

This update will not impact existing designs, but teams using those previously hard deprecated components should switch to using components that are supported by Canvas on the Canvas Web page of the Canvas Web Figma library. Since this update only removes previously hard deprecated components in Figma, no action will be required from developers to uptake this change.

Testing Components and Utilities Promotion

The following testing components and utilities from the Common and Labs package will be promoted to a new package, @workday/canvas-kit-react/testing, which will only be used for visual testing purposes:

• StaticStates
• ComponentStatesTable
• converToStaticStates
• permutateProps
• PropCombination
• Props
• PropDeclaration

A codemod will be available to help developers uptake this change, but no additional actions will be required. The update is Canvas Kit specific and will not impact existing designs.

Refactor and Reorganize Style Props

Style props will be reorganized and the implementation will be refactored, but the functionality will remain the same. This will improve the style prop documentation and allow Canvas to extend style props further in the future. The style props background and backgroundImage will be moving from the color style prop function to a new style prop function, background.

These functions are intended to only be used by Canvas Kit internally, and will not impact Canvas users. However, teams importing the color style prop function to apply these two style props will need to update their import statements to import the background style function as well.

Redesigned Status Indicator Component

A new Status Indicator component with title casing will be released in Preview, which will enhance its globalization capabilities and accessibility. The new Status Indicator component will differ from the current version in the Main package in the following areas:

• Text Casing: The new Status Indicator in Preview will use title casing (ex: In Progress) instead of full capitalization (ex: IN PROGRESS) as full capitalization can be interpreted as rude or offensive in other languages.
• Typography: added 12/14 Font Size Uppercase Bold (a one-off text style) to the Subtext L (Bold) type token for increased visibility and consistency
• Icon Size: (14px, 14px) to (20px, 20px) for increased visibility
• Height: 16px to 20px to accommodate a larger font and icon
• Padding: 1px to 0px for top and bottom padding

This update will release a net-new component in the Preview package. The current Status Indicator component in the Main package will not be modified as part of this release. Developers can continue using the Status Indicator in Main and can transition to the new one in Preview as needed.

The Status Indicator component in the Canvas Web Figma library will not be modified to reflect the new version in Preview at this time. As a result, this update will not impact existing designs.

Redesigned Segmented Control Component

Segmented Control with text capabilities will be released in Preview to support newly identified use cases for text only variants.

Some key aspects of the component to note include:

• Usage: Best used for switching between different views of the same content. Use Tabs for switching between content that is related but not the same. Segments are mutually exclusive and can contain text and/or icons.
• Shape: The component will continue to feature squared corners to visually distinguish these controls and their purpose from Standard Buttons.
• Color: Active/selected segment is white, French Vanilla 100 with a gray, Licorice 200 border against a light gray, Soap 200 container to make these controls less prominent than Standard Buttons.
• Tooltips: Canvas Tooltips showing text labels will be added for Icon-only variants to improve accessibility for ambiguous icons.
• Container: A container around the Segmented Control component has been added.

Since it will be released as a net-new component in Preview and no updates will be made to the current Segmented Control component in Main for v8, this update will not impact design or development.

Default Update for Popup Close Buttons

The CloseButton for Popup, Modal, and Dialog will be updated to use a default type=button to prevent forms from unintentionally being submitted. This will not impact development, no action is required to uptake this change.

This update is specific to Canvas Kit and will also not impact existing designs.

Action Bar Overflow Button Refactoring

In v7, the Overflow Button was hardcoded and placed directly inside ActionBar.List as part of an update to the Action Bar component. This prevented users from modifying the Overflow Button or passing props into it. To fix this issue, ActionBar.OverflowButton will be replaced with an overflowButton prop.

A codemod will handle this change when developers upgrade to v8.

This update is specific to Canvas Kit and will also not impact existing designs.

Utility Soft Deprecations

The createEventMap and useEventMap utilities will be soft deprecated in v8. This soft deprecation adds a strike-through to the utilities in the code editor, but they will still be available for developers to use. However, teams using these utilities should switch over to the new Model and ToModelConfig utilities that were introduced in v7 as createEventMap and useEventMap will be hard deprecated in v9. The new Model and ToModelConfig utilities are much more verbose, leveraging Typecript 4.1 functionalities. These new utilities will help streamline the developer experience and reduce bugs associated with the old createEventMap and useEventMap utilities.

Since createEventMap and useEventMap are only being deprecated in v8, no action will be required from developers to uptake this change.

This update is specific to Canvas Kit and will also not impact existing designs.