From f17678e4c769e5fa01e687975eb7ef2b7409f3b9 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Mon, 5 Oct 2026 13:55:44 -0600 Subject: [PATCH 01/13] feat(labs-react): Add Accessory tile for icons and images Give Labs a presentational leading visual so size, radius, and color treatments can settle before the API is promoted. Co-authored-by: Cursor --- cypress/component/Accessory.spec.tsx | 61 +++++++ modules/labs-react/accessory/LICENSE | 52 ++++++ modules/labs-react/accessory/README.md | 11 ++ modules/labs-react/accessory/index.ts | 3 + .../labs-react/accessory/lib/Accessory.tsx | 162 ++++++++++++++++++ .../accessory/lib/AccessoryIcon.tsx | 137 +++++++++++++++ .../accessory/lib/AccessoryImage.tsx | 97 +++++++++++ .../accessory/spec/Accessory.spec.tsx | 88 ++++++++++ .../labs-react/accessory/spec/SSR.spec.tsx | 25 +++ .../labs-react/accessory/spec/tsconfig.json | 4 + .../accessory/stories/Accessory.mdx | 104 +++++++++++ .../accessory/stories/Accessory.stories.ts | 58 +++++++ .../stories/examples/AccessibleName.tsx | 8 + .../accessory/stories/examples/Basic.tsx | 8 + .../accessory/stories/examples/Custom.tsx | 37 ++++ .../stories/examples/CustomColor.tsx | 52 ++++++ .../accessory/stories/examples/Image.tsx | 7 + .../accessory/stories/examples/RTL.tsx | 20 +++ .../accessory/stories/examples/Sizes.tsx | 36 ++++ .../accessory/stories/examples/Variants.tsx | 33 ++++ .../accessory/stories/testing.stories.tsx | 74 ++++++++ .../accessory/stories/tsconfig.json | 4 + modules/labs-react/index.ts | 1 + 23 files changed, 1082 insertions(+) create mode 100644 cypress/component/Accessory.spec.tsx create mode 100644 modules/labs-react/accessory/LICENSE create mode 100644 modules/labs-react/accessory/README.md create mode 100644 modules/labs-react/accessory/index.ts create mode 100644 modules/labs-react/accessory/lib/Accessory.tsx create mode 100644 modules/labs-react/accessory/lib/AccessoryIcon.tsx create mode 100644 modules/labs-react/accessory/lib/AccessoryImage.tsx create mode 100644 modules/labs-react/accessory/spec/Accessory.spec.tsx create mode 100644 modules/labs-react/accessory/spec/SSR.spec.tsx create mode 100644 modules/labs-react/accessory/spec/tsconfig.json create mode 100644 modules/labs-react/accessory/stories/Accessory.mdx create mode 100644 modules/labs-react/accessory/stories/Accessory.stories.ts create mode 100644 modules/labs-react/accessory/stories/examples/AccessibleName.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Basic.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Custom.tsx create mode 100644 modules/labs-react/accessory/stories/examples/CustomColor.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Image.tsx create mode 100644 modules/labs-react/accessory/stories/examples/RTL.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Sizes.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Variants.tsx create mode 100644 modules/labs-react/accessory/stories/testing.stories.tsx create mode 100644 modules/labs-react/accessory/stories/tsconfig.json diff --git a/cypress/component/Accessory.spec.tsx b/cypress/component/Accessory.spec.tsx new file mode 100644 index 0000000000..320fc1ea3c --- /dev/null +++ b/cypress/component/Accessory.spec.tsx @@ -0,0 +1,61 @@ +import {AccessibleName} from '../../modules/labs-react/accessory/stories/examples/AccessibleName'; +import {Basic} from '../../modules/labs-react/accessory/stories/examples/Basic'; +import {Custom} from '../../modules/labs-react/accessory/stories/examples/Custom'; +import {CustomColor} from '../../modules/labs-react/accessory/stories/examples/CustomColor'; +import {Image} from '../../modules/labs-react/accessory/stories/examples/Image'; +import {RTL} from '../../modules/labs-react/accessory/stories/examples/RTL'; +import {Sizes} from '../../modules/labs-react/accessory/stories/examples/Sizes'; +import {Variants} from '../../modules/labs-react/accessory/stories/examples/Variants'; + +describe('Accessory', () => { + beforeEach(() => { + // Stub the remote image so this spec does not depend on picsum.photos (blocked/slow in CI). + cy.intercept('GET', 'https://picsum.photos/**', { + fixture: 'avatar.png', + headers: {'content-type': 'image/png'}, + }); + }); + + [Basic, Image, Custom, CustomColor, Sizes, Variants, AccessibleName, RTL].forEach(Example => { + context(`given the ${Example.name} story is rendered`, () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + }); + }); + + context('given the Accessible Name story is rendered', () => { + beforeEach(() => { + cy.mount(); + }); + + it('should expose the icon name', () => { + cy.findByRole('img', {name: 'Complete'}).should('be.visible'); + }); + }); + + context('given the Image story is rendered', () => { + beforeEach(() => { + cy.mount(); + }); + + it('should expose the image name', () => { + cy.findByRole('img', {name: 'Random photo'}).should('be.visible'); + }); + }); + + context('given the Custom story is rendered', () => { + beforeEach(() => { + cy.mount(); + }); + + it('should expose both background images', () => { + cy.findByRole('img', {name: 'Three dark spheres'}).should('be.visible'); + cy.findByRole('img', {name: 'Three dark spheres, contained'}).should('be.visible'); + }); + }); +}); diff --git a/modules/labs-react/accessory/LICENSE b/modules/labs-react/accessory/LICENSE new file mode 100644 index 0000000000..10966086f1 --- /dev/null +++ b/modules/labs-react/accessory/LICENSE @@ -0,0 +1,52 @@ +Apache License, Version 2.0 Apache License Version 2.0, January 2004 + +http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. +"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. +"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. +"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. +"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. +"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. +"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. +"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). +"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. +"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." +"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. + +2. Grant of Copyright License. +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. + +4. Redistribution. +You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: +You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. + +5. Submission of Contributions. +Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. + +6. Trademarks. +This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. +Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. +In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. +While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders. + + +Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. diff --git a/modules/labs-react/accessory/README.md b/modules/labs-react/accessory/README.md new file mode 100644 index 0000000000..d0d85658d4 --- /dev/null +++ b/modules/labs-react/accessory/README.md @@ -0,0 +1,11 @@ +# Canvas Kit Accessory + + + LABS: Alpha + This component is work in progress and currently in prerelease. + +A presentational tile for a leading visual. Renders an icon or an image. + +View the +[documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs) +on Storybook. diff --git a/modules/labs-react/accessory/index.ts b/modules/labs-react/accessory/index.ts new file mode 100644 index 0000000000..eb004ae2e0 --- /dev/null +++ b/modules/labs-react/accessory/index.ts @@ -0,0 +1,3 @@ +export * from './lib/Accessory'; +export * from './lib/AccessoryIcon'; +export * from './lib/AccessoryImage'; diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx new file mode 100644 index 0000000000..85a89ec437 --- /dev/null +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -0,0 +1,162 @@ +import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; +import {systemIconStencil} from '@workday/canvas-kit-react/icon'; +import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import {base, component, system} from '@workday/canvas-tokens-web'; + +import {AccessoryIcon, accessoryIconStencil} from './AccessoryIcon'; +import {AccessoryImage} from './AccessoryImage'; + +/** + * The size of an `Accessory` tile. + * + * * `extraSmall` — 16px tile, 10px icon + * * `small` — 20px tile, 12px icon + * * `medium` — 24px tile, 16px icon + * * `large` — 32px tile, 18px icon + * * `extraLarge` — 40px tile, 20px icon + */ +export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge'; + +export interface AccessoryProps extends CSProps { + /** + * The size of the tile. `Accessory.Icon` glyph size follows the tile: 10px, 12px, 16px, 18px, + * and 20px from `extraSmall` to `extraLarge`. Variant fills are painted at `medium` and above. + * `small` and `extraSmall` stay transparent unless `Accessory.Icon` sets `background`. + * + * * `extraSmall` — 16px + * * `small` — 20px + * * `medium` — 24px + * * `large` — 32px + * * `extraLarge` — 40px + * + * @default 'extraLarge' + */ + size?: AccessorySize; +} + +export const accessoryStencil = createStencil({ + extends: cornerShapeStencil, + parts: { + icon: 'accessory-icon', + image: 'accessory-image', + }, + base: ({iconPart, imagePart}) => ({ + display: 'inline-flex', + position: 'relative', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + flexShrink: 0, + verticalAlign: 'middle', + [iconPart]: { + position: 'absolute', + inset: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + zIndex: 1, + }, + [imagePart]: { + position: 'absolute', + inset: 0, + display: 'flex', + }, + }), + modifiers: { + size: { + extraSmall: ({iconPart}) => ({ + width: system.legacy.size.xxxs, + height: system.legacy.size.xxxs, + [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, + [iconPart]: { + [systemIconStencil.vars.size]: base.legacy.size125, + backgroundColor: cssVar(accessoryIconStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + }), + small: ({iconPart}) => ({ + width: system.legacy.size.xxs, + height: system.legacy.size.xxs, + [cornerShapeStencil.vars.shape]: base.legacy.size75, + [iconPart]: { + [systemIconStencil.vars.size]: base.legacy.size150, + backgroundColor: cssVar(accessoryIconStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + }), + medium: ({iconPart}) => ({ + width: system.legacy.size.xs, + height: system.legacy.size.xs, + [cornerShapeStencil.vars.shape]: system.legacy.shape.md, + [iconPart]: { + [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs, + }, + '&:has([data-variant="outline"])': { + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + }), + large: ({iconPart}) => ({ + width: system.legacy.size.sm, + height: system.legacy.size.sm, + [cornerShapeStencil.vars.shape]: base.legacy.size125, + [iconPart]: { + [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm, + }, + '&:has([data-variant="outline"])': { + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + }), + extraLarge: ({iconPart}) => ({ + width: system.legacy.size.md, + height: system.legacy.size.md, + [cornerShapeStencil.vars.shape]: system.legacy.shape.lg, + [iconPart]: { + [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md, + }, + '&:has([data-variant="outline"])': { + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + }), + }, + }, +}); + +/** + * `Accessory` is a presentational tile for a leading visual. It owns the tile size, corner radius, + * and clipping. Place an `Accessory.Icon` or `Accessory.Image` inside it. + * + * ```tsx + * + * + * + * ``` + */ +export const Accessory = createComponent('span')({ + displayName: 'Accessory', + Component: ({size = 'extraLarge', ...elemProps}: AccessoryProps, ref, Element) => { + return ; + }, + subComponents: { + /** + * `Accessory.Icon` renders a system icon inside the tile. `variant` sets the tile fill and icon + * color. The glyph size comes from the `size` prop on `Accessory`. `color` and `background` + * override the variant colors. + * + * Pass `aria-label` when the icon conveys information that is not available in adjacent text. + * Omit it when the icon is decorative. + */ + Icon: AccessoryIcon, + /** + * `Accessory.Image` renders an image that fills the tile. Pass `icon` to center an + * `Accessory.Icon` on top of the image. `alt` is required. Use an empty string when the image + * is decorative. + */ + Image: AccessoryImage, + }, +}); diff --git a/modules/labs-react/accessory/lib/AccessoryIcon.tsx b/modules/labs-react/accessory/lib/AccessoryIcon.tsx new file mode 100644 index 0000000000..d1aa4872c0 --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryIcon.tsx @@ -0,0 +1,137 @@ +import {createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; +import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import {base, system} from '@workday/canvas-tokens-web'; + +import {accessoryStencil} from './Accessory'; + +/** + * The color treatment of `Accessory.Icon`. + */ +export type AccessoryIconVariant = + | 'grey' + | 'green' + | 'blue' + | 'purple' + | 'amber' + | 'magenta' + | 'red' + | 'orange' + | 'outline'; + +export interface AccessoryIconProps extends CSProps { + /** + * The icon to display from `@workday/canvas-system-icons-web`. + */ + icon: SystemIconProps['icon']; + /** + * The color treatment of the icon and, at `medium` and above, the tile fill. + * @default 'grey' + */ + variant?: AccessoryIconVariant; + /** + * The color of the icon. When set, this overrides the icon color from `variant`. + */ + color?: string; + /** + * The background color of the tile. When set, this overrides the fill from `variant` and is + * painted at every size, including `small` and `extraSmall`. + */ + background?: string; + /** + * The accessible name of the icon. When set, the tile is exposed as an image with this name. + * Omit it when the icon is decorative. + */ + 'aria-label'?: string; + /** + * Overrides the role of the tile. When `aria-label` is set and this is omitted, the tile uses + * `img`. + */ + role?: string; + /** + * Hides the tile from assistive technology. Decorative icons are hidden unless this is set. + */ + 'aria-hidden'?: boolean; +} + +const variantFill = + (backgroundColor: string, iconColor: string) => + ({ + iconColor: iconColorVar = '', + tileBackground = '', + }: { + iconColor?: string; + tileBackground?: string; + }) => ({ + backgroundColor: cssVar(tileBackground, backgroundColor), + [systemIconStencil.vars.color]: cssVar(iconColorVar, iconColor), + }); + +export const accessoryIconStencil = createStencil({ + extends: systemIconStencil, + vars: { + iconColor: '', + tileBackground: '', + }, + base: {}, + modifiers: { + variant: { + grey: variantFill(system.legacy.color.surface.alt.strong, base.legacy.slate800), + green: variantFill(system.legacy.color.surface.success.strong, base.legacy.green800), + blue: variantFill( + system.legacy.color.surface.info.strong, + system.legacy.color.fg.info.strong + ), + purple: variantFill(base.legacy.purpleA50, base.legacy.purple700), + amber: variantFill( + system.legacy.color.surface.warning.strong, + system.legacy.color.fg.warning.strong + ), + magenta: variantFill(base.legacy.magentaA50, base.legacy.magenta800), + red: variantFill( + system.legacy.color.surface.danger.strong, + system.legacy.color.fg.danger.strong + ), + orange: variantFill(base.legacy.orangeA50, base.legacy.orange700), + outline: ({iconColor, tileBackground}) => + variantFill( + system.legacy.color.surface.transparent, + base.legacy.slate800 + )({ + iconColor, + tileBackground, + }), + }, + }, +}); + +export const AccessoryIcon = createComponent('span')({ + displayName: 'Accessory.Icon', + Component: ( + {icon, variant = 'grey', color, background, ...elemProps}: AccessoryIconProps, + ref, + Element + ) => { + const accessibleName = elemProps['aria-label']; + + return ( + + ); + }, +}); diff --git a/modules/labs-react/accessory/lib/AccessoryImage.tsx b/modules/labs-react/accessory/lib/AccessoryImage.tsx new file mode 100644 index 0000000000..516b4f059f --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryImage.tsx @@ -0,0 +1,97 @@ +import {ImgHTMLAttributes} from 'react'; + +import {createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIconProps} from '@workday/canvas-kit-react/icon'; +import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +import {accessoryStencil} from './Accessory'; +import {AccessoryIcon} from './AccessoryIcon'; + +export interface AccessoryImageProps + extends CSProps, + Omit, 'color' | 'children'> { + /** + * The URL of the image. + */ + src: string; + /** + * The alternative text for the image. Use an empty string when the image is decorative and the + * meaning is available in adjacent text. + */ + alt: string; + /** + * How the image is resized to fit the tile. + * @default 'cover' + */ + objectFit?: 'contain' | 'cover'; + /** + * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When + * set, `Accessory.Image` also renders `Accessory.Icon`. The icon is decorative. + */ + icon?: SystemIconProps['icon']; + /** + * The color of the icon. Used when `icon` is set. + * @default `system.color.fg.inverse` + */ + color?: string; + /** + * The background color behind the image. Visible when the image does not cover the tile, such as + * `objectFit="contain"`. + * @default `system.legacy.color.surface.alt.default` + */ + background?: string; +} + +export const accessoryImageStencil = createStencil({ + vars: { + background: '', + }, + base: ({background}) => ({ + width: '100%', + height: '100%', + objectFit: 'cover', + backgroundColor: cssVar(background, system.legacy.color.surface.alt.default), + }), + modifiers: { + objectFit: { + cover: { + objectFit: 'cover', + }, + contain: { + objectFit: 'contain', + }, + }, + }, +}); + +export const AccessoryImage = createComponent('img')({ + displayName: 'Accessory.Image', + Component: ( + { + src, + alt, + objectFit = 'cover', + icon, + color = system.color.fg.inverse, + background, + ...elemProps + }: AccessoryImageProps, + ref, + Element + ) => { + return ( + <> + + {icon && } + + ); + }, +}); diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx new file mode 100644 index 0000000000..33ce3d7a54 --- /dev/null +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -0,0 +1,88 @@ +import {render, screen} from '@testing-library/react'; +import * as React from 'react'; + +import {checkIcon} from '@workday/canvas-system-icons-web'; + +import {Accessory} from '../lib/Accessory'; + +const imageSrc = + 'data:image/svg+xml,' + encodeURIComponent(''); + +describe('Accessory', () => { + verifyComponent(Accessory, {}); + verifyComponent(Accessory.Icon, {props: {icon: checkIcon}}); + verifyComponent(Accessory.Image, {props: {src: imageSrc, alt: 'Preview', icon: checkIcon}}); + + describe('when the icon has no accessible name', () => { + it('should hide the icon from assistive technology', () => { + render( + + + + ); + + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + }); + + describe('when the icon has an accessible name', () => { + it('should expose the icon as an image', () => { + render( + + + + ); + + expect(screen.getByRole('img', {name: 'Complete'})).toBeInTheDocument(); + }); + }); + + describe('when an image has alternative text', () => { + it('should expose that text as the image name', () => { + render( + + + + ); + + expect(screen.getByRole('img', {name: 'Four dark spheres'})).toBeInTheDocument(); + }); + }); + + describe('when a custom tile has a background image and an icon', () => { + it('should name the image and keep the icon decorative', () => { + render( + + + + ); + + expect(screen.getByRole('img', {name: 'Team photo'})).toBeInTheDocument(); + expect(screen.getAllByRole('img')).toHaveLength(1); + }); + }); + + describe('when a custom tile is decorative', () => { + it('should hide the image from assistive technology', () => { + render( + + + + ); + + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + }); + + describe('when an image is decorative', () => { + it('should hide the image from assistive technology', () => { + render( + + + + ); + + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + }); +}); diff --git a/modules/labs-react/accessory/spec/SSR.spec.tsx b/modules/labs-react/accessory/spec/SSR.spec.tsx new file mode 100644 index 0000000000..dee20c8eb5 --- /dev/null +++ b/modules/labs-react/accessory/spec/SSR.spec.tsx @@ -0,0 +1,25 @@ +/** + * @jest-environment node + */ +import {renderToString} from 'react-dom/server'; + +import {checkIcon} from '@workday/canvas-system-icons-web'; + +import {Accessory} from '../lib/Accessory'; + +const imageSrc = + 'data:image/svg+xml,' + encodeURIComponent(''); + +describe('Accessory', () => { + it('should render on a server without crashing', () => { + const ssrRender = () => + renderToString( + + + + + ); + + expect(ssrRender).not.toThrow(); + }); +}); diff --git a/modules/labs-react/accessory/spec/tsconfig.json b/modules/labs-react/accessory/spec/tsconfig.json new file mode 100644 index 0000000000..d079d9f251 --- /dev/null +++ b/modules/labs-react/accessory/spec/tsconfig.json @@ -0,0 +1,4 @@ + +{ + "extends": "../../../../tsconfig.spec.json" +} diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx new file mode 100644 index 0000000000..2c1ce33ae5 --- /dev/null +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -0,0 +1,104 @@ +import {Meta} from '@storybook/blocks'; + +import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs'; + +import AccessoryStoriesMeta from './Accessory.stories'; +import {AccessibleName} from './examples/AccessibleName'; +import {Basic} from './examples/Basic'; +import {Custom} from './examples/Custom'; +import {CustomColor} from './examples/CustomColor'; +import {Image} from './examples/Image'; +import {RTL} from './examples/RTL'; +import {Sizes} from './examples/Sizes'; +import {Variants} from './examples/Variants'; + + + +# Canvas Kit Accessory + +`Accessory` is a presentational tile for the leading visual in a row. It renders an icon or an +image. Pass `icon` to `Accessory.Image` to center an icon on the image. It does not handle clicks +or focus. + +## Installation + +```sh +yarn add @workday/canvas-kit-labs-react +``` + +## Usage + +### Basic Example + +`Accessory` owns the tile size and corner radius. `Accessory.Icon` renders a system icon. With no +`aria-label`, the icon is decorative. + + + +### Image + +`Accessory.Image` fills the tile with an image. `alt` names the image. Use `alt=""` when the image +is decorative. + + + +### Image with an icon + +Pass `icon` to `Accessory.Image` and it renders `Accessory.Icon` centered on the image. `objectFit` +is `cover` by default. `contain` fits the whole image inside the tile. The icon is decorative. +`alt` names the image. + + + +### Custom color + +`variant` is a stencil modifier on `Accessory.Icon`. Tile size and glyph size are modifiers on +`Accessory`, and the glyph size is applied through the icon `data-part`. `color` overrides the icon +color from `variant`. `background` overrides the tile fill and is painted at every size. The icon is +smaller than the tile: `extraSmall` is 10px, `small` is 12px, `medium` is 16px, `large` is 18px, +and `extraLarge` is 20px. Variant fills stay hidden at `small` and `extraSmall` unless `background` +is set. The same `color` and `background` props apply when `icon` is passed to `Accessory.Image`. + + + +### Sizes + +`size` is a prop on `Accessory`. The stencil sets the tile and, through `data-part`, the icon glyph. `extraLarge` (40px) is the default. + + + +### Variants + +`variant` is set on `Accessory.Icon`. It pairs an icon color with a tile fill. The fill is painted +at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those larger sizes. + + + +### Right-to-Left + +The tile stays centered in right-to-left layouts. Directional icons still follow the icon's own +mirroring rules. + + + +### Accessibility + +`Accessory` is presentational. It is not a button and does not take click or keyboard handlers. + +- Omit `aria-label` on `Accessory.Icon` when text next to the tile already names the item. The icon + is then hidden from assistive technology. +- Pass `aria-label` when the icon is the only source of that information. The tile is exposed as an + image with that name. + + + +- `Accessory.Image` uses the native `alt` on the image. An empty `alt` marks the image as + decorative. An `icon` on `Accessory.Image` is decorative. + +## Component API + + + +## Specifications + + diff --git a/modules/labs-react/accessory/stories/Accessory.stories.ts b/modules/labs-react/accessory/stories/Accessory.stories.ts new file mode 100644 index 0000000000..c4162dcd72 --- /dev/null +++ b/modules/labs-react/accessory/stories/Accessory.stories.ts @@ -0,0 +1,58 @@ +import {Meta, StoryObj} from '@storybook/react'; + +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; + +import mdxDoc from './Accessory.mdx'; +import {AccessibleName as AccessibleNameExample} from './examples/AccessibleName'; +import {Basic as BasicExample} from './examples/Basic'; +import {Custom as CustomExample} from './examples/Custom'; +import {CustomColor as CustomColorExample} from './examples/CustomColor'; +import {Image as ImageExample} from './examples/Image'; +import {RTL as RTLExample} from './examples/RTL'; +import {Sizes as SizesExample} from './examples/Sizes'; +import {Variants as VariantsExample} from './examples/Variants'; + +export default { + title: 'Labs/Accessory', + component: Accessory, + tags: ['autodocs'], + parameters: { + docs: { + page: mdxDoc, + }, + }, +} as Meta; + +type Story = StoryObj; + +export const Basic: Story = { + render: BasicExample, +}; + +export const Image: Story = { + render: ImageExample, +}; + +export const Custom: Story = { + render: CustomExample, +}; + +export const CustomColor: Story = { + render: CustomColorExample, +}; + +export const Sizes: Story = { + render: SizesExample, +}; + +export const Variants: Story = { + render: VariantsExample, +}; + +export const AccessibleName: Story = { + render: AccessibleNameExample, +}; + +export const RTL: Story = { + render: RTLExample, +}; diff --git a/modules/labs-react/accessory/stories/examples/AccessibleName.tsx b/modules/labs-react/accessory/stories/examples/AccessibleName.tsx new file mode 100644 index 0000000000..16c0c59855 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/AccessibleName.tsx @@ -0,0 +1,8 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {checkIcon} from '@workday/canvas-system-icons-web'; + +export const AccessibleName = () => ( + + + +); diff --git a/modules/labs-react/accessory/stories/examples/Basic.tsx b/modules/labs-react/accessory/stories/examples/Basic.tsx new file mode 100644 index 0000000000..9f0fd9ebbc --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Basic.tsx @@ -0,0 +1,8 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {checkIcon} from '@workday/canvas-system-icons-web'; + +export const Basic = () => ( + + + +); diff --git a/modules/labs-react/accessory/stories/examples/Custom.tsx b/modules/labs-react/accessory/stories/examples/Custom.tsx new file mode 100644 index 0000000000..05678e15ce --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Custom.tsx @@ -0,0 +1,37 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {checkIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, +}); + +const photo = + 'data:image/svg+xml,' + + encodeURIComponent( + ` + + + + + ` + ); + +export const Custom = () => ( +
+ + + + + + +
+); diff --git a/modules/labs-react/accessory/stories/examples/CustomColor.tsx b/modules/labs-react/accessory/stories/examples/CustomColor.tsx new file mode 100644 index 0000000000..1ba6dfa86e --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/CustomColor.tsx @@ -0,0 +1,52 @@ +import {Accessory, AccessorySize} from '@workday/canvas-kit-labs-react/accessory'; +import {Subtext} from '@workday/canvas-kit-react/text'; +import {createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {documentIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const containerStyles = createStyles({ + display: 'flex', + flexDirection: 'column', + gap: system.gap.md, +}); + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.md, + p: { + minWidth: px2rem(104), + margin: 0, + }, +}); + +const sizes: AccessorySize[] = ['extraSmall', 'small', 'medium', 'large', 'extraLarge']; + +const photo = 'https://picsum.photos/seed/accessory/200/200'; + +export const CustomColor = () => ( +
+ {sizes.map(size => ( +
+ {size} + + + + + + +
+ ))} +
+); diff --git a/modules/labs-react/accessory/stories/examples/Image.tsx b/modules/labs-react/accessory/stories/examples/Image.tsx new file mode 100644 index 0000000000..1cc31b2db3 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Image.tsx @@ -0,0 +1,7 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; + +export const Image = () => ( + + + +); diff --git a/modules/labs-react/accessory/stories/examples/RTL.tsx b/modules/labs-react/accessory/stories/examples/RTL.tsx new file mode 100644 index 0000000000..668ca68af3 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/RTL.tsx @@ -0,0 +1,20 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {Subtext} from '@workday/canvas-kit-react/text'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {checkIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, +}); + +export const RTL = () => ( +
+ + + + مكتمل +
+); diff --git a/modules/labs-react/accessory/stories/examples/Sizes.tsx b/modules/labs-react/accessory/stories/examples/Sizes.tsx new file mode 100644 index 0000000000..6dce51c674 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Sizes.tsx @@ -0,0 +1,36 @@ +import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {Subtext} from '@workday/canvas-kit-react/text'; +import {createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {checkIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const containerStyles = createStyles({ + display: 'flex', + flexDirection: 'column', + gap: system.gap.md, +}); + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.md, + p: { + minWidth: px2rem(104), + margin: 0, + }, +}); + +const sizes = ['extraSmall', 'small', 'medium', 'large', 'extraLarge'] as const; + +export const Sizes = () => ( +
+ {sizes.map(size => ( +
+ {size} + + + +
+ ))} +
+); diff --git a/modules/labs-react/accessory/stories/examples/Variants.tsx b/modules/labs-react/accessory/stories/examples/Variants.tsx new file mode 100644 index 0000000000..b7f645f150 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Variants.tsx @@ -0,0 +1,33 @@ +import {Accessory, AccessoryIconVariant} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {checkIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, + flexWrap: 'wrap', +}); + +const variants: AccessoryIconVariant[] = [ + 'grey', + 'green', + 'blue', + 'purple', + 'amber', + 'magenta', + 'red', + 'orange', + 'outline', +]; + +export const Variants = () => ( +
+ {variants.map(variant => ( + + + + ))} +
+); diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx new file mode 100644 index 0000000000..13ecfebc7e --- /dev/null +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -0,0 +1,74 @@ +import { + Accessory, + AccessoryIconVariant, + AccessorySize, +} from '@workday/canvas-kit-labs-react/accessory'; +import { + ComponentStatesTable, + StaticStates, + permutateProps, +} from '@workday/canvas-kit-react/testing'; +import {checkIcon} from '@workday/canvas-system-icons-web'; + +export default { + title: 'Testing/Labs/Accessory', + component: Accessory, + parameters: { + chromatic: { + disable: false, + }, + }, +}; + +const sizes: AccessorySize[] = ['extraSmall', 'small', 'medium', 'large', 'extraLarge']; +const variants: AccessoryIconVariant[] = [ + 'grey', + 'green', + 'blue', + 'purple', + 'amber', + 'magenta', + 'red', + 'orange', + 'outline', +]; + +const photo = 'https://picsum.photos/seed/accessory/200/200'; + +export const AccessoryIconStates = () => ( + + ({value: variant, label: variant})), + })} + columnProps={permutateProps({ + size: sizes.map(size => ({value: size, label: size})), + })} + > + {props => ( + + + + )} + + +); + +export const AccessoryImageStates = () => ( + + ({value: size, label: size})), + })} + columnProps={permutateProps({ + className: [{label: 'Default', value: ''}], + })} + > + {props => ( + + + + )} + + +); diff --git a/modules/labs-react/accessory/stories/tsconfig.json b/modules/labs-react/accessory/stories/tsconfig.json new file mode 100644 index 0000000000..721d5175e2 --- /dev/null +++ b/modules/labs-react/accessory/stories/tsconfig.json @@ -0,0 +1,4 @@ + +{ + "extends": "../../../../tsconfig.stories.json" +} diff --git a/modules/labs-react/index.ts b/modules/labs-react/index.ts index 18053d3f72..fe0ddf94f1 100644 --- a/modules/labs-react/index.ts +++ b/modules/labs-react/index.ts @@ -1,3 +1,4 @@ +export * from './accessory'; export * from './ai-ingress-button'; export * from './kbd'; export * from './selection-group'; From 828c0829703aa88e317232733cf22bc888489648 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Mon, 5 Oct 2026 14:06:47 -0600 Subject: [PATCH 02/13] fix: Update part --- .../labs-react/accessory/lib/Accessory.tsx | 23 +++++-------------- .../accessory/lib/AccessoryIcon.tsx | 11 +++++---- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 85a89ec437..456a83ef63 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -1,6 +1,6 @@ import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; -import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; import {base, component, system} from '@workday/canvas-tokens-web'; import {AccessoryIcon, accessoryIconStencil} from './AccessoryIcon'; @@ -45,7 +45,6 @@ export const accessoryStencil = createStencil({ position: 'relative', alignItems: 'center', justifyContent: 'center', - overflow: 'hidden', flexShrink: 0, verticalAlign: 'middle', [iconPart]: { @@ -55,11 +54,16 @@ export const accessoryStencil = createStencil({ alignItems: 'center', justifyContent: 'center', zIndex: 1, + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', }, [imagePart]: { position: 'absolute', inset: 0, display: 'flex', + overflow: 'hidden', + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', }, }), modifiers: { @@ -91,11 +95,6 @@ export const accessoryStencil = createStencil({ [iconPart]: { [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs, }, - '&:has([data-variant="outline"])': { - borderWidth: px2rem(1), - borderStyle: 'solid', - borderColor: system.legacy.color.border.default, - }, }), large: ({iconPart}) => ({ width: system.legacy.size.sm, @@ -104,11 +103,6 @@ export const accessoryStencil = createStencil({ [iconPart]: { [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm, }, - '&:has([data-variant="outline"])': { - borderWidth: px2rem(1), - borderStyle: 'solid', - borderColor: system.legacy.color.border.default, - }, }), extraLarge: ({iconPart}) => ({ width: system.legacy.size.md, @@ -117,11 +111,6 @@ export const accessoryStencil = createStencil({ [iconPart]: { [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md, }, - '&:has([data-variant="outline"])': { - borderWidth: px2rem(1), - borderStyle: 'solid', - borderColor: system.legacy.color.border.default, - }, }), }, }, diff --git a/modules/labs-react/accessory/lib/AccessoryIcon.tsx b/modules/labs-react/accessory/lib/AccessoryIcon.tsx index d1aa4872c0..c2efa21ba6 100644 --- a/modules/labs-react/accessory/lib/AccessoryIcon.tsx +++ b/modules/labs-react/accessory/lib/AccessoryIcon.tsx @@ -1,6 +1,6 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; -import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {accessoryStencil} from './Accessory'; @@ -93,14 +93,18 @@ export const accessoryIconStencil = createStencil({ system.legacy.color.fg.danger.strong ), orange: variantFill(base.legacy.orangeA50, base.legacy.orange700), - outline: ({iconColor, tileBackground}) => - variantFill( + outline: ({iconColor, tileBackground}) => ({ + ...variantFill( system.legacy.color.surface.transparent, base.legacy.slate800 )({ iconColor, tileBackground, }), + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }), }, }, }); @@ -128,7 +132,6 @@ export const AccessoryIcon = createComponent('span')({ }) )} {...accessoryStencil.parts.icon} - data-variant={variant} role={elemProps.role ?? (accessibleName ? 'img' : undefined)} aria-hidden={elemProps['aria-hidden'] ?? (accessibleName ? undefined : true)} /> From 722c7e866b5ede8ed9a51319e08f6d902c5ae826 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Tue, 6 Oct 2026 13:56:01 -0600 Subject: [PATCH 03/13] fix: Update components --- cypress/component/Accessory.spec.tsx | 30 ++-- modules/labs-react/accessory/README.md | 3 +- modules/labs-react/accessory/index.ts | 3 +- .../labs-react/accessory/lib/Accessory.tsx | 91 +++++------ .../accessory/lib/AccessoryFile.tsx | 131 ++++++++++++++++ .../accessory/lib/AccessoryIcon.tsx | 143 ++++++++--------- .../accessory/lib/AccessoryImage.tsx | 97 ------------ .../accessory/lib/AccessoryMedia.tsx | 148 ++++++++++++++++++ .../accessory/spec/Accessory.spec.tsx | 96 ++++++------ .../labs-react/accessory/spec/SSR.spec.tsx | 13 +- .../accessory/stories/Accessory.mdx | 66 ++++---- .../accessory/stories/Accessory.stories.ts | 16 +- .../stories/examples/AccessibleName.tsx | 8 - .../accessory/stories/examples/Basic.tsx | 34 +++- .../accessory/stories/examples/Custom.tsx | 20 +-- .../stories/examples/CustomColor.tsx | 38 ++--- .../accessory/stories/examples/File.tsx | 30 ++++ .../accessory/stories/examples/Image.tsx | 7 - .../accessory/stories/examples/Media.tsx | 5 + .../accessory/stories/examples/RTL.tsx | 6 +- .../accessory/stories/examples/Sizes.tsx | 6 +- .../accessory/stories/examples/Variants.tsx | 6 +- .../accessory/stories/testing.stories.tsx | 45 ++++-- 23 files changed, 637 insertions(+), 405 deletions(-) create mode 100644 modules/labs-react/accessory/lib/AccessoryFile.tsx delete mode 100644 modules/labs-react/accessory/lib/AccessoryImage.tsx create mode 100644 modules/labs-react/accessory/lib/AccessoryMedia.tsx delete mode 100644 modules/labs-react/accessory/stories/examples/AccessibleName.tsx create mode 100644 modules/labs-react/accessory/stories/examples/File.tsx delete mode 100644 modules/labs-react/accessory/stories/examples/Image.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Media.tsx diff --git a/cypress/component/Accessory.spec.tsx b/cypress/component/Accessory.spec.tsx index 320fc1ea3c..4642196407 100644 --- a/cypress/component/Accessory.spec.tsx +++ b/cypress/component/Accessory.spec.tsx @@ -1,8 +1,8 @@ -import {AccessibleName} from '../../modules/labs-react/accessory/stories/examples/AccessibleName'; import {Basic} from '../../modules/labs-react/accessory/stories/examples/Basic'; import {Custom} from '../../modules/labs-react/accessory/stories/examples/Custom'; import {CustomColor} from '../../modules/labs-react/accessory/stories/examples/CustomColor'; -import {Image} from '../../modules/labs-react/accessory/stories/examples/Image'; +import {File} from '../../modules/labs-react/accessory/stories/examples/File'; +import {Media} from '../../modules/labs-react/accessory/stories/examples/Media'; import {RTL} from '../../modules/labs-react/accessory/stories/examples/RTL'; import {Sizes} from '../../modules/labs-react/accessory/stories/examples/Sizes'; import {Variants} from '../../modules/labs-react/accessory/stories/examples/Variants'; @@ -16,7 +16,7 @@ describe('Accessory', () => { }); }); - [Basic, Image, Custom, CustomColor, Sizes, Variants, AccessibleName, RTL].forEach(Example => { + [Basic, Media, File, Custom, CustomColor, Sizes, Variants, RTL].forEach(Example => { context(`given the ${Example.name} story is rendered`, () => { beforeEach(() => { cy.mount(); @@ -28,23 +28,13 @@ describe('Accessory', () => { }); }); - context('given the Accessible Name story is rendered', () => { + context('given the Media story is rendered', () => { beforeEach(() => { - cy.mount(); + cy.mount(); }); - it('should expose the icon name', () => { - cy.findByRole('img', {name: 'Complete'}).should('be.visible'); - }); - }); - - context('given the Image story is rendered', () => { - beforeEach(() => { - cy.mount(); - }); - - it('should expose the image name', () => { - cy.findByRole('img', {name: 'Random photo'}).should('be.visible'); + it('should render the image', () => { + cy.get('img[alt="Random photo"]').should('be.visible'); }); }); @@ -53,9 +43,9 @@ describe('Accessory', () => { cy.mount(); }); - it('should expose both background images', () => { - cy.findByRole('img', {name: 'Three dark spheres'}).should('be.visible'); - cy.findByRole('img', {name: 'Three dark spheres, contained'}).should('be.visible'); + it('should render both images', () => { + cy.get('img[alt="Three dark spheres"]').should('be.visible'); + cy.get('img[alt="Three dark spheres, contained"]').should('be.visible'); }); }); }); diff --git a/modules/labs-react/accessory/README.md b/modules/labs-react/accessory/README.md index d0d85658d4..4b38eb5b52 100644 --- a/modules/labs-react/accessory/README.md +++ b/modules/labs-react/accessory/README.md @@ -4,7 +4,8 @@ LABS: Alpha This component is work in progress and currently in prerelease. -A presentational tile for a leading visual. Renders an icon or an image. +A presentational tile shell for a leading visual. Prefer `AccessoryIcon`, `AccessoryFile`, or +`AccessoryMedia`. View the [documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs) diff --git a/modules/labs-react/accessory/index.ts b/modules/labs-react/accessory/index.ts index eb004ae2e0..dd04d65bfc 100644 --- a/modules/labs-react/accessory/index.ts +++ b/modules/labs-react/accessory/index.ts @@ -1,3 +1,4 @@ export * from './lib/Accessory'; +export * from './lib/AccessoryFile'; export * from './lib/AccessoryIcon'; -export * from './lib/AccessoryImage'; +export * from './lib/AccessoryMedia'; diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 456a83ef63..f8d654aa12 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -3,9 +3,6 @@ import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; import {base, component, system} from '@workday/canvas-tokens-web'; -import {AccessoryIcon, accessoryIconStencil} from './AccessoryIcon'; -import {AccessoryImage} from './AccessoryImage'; - /** * The size of an `Accessory` tile. * @@ -19,9 +16,8 @@ export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extra export interface AccessoryProps extends CSProps { /** - * The size of the tile. `Accessory.Icon` glyph size follows the tile: 10px, 12px, 16px, 18px, - * and 20px from `extraSmall` to `extraLarge`. Variant fills are painted at `medium` and above. - * `small` and `extraSmall` stay transparent unless `Accessory.Icon` sets `background`. + * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 10px, + * 12px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`. * * * `extraSmall` — 16px * * `small` — 20px @@ -32,15 +28,34 @@ export interface AccessoryProps extends CSProps { * @default 'extraLarge' */ size?: AccessorySize; + /** + * The color of the icon. When set, this overrides the icon color from `variant` on + * `AccessoryIcon`. Inherited by the icon `data-part` via a CSS variable. + */ + color?: string; + /** + * The background color of the icon tile. When set, this overrides the fill from `variant` and is + * painted at every size, including `small` and `extraSmall`. Inherited by the icon `data-part` + * via a CSS variable. + */ + background?: string; } +/** + * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon + * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or + * `AccessoryMedia`, which render this shell. + */ export const accessoryStencil = createStencil({ extends: cornerShapeStencil, + vars: { + iconColor: '', + tileBackground: '', + }, parts: { icon: 'accessory-icon', - image: 'accessory-image', }, - base: ({iconPart, imagePart}) => ({ + base: ({iconPart}) => ({ display: 'inline-flex', position: 'relative', alignItems: 'center', @@ -53,38 +68,29 @@ export const accessoryStencil = createStencil({ display: 'flex', alignItems: 'center', justifyContent: 'center', - zIndex: 1, - borderRadius: cssVar(cornerShapeStencil.vars.shape), - cornerShape: 'superellipse(1.1)', - }, - [imagePart]: { - position: 'absolute', - inset: 0, - display: 'flex', - overflow: 'hidden', borderRadius: cssVar(cornerShapeStencil.vars.shape), cornerShape: 'superellipse(1.1)', }, }), modifiers: { size: { - extraSmall: ({iconPart}) => ({ + extraSmall: ({iconPart, tileBackground}) => ({ width: system.legacy.size.xxxs, height: system.legacy.size.xxxs, [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, [iconPart]: { [systemIconStencil.vars.size]: base.legacy.size125, - backgroundColor: cssVar(accessoryIconStencil.vars.tileBackground, 'transparent'), + backgroundColor: cssVar(tileBackground, 'transparent'), borderWidth: 0, }, }), - small: ({iconPart}) => ({ + small: ({iconPart, tileBackground}) => ({ width: system.legacy.size.xxs, height: system.legacy.size.xxs, [cornerShapeStencil.vars.shape]: base.legacy.size75, [iconPart]: { [systemIconStencil.vars.size]: base.legacy.size150, - backgroundColor: cssVar(accessoryIconStencil.vars.tileBackground, 'transparent'), + backgroundColor: cssVar(tileBackground, 'transparent'), borderWidth: 0, }, }), @@ -117,35 +123,30 @@ export const accessoryStencil = createStencil({ }); /** - * `Accessory` is a presentational tile for a leading visual. It owns the tile size, corner radius, - * and clipping. Place an `Accessory.Icon` or `Accessory.Image` inside it. + * `Accessory` is the presentational tile shell. It owns the tile size and corner radius. + * `AccessoryIcon`, `AccessoryFile`, and `AccessoryMedia` render this shell. Accessories are + * decorative and always hidden from assistive technology. * * ```tsx - * - * - * + * * ``` */ export const Accessory = createComponent('span')({ displayName: 'Accessory', - Component: ({size = 'extraLarge', ...elemProps}: AccessoryProps, ref, Element) => { - return ; - }, - subComponents: { - /** - * `Accessory.Icon` renders a system icon inside the tile. `variant` sets the tile fill and icon - * color. The glyph size comes from the `size` prop on `Accessory`. `color` and `background` - * override the variant colors. - * - * Pass `aria-label` when the icon conveys information that is not available in adjacent text. - * Omit it when the icon is decorative. - */ - Icon: AccessoryIcon, - /** - * `Accessory.Image` renders an image that fills the tile. Pass `icon` to center an - * `Accessory.Icon` on top of the image. `alt` is required. Use an empty string when the image - * is decorative. - */ - Image: AccessoryImage, + Component: ( + {size = 'extraLarge', color, background, ...elemProps}: AccessoryProps, + ref, + Element + ) => { + return ( + + ); }, }); diff --git a/modules/labs-react/accessory/lib/AccessoryFile.tsx b/modules/labs-react/accessory/lib/AccessoryFile.tsx new file mode 100644 index 0000000000..0a30386961 --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryFile.tsx @@ -0,0 +1,131 @@ +import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIconProps} from '@workday/canvas-kit-react/icon'; +import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import { + documentIcon, + fileIcon, + pdfIcon, + playCircleIcon, + stackIcon, + tableExpandIcon, + txtIcon, +} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +import {Accessory, AccessoryProps} from './Accessory'; +import {AccessoryIconGraphic, AccessoryIconVariant} from './AccessoryIcon'; + +/** + * The kind of file `AccessoryFile` represents. + */ +export type AccessoryFileType = + | 'pdf' + | 'spreadsheet' + | 'document' + | 'presentation' + | 'video' + | 'file' + | 'txt' + | 'empty'; + +export interface AccessoryFileProps extends AccessoryProps { + /** + * The file type. Colored types use an accent fill. `file` and `txt` use `surface.alt` with a + * `border.default` stroke. `empty` is a shimmer placeholder. `video` centers a play icon. + * @default 'file' + */ + type?: AccessoryFileType; +} + +const inverse = system.color.fg.inverse; +const altSurface = system.legacy.color.surface.alt.default; + +const fileIcons: Record< + Exclude, + { + icon: SystemIconProps['icon']; + background: string; + color: string; + variant?: AccessoryIconVariant; + } +> = { + pdf: {icon: pdfIcon, background: system.legacy.color.brand.accent.critical, color: inverse}, + spreadsheet: { + icon: tableExpandIcon, + background: system.legacy.color.brand.accent.positive, + color: inverse, + }, + document: {icon: documentIcon, background: system.legacy.color.accent.info, color: inverse}, + presentation: { + icon: stackIcon, + background: system.legacy.color.brand.accent.caution, + color: inverse, + }, + video: {icon: playCircleIcon, background: altSurface, color: inverse}, + file: { + icon: fileIcon, + background: altSurface, + color: system.color.fg.default, + variant: 'outline', + }, + txt: { + icon: txtIcon, + background: altSurface, + color: system.color.fg.default, + variant: 'outline', + }, +}; + +export const accessoryFileEmptyStencil = createStencil({ + base: { + position: 'absolute', + inset: 0, + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', + background: `linear-gradient(to left, ${system.legacy.color.surface.alt.strong}, ${system.legacy.color.surface.loading})`, + }, +}); + +/** + * `AccessoryFile` renders a file-type tile: PDF, spreadsheet, document, presentation, video, + * a generic file, text, or an empty placeholder. Colored types keep their fill at every size. + * Generic file and text use `surface.alt` and a `border.default` stroke. Always decorative. + */ +export const AccessoryFile = createComponent('span')({ + displayName: 'AccessoryFile', + Component: ( + {type = 'file', size = 'extraLarge', color, background, ...elemProps}: AccessoryFileProps, + ref, + Element + ) => { + if (type === 'empty') { + return ( + + + + ); + } + + const treatment = fileIcons[type]; + + return ( + + + + ); + }, +}); diff --git a/modules/labs-react/accessory/lib/AccessoryIcon.tsx b/modules/labs-react/accessory/lib/AccessoryIcon.tsx index c2efa21ba6..4fba940f99 100644 --- a/modules/labs-react/accessory/lib/AccessoryIcon.tsx +++ b/modules/labs-react/accessory/lib/AccessoryIcon.tsx @@ -1,12 +1,12 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; -import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; -import {accessoryStencil} from './Accessory'; +import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; /** - * The color treatment of `Accessory.Icon`. + * The color treatment of `AccessoryIcon`. */ export type AccessoryIconVariant = | 'grey' @@ -19,61 +19,32 @@ export type AccessoryIconVariant = | 'orange' | 'outline'; -export interface AccessoryIconProps extends CSProps { +export interface AccessoryIconProps extends AccessoryProps { /** * The icon to display from `@workday/canvas-system-icons-web`. */ icon: SystemIconProps['icon']; /** - * The color treatment of the icon and, at `medium` and above, the tile fill. + * The color treatment of the icon and, at `medium` and above, the tile fill. `color` and + * `background` from `Accessory` override these. Variant fills stay hidden at `small` and + * `extraSmall` unless `background` is set. * @default 'grey' */ variant?: AccessoryIconVariant; - /** - * The color of the icon. When set, this overrides the icon color from `variant`. - */ - color?: string; - /** - * The background color of the tile. When set, this overrides the fill from `variant` and is - * painted at every size, including `small` and `extraSmall`. - */ - background?: string; - /** - * The accessible name of the icon. When set, the tile is exposed as an image with this name. - * Omit it when the icon is decorative. - */ - 'aria-label'?: string; - /** - * Overrides the role of the tile. When `aria-label` is set and this is omitted, the tile uses - * `img`. - */ - role?: string; - /** - * Hides the tile from assistive technology. Decorative icons are hidden unless this is set. - */ - 'aria-hidden'?: boolean; } -const variantFill = - (backgroundColor: string, iconColor: string) => - ({ - iconColor: iconColorVar = '', - tileBackground = '', - }: { - iconColor?: string; - tileBackground?: string; - }) => ({ - backgroundColor: cssVar(tileBackground, backgroundColor), - [systemIconStencil.vars.color]: cssVar(iconColorVar, iconColor), - }); +const variantFill = (backgroundColor: string, iconColor: string) => ({ + // Prefer overrides set on the `Accessory` shell (inherited CSS variables). + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, backgroundColor), + [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor, iconColor), +}); export const accessoryIconStencil = createStencil({ extends: systemIconStencil, - vars: { - iconColor: '', - tileBackground: '', + base: { + // Inherit optional `color` from the `Accessory` shell when no variant sets a fallback. + [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor), }, - base: {}, modifiers: { variant: { grey: variantFill(system.legacy.color.surface.alt.strong, base.legacy.slate800), @@ -93,48 +64,78 @@ export const accessoryIconStencil = createStencil({ system.legacy.color.fg.danger.strong ), orange: variantFill(base.legacy.orangeA50, base.legacy.orange700), - outline: ({iconColor, tileBackground}) => ({ - ...variantFill( - system.legacy.color.surface.transparent, - base.legacy.slate800 - )({ - iconColor, - tileBackground, - }), + outline: { + ...variantFill(system.legacy.color.surface.transparent, base.legacy.slate800), borderWidth: px2rem(1), borderStyle: 'solid', borderColor: system.legacy.color.border.default, - }), + }, }, }, }); -export const AccessoryIcon = createComponent('span')({ - displayName: 'Accessory.Icon', - Component: ( - {icon, variant = 'grey', color, background, ...elemProps}: AccessoryIconProps, - ref, - Element - ) => { - const accessibleName = elemProps['aria-label']; +export interface AccessoryIconGraphicProps { + /** + * The icon to display from `@workday/canvas-system-icons-web`. + */ + icon: SystemIconProps['icon']; + /** + * The color treatment of the icon and tile fill. + */ + variant?: AccessoryIconVariant; +} +/** + * Icon graphic without a tile shell. Used inside `AccessoryFile` and `AccessoryMedia`. Glyph size, + * color, and fill overrides come from the parent `Accessory` via the icon `data-part` and stencil + * vars. + */ +export const AccessoryIconGraphic = createComponent('span')({ + displayName: 'AccessoryIconGraphic', + Component: ({icon, variant, ...elemProps}: AccessoryIconGraphicProps, ref, Element) => { return ( ); }, }); + +/** + * `AccessoryIcon` renders a system icon in an accessory tile. `variant` sets the tile fill and + * icon color. `color` and `background` on the shared `Accessory` props override the variant. The + * glyph size comes from `size` on `Accessory` through the icon `data-part`. Always decorative. + */ +export const AccessoryIcon = createComponent('span')({ + displayName: 'AccessoryIcon', + Component: ( + { + icon, + size = 'extraLarge', + variant = 'grey', + color, + background, + ...elemProps + }: AccessoryIconProps, + ref, + Element + ) => { + return ( + + + + ); + }, +}); diff --git a/modules/labs-react/accessory/lib/AccessoryImage.tsx b/modules/labs-react/accessory/lib/AccessoryImage.tsx deleted file mode 100644 index 516b4f059f..0000000000 --- a/modules/labs-react/accessory/lib/AccessoryImage.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import {ImgHTMLAttributes} from 'react'; - -import {createComponent} from '@workday/canvas-kit-react/common'; -import {SystemIconProps} from '@workday/canvas-kit-react/icon'; -import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; -import {system} from '@workday/canvas-tokens-web'; - -import {accessoryStencil} from './Accessory'; -import {AccessoryIcon} from './AccessoryIcon'; - -export interface AccessoryImageProps - extends CSProps, - Omit, 'color' | 'children'> { - /** - * The URL of the image. - */ - src: string; - /** - * The alternative text for the image. Use an empty string when the image is decorative and the - * meaning is available in adjacent text. - */ - alt: string; - /** - * How the image is resized to fit the tile. - * @default 'cover' - */ - objectFit?: 'contain' | 'cover'; - /** - * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When - * set, `Accessory.Image` also renders `Accessory.Icon`. The icon is decorative. - */ - icon?: SystemIconProps['icon']; - /** - * The color of the icon. Used when `icon` is set. - * @default `system.color.fg.inverse` - */ - color?: string; - /** - * The background color behind the image. Visible when the image does not cover the tile, such as - * `objectFit="contain"`. - * @default `system.legacy.color.surface.alt.default` - */ - background?: string; -} - -export const accessoryImageStencil = createStencil({ - vars: { - background: '', - }, - base: ({background}) => ({ - width: '100%', - height: '100%', - objectFit: 'cover', - backgroundColor: cssVar(background, system.legacy.color.surface.alt.default), - }), - modifiers: { - objectFit: { - cover: { - objectFit: 'cover', - }, - contain: { - objectFit: 'contain', - }, - }, - }, -}); - -export const AccessoryImage = createComponent('img')({ - displayName: 'Accessory.Image', - Component: ( - { - src, - alt, - objectFit = 'cover', - icon, - color = system.color.fg.inverse, - background, - ...elemProps - }: AccessoryImageProps, - ref, - Element - ) => { - return ( - <> - - {icon && } - - ); - }, -}); diff --git a/modules/labs-react/accessory/lib/AccessoryMedia.tsx b/modules/labs-react/accessory/lib/AccessoryMedia.tsx new file mode 100644 index 0000000000..81d6e101e4 --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryMedia.tsx @@ -0,0 +1,148 @@ +import React from 'react'; + +import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIconProps} from '@workday/canvas-kit-react/icon'; +import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +import {Accessory, AccessoryProps} from './Accessory'; +import {AccessoryIconGraphic} from './AccessoryIcon'; + +export interface AccessoryMediaProps extends AccessoryProps { + /** + * The URL of the image. + */ + src: string; + /** + * The alternative text for the image. Accessories are decorative, so the image is always hidden + * from assistive technology. Prefer an empty string when adjacent text already names the media. + */ + alt: string; + /** + * How the image is resized to fit the tile. + * @default 'cover' + */ + objectFit?: 'contain' | 'cover'; + /** + * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When + * set, a scrim is painted under the icon for contrast. Uses `color` from `Accessory` for the + * glyph (`system.color.fg.inverse` by default). + */ + icon?: SystemIconProps['icon']; +} + +export const accessoryMediaStencil = createStencil({ + vars: { + background: '', + }, + parts: { + image: 'accessory-media-image', + }, + base: ({background, imagePart}) => ({ + backgroundColor: cssVar(background, system.legacy.color.surface.alt.default), + [imagePart]: { + position: 'absolute', + inset: 0, + width: '100%', + height: '100%', + objectFit: 'cover', + overflow: 'hidden', + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', + }, + }), + modifiers: { + imageLoaded: { + false: ({imagePart}) => ({ + [imagePart]: { + display: 'none', + }, + }), + true: {}, + }, + objectFit: { + cover: ({imagePart}) => ({ + [imagePart]: { + objectFit: 'cover', + }, + }), + contain: ({imagePart}) => ({ + [imagePart]: { + objectFit: 'contain', + }, + }), + }, + }, +}); + +export const accessoryMediaScrimStencil = createStencil({ + base: { + position: 'absolute', + inset: 0, + backgroundColor: system.legacy.color.surface.overlay.scrim, + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', + pointerEvents: 'none', + }, +}); + +/** + * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon + * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile + * background. Always decorative. + */ +export const AccessoryMedia = createComponent('span')({ + displayName: 'AccessoryMedia', + Component: ( + { + src, + alt, + size = 'extraLarge', + objectFit = 'cover', + icon, + color = system.color.fg.inverse, + background, + ...elemProps + }: AccessoryMediaProps, + ref, + Element + ) => { + // Track the loaded URL so a `src` change hides the image again without a mount effect that + // can race a synchronous `onLoad` (cached images and data URLs). + const [loadedSrc, setLoadedSrc] = React.useState(null); + const imageRef = React.useRef(null); + const imageLoaded = loadedSrc === src; + + React.useEffect(() => { + const image = imageRef.current; + if (image?.complete && image.naturalWidth > 0) { + setLoadedSrc(src); + } + }, [src]); + + return ( + + {alt} setLoadedSrc(src)} + src={src} + aria-hidden={true} + {...accessoryMediaStencil.parts.image} + /> + {icon && ( + <> + + + + )} + + ); + }, +}); diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx index 33ce3d7a54..d631241d7a 100644 --- a/modules/labs-react/accessory/spec/Accessory.spec.tsx +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -1,88 +1,84 @@ -import {render, screen} from '@testing-library/react'; +import {fireEvent, render, screen} from '@testing-library/react'; import * as React from 'react'; -import {checkIcon} from '@workday/canvas-system-icons-web'; +import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; import {Accessory} from '../lib/Accessory'; +import {AccessoryFile} from '../lib/AccessoryFile'; +import {AccessoryIcon} from '../lib/AccessoryIcon'; +import {AccessoryMedia} from '../lib/AccessoryMedia'; const imageSrc = 'data:image/svg+xml,' + encodeURIComponent(''); describe('Accessory', () => { verifyComponent(Accessory, {}); - verifyComponent(Accessory.Icon, {props: {icon: checkIcon}}); - verifyComponent(Accessory.Image, {props: {src: imageSrc, alt: 'Preview', icon: checkIcon}}); - - describe('when the icon has no accessible name', () => { - it('should hide the icon from assistive technology', () => { - render( - - - - ); + verifyComponent(AccessoryIcon, {props: {icon: checkIcon}}); + verifyComponent(AccessoryMedia, {props: {src: imageSrc, alt: 'Preview', icon: checkIcon}}); + verifyComponent(AccessoryFile, {}); + + describe('when an icon is rendered', () => { + it('should hide the accessory from assistive technology', () => { + const {container} = render(); expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument(); + expect(container.querySelector('svg')).toBeInTheDocument(); }); }); - describe('when the icon has an accessible name', () => { - it('should expose the icon as an image', () => { - render( - - - - ); + describe('when media has loaded', () => { + it('should keep the image decorative and show the photo', () => { + const {container} = render(); + const img = container.querySelector('img')!; - expect(screen.getByRole('img', {name: 'Complete'})).toBeInTheDocument(); + fireEvent.load(img); + + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(img).toHaveAttribute('aria-hidden', 'true'); }); }); - describe('when an image has alternative text', () => { - it('should expose that text as the image name', () => { - render( - - - + describe('when media has an icon', () => { + it('should keep the image and icon decorative', () => { + const {container} = render( + ); - expect(screen.getByRole('img', {name: 'Four dark spheres'})).toBeInTheDocument(); + fireEvent.load(container.querySelector('img')!); + + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(container.querySelector('svg')).toBeInTheDocument(); }); }); - describe('when a custom tile has a background image and an icon', () => { - it('should name the image and keep the icon decorative', () => { - render( - - - - ); + describe('when a file type is rendered', () => { + it('should hide the accessory from assistive technology', () => { + const {container} = render(); - expect(screen.getByRole('img', {name: 'Team photo'})).toBeInTheDocument(); - expect(screen.getAllByRole('img')).toHaveLength(1); + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(container.querySelector('svg')).toBeInTheDocument(); }); }); - describe('when a custom tile is decorative', () => { - it('should hide the image from assistive technology', () => { - render( - - - - ); + describe('when the file is empty', () => { + it('should render a placeholder without an icon', () => { + const {container} = render(); - expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(container.querySelector('svg')).not.toBeInTheDocument(); }); }); - describe('when an image is decorative', () => { - it('should hide the image from assistive technology', () => { - render( - - - + describe('when media has a play icon', () => { + it('should keep the preview and play icon decorative', () => { + const {container} = render( + ); + fireEvent.load(container.querySelector('img')!); + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + expect(container.querySelector('svg')).toBeInTheDocument(); }); }); }); diff --git a/modules/labs-react/accessory/spec/SSR.spec.tsx b/modules/labs-react/accessory/spec/SSR.spec.tsx index dee20c8eb5..165e4d7229 100644 --- a/modules/labs-react/accessory/spec/SSR.spec.tsx +++ b/modules/labs-react/accessory/spec/SSR.spec.tsx @@ -5,7 +5,9 @@ import {renderToString} from 'react-dom/server'; import {checkIcon} from '@workday/canvas-system-icons-web'; -import {Accessory} from '../lib/Accessory'; +import {AccessoryFile} from '../lib/AccessoryFile'; +import {AccessoryIcon} from '../lib/AccessoryIcon'; +import {AccessoryMedia} from '../lib/AccessoryMedia'; const imageSrc = 'data:image/svg+xml,' + encodeURIComponent(''); @@ -14,10 +16,11 @@ describe('Accessory', () => { it('should render on a server without crashing', () => { const ssrRender = () => renderToString( - - - - + <> + + + + ); expect(ssrRender).not.toThrow(); diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 2c1ce33ae5..df4d4ac4b3 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -3,11 +3,11 @@ import {Meta} from '@storybook/blocks'; import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs'; import AccessoryStoriesMeta from './Accessory.stories'; -import {AccessibleName} from './examples/AccessibleName'; import {Basic} from './examples/Basic'; import {Custom} from './examples/Custom'; import {CustomColor} from './examples/CustomColor'; -import {Image} from './examples/Image'; +import {File} from './examples/File'; +import {Media} from './examples/Media'; import {RTL} from './examples/RTL'; import {Sizes} from './examples/Sizes'; import {Variants} from './examples/Variants'; @@ -16,9 +16,10 @@ import {Variants} from './examples/Variants'; # Canvas Kit Accessory -`Accessory` is a presentational tile for the leading visual in a row. It renders an icon or an -image. Pass `icon` to `Accessory.Image` to center an icon on the image. It does not handle clicks -or focus. +`Accessory` is a presentational tile shell for a leading visual. Prefer `AccessoryIcon`, +`AccessoryFile`, or `AccessoryMedia`, which each extend the shared `Accessory` props (`size`, +`color`, `background`) and render that shell. Accessories are decorative and always hidden from +assistive technology. They do not handle clicks or focus. ## Installation @@ -30,46 +31,52 @@ yarn add @workday/canvas-kit-labs-react ### Basic Example -`Accessory` owns the tile size and corner radius. `Accessory.Icon` renders a system icon. With no -`aria-label`, the icon is decorative. +`AccessoryIcon` renders a system icon in an accessory tile. Glyph size follows `size` through the +icon `data-part` on `accessoryStencil`. -### Image +### Media -`Accessory.Image` fills the tile with an image. `alt` names the image. Use `alt=""` when the image -is decorative. +`AccessoryMedia` fills the tile with an image. The image stays hidden until it loads. Pass `icon` +to center a glyph on a contrast scrim. - + -### Image with an icon +### File -Pass `icon` to `Accessory.Image` and it renders `Accessory.Icon` centered on the image. `objectFit` -is `cover` by default. `contain` fits the whole image inside the tile. The icon is decorative. -`alt` names the image. +`AccessoryFile` renders a file type through the shared icon graphic. Colored types keep their accent +fill at every size. `file` and `txt` use `surface.alt` and a default border. `empty` is a shimmer +placeholder. + + + +### Media with an icon + +Pass `icon` to `AccessoryMedia` to center a decorative icon on a contrast scrim. `objectFit` is +`cover` by default. `contain` fits the whole image inside the tile. ### Custom color -`variant` is a stencil modifier on `Accessory.Icon`. Tile size and glyph size are modifiers on -`Accessory`, and the glyph size is applied through the icon `data-part`. `color` overrides the icon -color from `variant`. `background` overrides the tile fill and is painted at every size. The icon is -smaller than the tile: `extraSmall` is 10px, `small` is 12px, `medium` is 16px, `large` is 18px, -and `extraLarge` is 20px. Variant fills stay hidden at `small` and `extraSmall` unless `background` -is set. The same `color` and `background` props apply when `icon` is passed to `Accessory.Image`. +`variant` is a stencil modifier on `AccessoryIcon`. `color` and `background` are shared `Accessory` +props and override the variant through stencil vars on the shell. Glyph size follows `size` via the +icon `data-part`. The icon is smaller than the tile: `extraSmall` is 10px, `small` is 12px, +`medium` is 16px, `large` is 18px, and `extraLarge` is 20px. Variant fills stay hidden at `small` +and `extraSmall` unless `background` is set. ### Sizes -`size` is a prop on `Accessory`. The stencil sets the tile and, through `data-part`, the icon glyph. `extraLarge` (40px) is the default. +`size` is a shared `Accessory` prop on each component. `extraLarge` (40px) is the default. ### Variants -`variant` is set on `Accessory.Icon`. It pairs an icon color with a tile fill. The fill is painted +`variant` is set on `AccessoryIcon`. It pairs an icon color with a tile fill. The fill is painted at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those larger sizes. @@ -83,17 +90,8 @@ mirroring rules. ### Accessibility -`Accessory` is presentational. It is not a button and does not take click or keyboard handlers. - -- Omit `aria-label` on `Accessory.Icon` when text next to the tile already names the item. The icon - is then hidden from assistive technology. -- Pass `aria-label` when the icon is the only source of that information. The tile is exposed as an - image with that name. - - - -- `Accessory.Image` uses the native `alt` on the image. An empty `alt` marks the image as - decorative. An `icon` on `Accessory.Image` is decorative. +Accessory components are presentational and always `aria-hidden`. Name the item in adjacent text +instead of on the accessory. They are not buttons and do not take click or keyboard handlers. ## Component API diff --git a/modules/labs-react/accessory/stories/Accessory.stories.ts b/modules/labs-react/accessory/stories/Accessory.stories.ts index c4162dcd72..015e50be9a 100644 --- a/modules/labs-react/accessory/stories/Accessory.stories.ts +++ b/modules/labs-react/accessory/stories/Accessory.stories.ts @@ -3,11 +3,11 @@ import {Meta, StoryObj} from '@storybook/react'; import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; import mdxDoc from './Accessory.mdx'; -import {AccessibleName as AccessibleNameExample} from './examples/AccessibleName'; import {Basic as BasicExample} from './examples/Basic'; import {Custom as CustomExample} from './examples/Custom'; import {CustomColor as CustomColorExample} from './examples/CustomColor'; -import {Image as ImageExample} from './examples/Image'; +import {File as FileExample} from './examples/File'; +import {Media as MediaExample} from './examples/Media'; import {RTL as RTLExample} from './examples/RTL'; import {Sizes as SizesExample} from './examples/Sizes'; import {Variants as VariantsExample} from './examples/Variants'; @@ -29,8 +29,12 @@ export const Basic: Story = { render: BasicExample, }; -export const Image: Story = { - render: ImageExample, +export const Media: Story = { + render: MediaExample, +}; + +export const File: Story = { + render: FileExample, }; export const Custom: Story = { @@ -49,10 +53,6 @@ export const Variants: Story = { render: VariantsExample, }; -export const AccessibleName: Story = { - render: AccessibleNameExample, -}; - export const RTL: Story = { render: RTLExample, }; diff --git a/modules/labs-react/accessory/stories/examples/AccessibleName.tsx b/modules/labs-react/accessory/stories/examples/AccessibleName.tsx deleted file mode 100644 index 16c0c59855..0000000000 --- a/modules/labs-react/accessory/stories/examples/AccessibleName.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; -import {checkIcon} from '@workday/canvas-system-icons-web'; - -export const AccessibleName = () => ( - - - -); diff --git a/modules/labs-react/accessory/stories/examples/Basic.tsx b/modules/labs-react/accessory/stories/examples/Basic.tsx index 9f0fd9ebbc..749897e43d 100644 --- a/modules/labs-react/accessory/stories/examples/Basic.tsx +++ b/modules/labs-react/accessory/stories/examples/Basic.tsx @@ -1,8 +1,36 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {css} from '@emotion/react'; + +import {Accessory, AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory'; +import {createStencil, createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const calendarAccessoryStencil = createStencil({ + parts: { + month: 'month', + day: 'day', + }, + base: ({monthPart, dayPart}) => ({ + display: 'flex', + flexDirection: 'column', + backgroundColor: system.color.surface.alt.default, + border: `1px solid ${system.color.border.default}`, + alignItems: 'center', + lineHeight: system.lineHeight.subtext.md, + [monthPart]: { + fontSize: system.fontSize.subtext.sm, + color: system.color.fg.danger.default, + fontWeight: system.fontWeight.medium, + }, + [dayPart]: { + fontSize: system.fontSize.subtext.lg, + }, + }), +}); export const Basic = () => ( - - + +
Aug
+
14
 ); diff --git a/modules/labs-react/accessory/stories/examples/Custom.tsx b/modules/labs-react/accessory/stories/examples/Custom.tsx index 05678e15ce..2edf13c58f 100644 --- a/modules/labs-react/accessory/stories/examples/Custom.tsx +++ b/modules/labs-react/accessory/stories/examples/Custom.tsx @@ -1,4 +1,4 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {AccessoryMedia} from '@workday/canvas-kit-labs-react/accessory'; import {createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -22,16 +22,12 @@ const photo = export const Custom = () => (
- - - - - - + +
); diff --git a/modules/labs-react/accessory/stories/examples/CustomColor.tsx b/modules/labs-react/accessory/stories/examples/CustomColor.tsx index 1ba6dfa86e..9be2269769 100644 --- a/modules/labs-react/accessory/stories/examples/CustomColor.tsx +++ b/modules/labs-react/accessory/stories/examples/CustomColor.tsx @@ -1,4 +1,8 @@ -import {Accessory, AccessorySize} from '@workday/canvas-kit-labs-react/accessory'; +import { + AccessoryIcon, + AccessoryMedia, + AccessorySize, +} from '@workday/canvas-kit-labs-react/accessory'; import {Subtext} from '@workday/canvas-kit-react/text'; import {createStyles, px2rem} from '@workday/canvas-kit-styling'; import {documentIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; @@ -29,23 +33,21 @@ export const CustomColor = () => ( {sizes.map(size => (
{size} - - - - - - + +
))} diff --git a/modules/labs-react/accessory/stories/examples/File.tsx b/modules/labs-react/accessory/stories/examples/File.tsx new file mode 100644 index 0000000000..6f5dce3dd1 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/File.tsx @@ -0,0 +1,30 @@ +import {AccessoryFile, AccessoryFileType} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, + flexWrap: 'wrap', +}); + +const types: AccessoryFileType[] = [ + 'pdf', + 'spreadsheet', + 'document', + 'presentation', + 'video', + 'file', + 'txt', + 'empty', +]; + +export const File = () => ( +
+ {types.map(type => ( + + ))} + +
+); diff --git a/modules/labs-react/accessory/stories/examples/Image.tsx b/modules/labs-react/accessory/stories/examples/Image.tsx deleted file mode 100644 index 1cc31b2db3..0000000000 --- a/modules/labs-react/accessory/stories/examples/Image.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; - -export const Image = () => ( - - - -); diff --git a/modules/labs-react/accessory/stories/examples/Media.tsx b/modules/labs-react/accessory/stories/examples/Media.tsx new file mode 100644 index 0000000000..5a06b8e744 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Media.tsx @@ -0,0 +1,5 @@ +import {AccessoryMedia} from '@workday/canvas-kit-labs-react/accessory'; + +export const Media = () => ( + +); diff --git a/modules/labs-react/accessory/stories/examples/RTL.tsx b/modules/labs-react/accessory/stories/examples/RTL.tsx index 668ca68af3..b5f8e0a96a 100644 --- a/modules/labs-react/accessory/stories/examples/RTL.tsx +++ b/modules/labs-react/accessory/stories/examples/RTL.tsx @@ -1,4 +1,4 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory'; import {Subtext} from '@workday/canvas-kit-react/text'; import {createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; @@ -12,9 +12,7 @@ const rowStyles = createStyles({ export const RTL = () => (
- - - + مكتمل
); diff --git a/modules/labs-react/accessory/stories/examples/Sizes.tsx b/modules/labs-react/accessory/stories/examples/Sizes.tsx index 6dce51c674..8e1ea0aff7 100644 --- a/modules/labs-react/accessory/stories/examples/Sizes.tsx +++ b/modules/labs-react/accessory/stories/examples/Sizes.tsx @@ -1,4 +1,4 @@ -import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; +import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory'; import {Subtext} from '@workday/canvas-kit-react/text'; import {createStyles, px2rem} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; @@ -27,9 +27,7 @@ export const Sizes = () => ( {sizes.map(size => (
{size} - - - +
))} diff --git a/modules/labs-react/accessory/stories/examples/Variants.tsx b/modules/labs-react/accessory/stories/examples/Variants.tsx index b7f645f150..e284e7bae5 100644 --- a/modules/labs-react/accessory/stories/examples/Variants.tsx +++ b/modules/labs-react/accessory/stories/examples/Variants.tsx @@ -1,4 +1,4 @@ -import {Accessory, AccessoryIconVariant} from '@workday/canvas-kit-labs-react/accessory'; +import {AccessoryIcon, AccessoryIconVariant} from '@workday/canvas-kit-labs-react/accessory'; import {createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -25,9 +25,7 @@ const variants: AccessoryIconVariant[] = [ export const Variants = () => (
{variants.map(variant => ( - - - + ))}
); diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx index 13ecfebc7e..25b7644534 100644 --- a/modules/labs-react/accessory/stories/testing.stories.tsx +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -1,6 +1,9 @@ import { - Accessory, + AccessoryFile, + AccessoryFileType, + AccessoryIcon, AccessoryIconVariant, + AccessoryMedia, AccessorySize, } from '@workday/canvas-kit-labs-react/accessory'; import { @@ -12,7 +15,6 @@ import {checkIcon} from '@workday/canvas-system-icons-web'; export default { title: 'Testing/Labs/Accessory', - component: Accessory, parameters: { chromatic: { disable: false, @@ -32,6 +34,16 @@ const variants: AccessoryIconVariant[] = [ 'orange', 'outline', ]; +const fileTypes: AccessoryFileType[] = [ + 'pdf', + 'spreadsheet', + 'document', + 'presentation', + 'video', + 'file', + 'txt', + 'empty', +]; const photo = 'https://picsum.photos/seed/accessory/200/200'; @@ -45,16 +57,12 @@ export const AccessoryIconStates = () => ( size: sizes.map(size => ({value: size, label: size})), })} > - {props => ( - - - - )} + {props => } ); -export const AccessoryImageStates = () => ( +export const AccessoryMediaStates = () => ( ( className: [{label: 'Default', value: ''}], })} > - {props => ( - - - - )} + {props => } + + +); + +export const AccessoryFileStates = () => ( + + ({value: type, label: type})), + })} + columnProps={permutateProps({ + size: sizes.map(size => ({value: size, label: size})), + })} + > + {props => } ); From 68d8bc333d5c1b1a93853d82296748b6e6942eec Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Oct 2026 09:35:19 -0600 Subject: [PATCH 04/13] fix: Clean up file type --- .../labs-react/accessory/lib/Accessory.tsx | 4 +- .../accessory/lib/AccessoryFile.tsx | 163 +++++++++--------- .../accessory/lib/AccessoryIcon.tsx | 105 ++++++++--- .../accessory/spec/Accessory.spec.tsx | 8 - .../accessory/stories/Accessory.mdx | 11 +- .../accessory/stories/examples/Basic.tsx | 51 +++--- .../accessory/stories/examples/File.tsx | 1 - .../accessory/stories/testing.stories.tsx | 1 - 8 files changed, 194 insertions(+), 150 deletions(-) diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index f8d654aa12..37fa99a95c 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -79,7 +79,7 @@ export const accessoryStencil = createStencil({ height: system.legacy.size.xxxs, [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, [iconPart]: { - [systemIconStencil.vars.size]: base.legacy.size125, + [systemIconStencil.vars.size]: base.legacy.size200, backgroundColor: cssVar(tileBackground, 'transparent'), borderWidth: 0, }, @@ -89,7 +89,7 @@ export const accessoryStencil = createStencil({ height: system.legacy.size.xxs, [cornerShapeStencil.vars.shape]: base.legacy.size75, [iconPart]: { - [systemIconStencil.vars.size]: base.legacy.size150, + [systemIconStencil.vars.size]: base.legacy.size225, backgroundColor: cssVar(tileBackground, 'transparent'), borderWidth: 0, }, diff --git a/modules/labs-react/accessory/lib/AccessoryFile.tsx b/modules/labs-react/accessory/lib/AccessoryFile.tsx index 0a30386961..df99c75be4 100644 --- a/modules/labs-react/accessory/lib/AccessoryFile.tsx +++ b/modules/labs-react/accessory/lib/AccessoryFile.tsx @@ -1,9 +1,8 @@ -import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; -import {SystemIconProps} from '@workday/canvas-kit-react/icon'; -import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import {createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; +import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; import { documentIcon, - fileIcon, pdfIcon, playCircleIcon, stackIcon, @@ -12,8 +11,7 @@ import { } from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; -import {Accessory, AccessoryProps} from './Accessory'; -import {AccessoryIconGraphic, AccessoryIconVariant} from './AccessoryIcon'; +import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; /** * The kind of file `AccessoryFile` represents. @@ -25,71 +23,94 @@ export type AccessoryFileType = | 'presentation' | 'video' | 'file' - | 'txt' - | 'empty'; + | 'txt'; export interface AccessoryFileProps extends AccessoryProps { /** - * The file type. Colored types use an accent fill. `file` and `txt` use `surface.alt` with a - * `border.default` stroke. `empty` is a shimmer placeholder. `video` centers a play icon. + * The file type. Chooses the glyph and sets the tile fill and icon color through a stencil + * modifier. Colored types keep their accent fill at every size. `file` and `txt` use + * `surface.alt` with a `border.default` stroke. `video` uses `surface.alt` and an inverse icon. + * `color` and `background` override the type colors. * @default 'file' */ type?: AccessoryFileType; } -const inverse = system.color.fg.inverse; -const altSurface = system.legacy.color.surface.alt.default; - -const fileIcons: Record< - Exclude, - { - icon: SystemIconProps['icon']; - background: string; - color: string; - variant?: AccessoryIconVariant; - } -> = { - pdf: {icon: pdfIcon, background: system.legacy.color.brand.accent.critical, color: inverse}, - spreadsheet: { - icon: tableExpandIcon, - background: system.legacy.color.brand.accent.positive, - color: inverse, - }, - document: {icon: documentIcon, background: system.legacy.color.accent.info, color: inverse}, - presentation: { - icon: stackIcon, - background: system.legacy.color.brand.accent.caution, - color: inverse, +/** + * File-type treatment for `AccessoryFile`. Each `type` sets the tile fill and icon color. + * `outline` adds the default border used by `file` and `txt`. `color` and `background` on + * `Accessory` still override the type colors. + */ +export const accessoryFileStencil = createStencil({ + parts: { + icon: 'accessory-icon', }, - video: {icon: playCircleIcon, background: altSurface, color: inverse}, - file: { - icon: fileIcon, - background: altSurface, - color: system.color.fg.default, - variant: 'outline', + base: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground), + [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor), + }, + }), + modifiers: { + type: { + pdf: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.critical, + }, + spreadsheet: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.positive, + }, + document: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.info, + }, + presentation: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.caution, + }, + video: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, + }, + file: { + [accessoryStencil.vars.iconColor]: system.color.fg.default, + [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, + }, + txt: { + [accessoryStencil.vars.iconColor]: system.color.fg.default, + [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, + }, + }, + outline: { + true: ({iconPart}) => ({ + [iconPart]: { + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + }), + }, }, - txt: { - icon: txtIcon, - background: altSurface, - color: system.color.fg.default, - variant: 'outline', - }, -}; - -export const accessoryFileEmptyStencil = createStencil({ - base: { - position: 'absolute', - inset: 0, - borderRadius: cssVar(cornerShapeStencil.vars.shape), - cornerShape: 'superellipse(1.1)', - background: `linear-gradient(to left, ${system.legacy.color.surface.alt.strong}, ${system.legacy.color.surface.loading})`, + defaultModifiers: { + type: 'file', }, }); +const fileIcons: Record = { + pdf: pdfIcon, + spreadsheet: tableExpandIcon, + document: documentIcon, + presentation: stackIcon, + video: playCircleIcon, + file: documentIcon, + txt: txtIcon, +}; + /** - * `AccessoryFile` renders a file-type tile: PDF, spreadsheet, document, presentation, video, - * a generic file, text, or an empty placeholder. Colored types keep their fill at every size. - * Generic file and text use `surface.alt` and a `border.default` stroke. Always decorative. + * `AccessoryFile` renders a file-type tile. `type` chooses the glyph and sets the fill and icon + * color. Colored types keep their fill at every size. Generic file and text use `surface.alt` and + * a `border.default` stroke. Always decorative. */ export const AccessoryFile = createComponent('span')({ displayName: 'AccessoryFile', @@ -98,33 +119,19 @@ export const AccessoryFile = createComponent('span')({ ref, Element ) => { - if (type === 'empty') { - return ( - - - - ); - } - - const treatment = fileIcons[type]; - return ( - + ); }, diff --git a/modules/labs-react/accessory/lib/AccessoryIcon.tsx b/modules/labs-react/accessory/lib/AccessoryIcon.tsx index 4fba940f99..13732b6c31 100644 --- a/modules/labs-react/accessory/lib/AccessoryIcon.tsx +++ b/modules/labs-react/accessory/lib/AccessoryIcon.tsx @@ -33,12 +33,6 @@ export interface AccessoryIconProps extends AccessoryProps { variant?: AccessoryIconVariant; } -const variantFill = (backgroundColor: string, iconColor: string) => ({ - // Prefer overrides set on the `Accessory` shell (inherited CSS variables). - backgroundColor: cssVar(accessoryStencil.vars.tileBackground, backgroundColor), - [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor, iconColor), -}); - export const accessoryIconStencil = createStencil({ extends: systemIconStencil, base: { @@ -47,25 +41,86 @@ export const accessoryIconStencil = createStencil({ }, modifiers: { variant: { - grey: variantFill(system.legacy.color.surface.alt.strong, base.legacy.slate800), - green: variantFill(system.legacy.color.surface.success.strong, base.legacy.green800), - blue: variantFill( - system.legacy.color.surface.info.strong, - system.legacy.color.fg.info.strong - ), - purple: variantFill(base.legacy.purpleA50, base.legacy.purple700), - amber: variantFill( - system.legacy.color.surface.warning.strong, - system.legacy.color.fg.warning.strong - ), - magenta: variantFill(base.legacy.magentaA50, base.legacy.magenta800), - red: variantFill( - system.legacy.color.surface.danger.strong, - system.legacy.color.fg.danger.strong - ), - orange: variantFill(base.legacy.orangeA50, base.legacy.orange700), + grey: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.alt.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.slate800 + ), + }, + green: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.success.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.green800 + ), + }, + blue: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.info.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.info.strong + ), + }, + purple: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.purpleA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.purple700 + ), + }, + amber: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.warning.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.warning.strong + ), + }, + magenta: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.magentaA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.magenta800 + ), + }, + red: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.danger.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.danger.strong + ), + }, + orange: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.orangeA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.orange700 + ), + }, outline: { - ...variantFill(system.legacy.color.surface.transparent, base.legacy.slate800), + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.transparent + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.slate800 + ), borderWidth: px2rem(1), borderStyle: 'solid', borderColor: system.legacy.color.border.default, @@ -86,7 +141,7 @@ export interface AccessoryIconGraphicProps { } /** - * Icon graphic without a tile shell. Used inside `AccessoryFile` and `AccessoryMedia`. Glyph size, + * Icon graphic without a tile shell. Used inside `AccessoryMedia`. Glyph size, * color, and fill overrides come from the parent `Accessory` via the icon `data-part` and stencil * vars. */ diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx index d631241d7a..3b7970317e 100644 --- a/modules/labs-react/accessory/spec/Accessory.spec.tsx +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -61,14 +61,6 @@ describe('Accessory', () => { }); }); - describe('when the file is empty', () => { - it('should render a placeholder without an icon', () => { - const {container} = render(); - - expect(container.querySelector('svg')).not.toBeInTheDocument(); - }); - }); - describe('when media has a play icon', () => { it('should keep the preview and play icon decorative', () => { const {container} = render( diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index df4d4ac4b3..29bddcba79 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -31,8 +31,9 @@ yarn add @workday/canvas-kit-labs-react ### Basic Example -`AccessoryIcon` renders a system icon in an accessory tile. Glyph size follows `size` through the -icon `data-part` on `accessoryStencil`. +`Accessory` is only a tile shell — size and corner radius. It does not render a visual by itself. +Use a targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file +type, or `AccessoryMedia` for an image (optionally with an icon on a scrim). @@ -45,9 +46,9 @@ to center a glyph on a contrast scrim. ### File -`AccessoryFile` renders a file type through the shared icon graphic. Colored types keep their accent -fill at every size. `file` and `txt` use `surface.alt` and a default border. `empty` is a shimmer -placeholder. +`AccessoryFile` renders a file type through the shared icon graphic. `type` chooses the glyph and +is a stencil modifier for the fill and icon color. Colored types keep their accent fill at every +size. `file` and `txt` use `surface.alt` and a default border. diff --git a/modules/labs-react/accessory/stories/examples/Basic.tsx b/modules/labs-react/accessory/stories/examples/Basic.tsx index 749897e43d..5a50a8ed1b 100644 --- a/modules/labs-react/accessory/stories/examples/Basic.tsx +++ b/modules/labs-react/accessory/stories/examples/Basic.tsx @@ -1,36 +1,27 @@ -import {css} from '@emotion/react'; - -import {Accessory, AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory'; -import {createStencil, createStyles} from '@workday/canvas-kit-styling'; -import {checkIcon} from '@workday/canvas-system-icons-web'; +import { + AccessoryFile, + AccessoryIcon, + AccessoryMedia, +} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; -const calendarAccessoryStencil = createStencil({ - parts: { - month: 'month', - day: 'day', - }, - base: ({monthPart, dayPart}) => ({ - display: 'flex', - flexDirection: 'column', - backgroundColor: system.color.surface.alt.default, - border: `1px solid ${system.color.border.default}`, - alignItems: 'center', - lineHeight: system.lineHeight.subtext.md, - [monthPart]: { - fontSize: system.fontSize.subtext.sm, - color: system.color.fg.danger.default, - fontWeight: system.fontWeight.medium, - }, - [dayPart]: { - fontSize: system.fontSize.subtext.lg, - }, - }), +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, + flexWrap: 'wrap', }); export const Basic = () => ( - -
Aug
-
14
- +
+ + + +
); diff --git a/modules/labs-react/accessory/stories/examples/File.tsx b/modules/labs-react/accessory/stories/examples/File.tsx index 6f5dce3dd1..e1cf5670e4 100644 --- a/modules/labs-react/accessory/stories/examples/File.tsx +++ b/modules/labs-react/accessory/stories/examples/File.tsx @@ -17,7 +17,6 @@ const types: AccessoryFileType[] = [ 'video', 'file', 'txt', - 'empty', ]; export const File = () => ( diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx index 25b7644534..4df9b649dc 100644 --- a/modules/labs-react/accessory/stories/testing.stories.tsx +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -42,7 +42,6 @@ const fileTypes: AccessoryFileType[] = [ 'video', 'file', 'txt', - 'empty', ]; const photo = 'https://picsum.photos/seed/accessory/200/200'; From 8b33f44f016090450c978fe2771aeb4581e2e177 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Oct 2026 09:47:43 -0600 Subject: [PATCH 05/13] fix: Clean up icon --- .../labs-react/accessory/lib/Accessory.tsx | 3 +- .../accessory/lib/AccessoryIcon.tsx | 261 ++++++++++-------- .../accessory/lib/AccessoryMedia.tsx | 7 +- .../accessory/stories/Accessory.mdx | 4 + .../accessory/stories/examples/Custom.tsx | 65 ++++- 5 files changed, 203 insertions(+), 137 deletions(-) diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 37fa99a95c..1b87f88d60 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -55,7 +55,7 @@ export const accessoryStencil = createStencil({ parts: { icon: 'accessory-icon', }, - base: ({iconPart}) => ({ + base: ({iconColor, iconPart}) => ({ display: 'inline-flex', position: 'relative', alignItems: 'center', @@ -70,6 +70,7 @@ export const accessoryStencil = createStencil({ justifyContent: 'center', borderRadius: cssVar(cornerShapeStencil.vars.shape), cornerShape: 'superellipse(1.1)', + [systemIconStencil.vars.color]: cssVar(iconColor), }, }), modifiers: { diff --git a/modules/labs-react/accessory/lib/AccessoryIcon.tsx b/modules/labs-react/accessory/lib/AccessoryIcon.tsx index 13732b6c31..34059d3f08 100644 --- a/modules/labs-react/accessory/lib/AccessoryIcon.tsx +++ b/modules/labs-react/accessory/lib/AccessoryIcon.tsx @@ -33,132 +33,149 @@ export interface AccessoryIconProps extends AccessoryProps { variant?: AccessoryIconVariant; } +/** + * Color treatment for `AccessoryIcon`. `variant` paints the icon part. `extraSmall` and `small` + * clear that fill and border unless `background` sets the tile variable. `color` and `background` + * on `Accessory` still override the variant. + */ export const accessoryIconStencil = createStencil({ - extends: systemIconStencil, - base: { - // Inherit optional `color` from the `Accessory` shell when no variant sets a fallback. - [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor), + parts: { + icon: 'accessory-icon', }, + base: {}, modifiers: { variant: { - grey: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.alt.strong - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.slate800 - ), - }, - green: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.success.strong - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.green800 - ), - }, - blue: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.info.strong - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - system.legacy.color.fg.info.strong - ), - }, - purple: { - backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.purpleA50), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.purple700 - ), - }, - amber: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.warning.strong - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - system.legacy.color.fg.warning.strong - ), - }, - magenta: { - backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.magentaA50), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.magenta800 - ), - }, - red: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.danger.strong - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - system.legacy.color.fg.danger.strong - ), - }, - orange: { - backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.orangeA50), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.orange700 - ), - }, - outline: { - backgroundColor: cssVar( - accessoryStencil.vars.tileBackground, - system.legacy.color.surface.transparent - ), - [systemIconStencil.vars.color]: cssVar( - accessoryStencil.vars.iconColor, - base.legacy.slate800 - ), - borderWidth: px2rem(1), - borderStyle: 'solid', - borderColor: system.legacy.color.border.default, - }, + grey: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.alt.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.slate800 + ), + }, + }), + green: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.success.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.green800 + ), + }, + }), + blue: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.info.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.info.strong + ), + }, + }), + purple: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.purpleA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.purple700 + ), + }, + }), + amber: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.warning.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.warning.strong + ), + }, + }), + magenta: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.magentaA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.magenta800 + ), + }, + }), + red: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.danger.strong + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + system.legacy.color.fg.danger.strong + ), + }, + }), + orange: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.orangeA50), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.orange700 + ), + }, + }), + outline: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.transparent + ), + [systemIconStencil.vars.color]: cssVar( + accessoryStencil.vars.iconColor, + base.legacy.slate800 + ), + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + }), + }, + size: { + extraSmall: {}, + small: {}, + medium: {}, + large: {}, + extraLarge: {}, }, }, -}); - -export interface AccessoryIconGraphicProps { - /** - * The icon to display from `@workday/canvas-system-icons-web`. - */ - icon: SystemIconProps['icon']; - /** - * The color treatment of the icon and tile fill. - */ - variant?: AccessoryIconVariant; -} - -/** - * Icon graphic without a tile shell. Used inside `AccessoryMedia`. Glyph size, - * color, and fill overrides come from the parent `Accessory` via the icon `data-part` and stencil - * vars. - */ -export const AccessoryIconGraphic = createComponent('span')({ - displayName: 'AccessoryIconGraphic', - Component: ({icon, variant, ...elemProps}: AccessoryIconGraphicProps, ref, Element) => { - return ( - - ); - }, + compound: [ + { + modifiers: {size: 'extraSmall'}, + styles: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + }), + }, + { + modifiers: {size: 'small'}, + styles: ({iconPart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + }), + }, + ], }); /** @@ -187,9 +204,9 @@ export const AccessoryIcon = createComponent('span')({ background={background} color={color} size={size} - {...handleCsProp(elemProps)} + {...handleCsProp(elemProps, accessoryIconStencil({size, variant}))} > - + ); }, diff --git a/modules/labs-react/accessory/lib/AccessoryMedia.tsx b/modules/labs-react/accessory/lib/AccessoryMedia.tsx index 81d6e101e4..413e53989f 100644 --- a/modules/labs-react/accessory/lib/AccessoryMedia.tsx +++ b/modules/labs-react/accessory/lib/AccessoryMedia.tsx @@ -1,12 +1,11 @@ import React from 'react'; import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; -import {SystemIconProps} from '@workday/canvas-kit-react/icon'; +import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon'; import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; -import {Accessory, AccessoryProps} from './Accessory'; -import {AccessoryIconGraphic} from './AccessoryIcon'; +import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; export interface AccessoryMediaProps extends AccessoryProps { /** @@ -139,7 +138,7 @@ export const AccessoryMedia = createComponent('span')({ {icon && ( <> - + )} diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 29bddcba79..840ed72c59 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -57,6 +57,10 @@ size. `file` and `txt` use `surface.alt` and a default border. Pass `icon` to `AccessoryMedia` to center a decorative icon on a contrast scrim. `objectFit` is `cover` by default. `contain` fits the whole image inside the tile. +The file row checks color overrides on `AccessoryFile`. `color` and `background` set the shell +stencil vars. A `cs` stencil can set those same vars: `accessoryStencil.vars.iconColor` and +`accessoryStencil.vars.tileBackground`. + ### Custom color diff --git a/modules/labs-react/accessory/stories/examples/Custom.tsx b/modules/labs-react/accessory/stories/examples/Custom.tsx index 2edf13c58f..db5cdcfead 100644 --- a/modules/labs-react/accessory/stories/examples/Custom.tsx +++ b/modules/labs-react/accessory/stories/examples/Custom.tsx @@ -1,14 +1,39 @@ -import {AccessoryMedia} from '@workday/canvas-kit-labs-react/accessory'; -import {createStyles} from '@workday/canvas-kit-styling'; +import { + AccessoryFile, + AccessoryMedia, + accessoryStencil, +} from '@workday/canvas-kit-labs-react/accessory'; +import {Subtext} from '@workday/canvas-kit-react/text'; +import {createStencil, createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; +const columnStyles = createStyles({ + display: 'flex', + flexDirection: 'column', + gap: system.gap.md, +}); + const rowStyles = createStyles({ display: 'flex', alignItems: 'center', gap: system.gap.sm, }); +const labelStyles = createStyles({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: system.gap.xs, +}); + +const customFileStencil = createStencil({ + base: { + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.color.accent.info, + }, +}); + const photo = 'data:image/svg+xml,' + encodeURIComponent( @@ -21,13 +46,33 @@ const photo = ); export const Custom = () => ( -
- - +
+
+ + +
+
+
+ + Default +
+
+ + color and background +
+
+ + Stencil vars +
+
); From a9e5065e94566d8a430b4a34cb9f460dcc1d9d72 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Oct 2026 10:19:18 -0600 Subject: [PATCH 06/13] fix: Clean up stories --- cypress/component/Accessory.spec.tsx | 16 +----- modules/labs-react/accessory/README.md | 4 +- .../labs-react/accessory/lib/Accessory.tsx | 8 ++- .../accessory/lib/AccessoryMedia.tsx | 28 +++++----- .../accessory/stories/Accessory.mdx | 55 ++++++++----------- .../accessory/stories/Accessory.stories.ts | 15 ++--- .../accessory/stories/examples/Custom.tsx | 3 - .../stories/examples/CustomColor.tsx | 54 ------------------ .../stories/examples/{RTL.tsx => Icon.tsx} | 7 +-- 9 files changed, 55 insertions(+), 135 deletions(-) delete mode 100644 modules/labs-react/accessory/stories/examples/CustomColor.tsx rename modules/labs-react/accessory/stories/examples/{RTL.tsx => Icon.tsx} (69%) diff --git a/cypress/component/Accessory.spec.tsx b/cypress/component/Accessory.spec.tsx index 4642196407..ad177d7aa4 100644 --- a/cypress/component/Accessory.spec.tsx +++ b/cypress/component/Accessory.spec.tsx @@ -1,9 +1,8 @@ import {Basic} from '../../modules/labs-react/accessory/stories/examples/Basic'; import {Custom} from '../../modules/labs-react/accessory/stories/examples/Custom'; -import {CustomColor} from '../../modules/labs-react/accessory/stories/examples/CustomColor'; import {File} from '../../modules/labs-react/accessory/stories/examples/File'; +import {Icon} from '../../modules/labs-react/accessory/stories/examples/Icon'; import {Media} from '../../modules/labs-react/accessory/stories/examples/Media'; -import {RTL} from '../../modules/labs-react/accessory/stories/examples/RTL'; import {Sizes} from '../../modules/labs-react/accessory/stories/examples/Sizes'; import {Variants} from '../../modules/labs-react/accessory/stories/examples/Variants'; @@ -16,7 +15,7 @@ describe('Accessory', () => { }); }); - [Basic, Media, File, Custom, CustomColor, Sizes, Variants, RTL].forEach(Example => { + [Basic, Icon, Media, File, Custom, Sizes, Variants].forEach(Example => { context(`given the ${Example.name} story is rendered`, () => { beforeEach(() => { cy.mount(); @@ -37,15 +36,4 @@ describe('Accessory', () => { cy.get('img[alt="Random photo"]').should('be.visible'); }); }); - - context('given the Custom story is rendered', () => { - beforeEach(() => { - cy.mount(); - }); - - it('should render both images', () => { - cy.get('img[alt="Three dark spheres"]').should('be.visible'); - cy.get('img[alt="Three dark spheres, contained"]').should('be.visible'); - }); - }); }); diff --git a/modules/labs-react/accessory/README.md b/modules/labs-react/accessory/README.md index 4b38eb5b52..a286556bac 100644 --- a/modules/labs-react/accessory/README.md +++ b/modules/labs-react/accessory/README.md @@ -4,8 +4,8 @@ LABS: Alpha This component is work in progress and currently in prerelease. -A presentational tile shell for a leading visual. Prefer `AccessoryIcon`, `AccessoryFile`, or -`AccessoryMedia`. +A small rounded visual that sits beside text. Prefer `AccessoryIcon`, `AccessoryFile`, or +`AccessoryMedia`. Use `Accessory` for custom content. View the [documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs) diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 1b87f88d60..6b2cb436cd 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -124,9 +124,11 @@ export const accessoryStencil = createStencil({ }); /** - * `Accessory` is the presentational tile shell. It owns the tile size and corner radius. - * `AccessoryIcon`, `AccessoryFile`, and `AccessoryMedia` render this shell. Accessories are - * decorative and always hidden from assistive technology. + * `Accessory` is the small rounded visual that sits beside text, most often the leading element in + * a list item or other row. It owns the tile size and corner radius so a system icon, file type, + * image, or custom content stays one consistent shape. `AccessoryIcon`, `AccessoryFile`, and + * `AccessoryMedia` render this shell. Accessories are decorative and always hidden from assistive + * technology. * * ```tsx * diff --git a/modules/labs-react/accessory/lib/AccessoryMedia.tsx b/modules/labs-react/accessory/lib/AccessoryMedia.tsx index 413e53989f..424a834078 100644 --- a/modules/labs-react/accessory/lib/AccessoryMedia.tsx +++ b/modules/labs-react/accessory/lib/AccessoryMedia.tsx @@ -30,14 +30,19 @@ export interface AccessoryMediaProps extends AccessoryProps { icon?: SystemIconProps['icon']; } +/** + * Image treatment for `AccessoryMedia`. The image part stays hidden until `imageLoaded`. The scrim + * part sits under an optional icon. `background` overrides the tile fill. + */ export const accessoryMediaStencil = createStencil({ vars: { background: '', }, parts: { image: 'accessory-media-image', + scrim: 'accessory-media-scrim', }, - base: ({background, imagePart}) => ({ + base: ({background, imagePart, scrimPart}) => ({ backgroundColor: cssVar(background, system.legacy.color.surface.alt.default), [imagePart]: { position: 'absolute', @@ -49,6 +54,14 @@ export const accessoryMediaStencil = createStencil({ borderRadius: cssVar(cornerShapeStencil.vars.shape), cornerShape: 'superellipse(1.1)', }, + [scrimPart]: { + position: 'absolute', + inset: 0, + backgroundColor: system.legacy.color.surface.overlay.scrim, + borderRadius: cssVar(cornerShapeStencil.vars.shape), + cornerShape: 'superellipse(1.1)', + pointerEvents: 'none', + }, }), modifiers: { imageLoaded: { @@ -74,17 +87,6 @@ export const accessoryMediaStencil = createStencil({ }, }); -export const accessoryMediaScrimStencil = createStencil({ - base: { - position: 'absolute', - inset: 0, - backgroundColor: system.legacy.color.surface.overlay.scrim, - borderRadius: cssVar(cornerShapeStencil.vars.shape), - cornerShape: 'superellipse(1.1)', - pointerEvents: 'none', - }, -}); - /** * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile @@ -137,7 +139,7 @@ export const AccessoryMedia = createComponent('span')({ /> {icon && ( <> - + )} diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 840ed72c59..3522215626 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -5,10 +5,9 @@ import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-d import AccessoryStoriesMeta from './Accessory.stories'; import {Basic} from './examples/Basic'; import {Custom} from './examples/Custom'; -import {CustomColor} from './examples/CustomColor'; import {File} from './examples/File'; +import {Icon} from './examples/Icon'; import {Media} from './examples/Media'; -import {RTL} from './examples/RTL'; import {Sizes} from './examples/Sizes'; import {Variants} from './examples/Variants'; @@ -16,9 +15,14 @@ import {Variants} from './examples/Variants'; # Canvas Kit Accessory -`Accessory` is a presentational tile shell for a leading visual. Prefer `AccessoryIcon`, -`AccessoryFile`, or `AccessoryMedia`, which each extend the shared `Accessory` props (`size`, -`color`, `background`) and render that shell. Accessories are decorative and always hidden from +`Accessory` is the small rounded visual that sits beside text, most often the leading element in a +list item or other row. It keeps every thumbnail in one consistent shape and size, so a list of +mixed content still feels uniform. + +It can show a system icon, a file type, an image, or fully custom content — whichever suits the +row. Prefer `AccessoryIcon`, `AccessoryFile`, or `AccessoryMedia`, which each extend the shared +`Accessory` props (`size`, `color`, `background`) and render that shell. Use `Accessory` itself for +custom content, such as a gradient icon. Accessories are decorative and always hidden from assistive technology. They do not handle clicks or focus. ## Installation @@ -31,12 +35,19 @@ yarn add @workday/canvas-kit-labs-react ### Basic Example -`Accessory` is only a tile shell — size and corner radius. It does not render a visual by itself. -Use a targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file -type, or `AccessoryMedia` for an image (optionally with an icon on a scrim). +`Accessory` is only the tile — size and corner radius. It does not render a visual by itself. Use a +targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file type, or +`AccessoryMedia` for an image (optionally with an icon on a scrim). Put custom content inside +`Accessory` when none of those fit the row. +### Icon + +`AccessoryIcon` renders a system icon in the tile. `variant` sets the fill and icon color. + + + ### Media `AccessoryMedia` fills the tile with an image. The image stays hidden until it loads. Pass `icon` @@ -52,27 +63,14 @@ size. `file` and `txt` use `surface.alt` and a default border. -### Media with an icon - -Pass `icon` to `AccessoryMedia` to center a decorative icon on a contrast scrim. `objectFit` is -`cover` by default. `contain` fits the whole image inside the tile. +### Custom -The file row checks color overrides on `AccessoryFile`. `color` and `background` set the shell -stencil vars. A `cs` stencil can set those same vars: `accessoryStencil.vars.iconColor` and -`accessoryStencil.vars.tileBackground`. +Use `Accessory` when the row needs content that is not a system icon, file type, or image. Set +`accessoryStencil.vars.iconColor` and `accessoryStencil.vars.tileBackground` to recolor the tile. +The icon `data-part` keeps the tile's corner radius. -### Custom color - -`variant` is a stencil modifier on `AccessoryIcon`. `color` and `background` are shared `Accessory` -props and override the variant through stencil vars on the shell. Glyph size follows `size` via the -icon `data-part`. The icon is smaller than the tile: `extraSmall` is 10px, `small` is 12px, -`medium` is 16px, `large` is 18px, and `extraLarge` is 20px. Variant fills stay hidden at `small` -and `extraSmall` unless `background` is set. - - - ### Sizes `size` is a shared `Accessory` prop on each component. `extraLarge` (40px) is the default. @@ -86,13 +84,6 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those -### Right-to-Left - -The tile stays centered in right-to-left layouts. Directional icons still follow the icon's own -mirroring rules. - - - ### Accessibility Accessory components are presentational and always `aria-hidden`. Name the item in adjacent text diff --git a/modules/labs-react/accessory/stories/Accessory.stories.ts b/modules/labs-react/accessory/stories/Accessory.stories.ts index 015e50be9a..856af5a587 100644 --- a/modules/labs-react/accessory/stories/Accessory.stories.ts +++ b/modules/labs-react/accessory/stories/Accessory.stories.ts @@ -5,10 +5,9 @@ import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; import mdxDoc from './Accessory.mdx'; import {Basic as BasicExample} from './examples/Basic'; import {Custom as CustomExample} from './examples/Custom'; -import {CustomColor as CustomColorExample} from './examples/CustomColor'; import {File as FileExample} from './examples/File'; +import {Icon as IconExample} from './examples/Icon'; import {Media as MediaExample} from './examples/Media'; -import {RTL as RTLExample} from './examples/RTL'; import {Sizes as SizesExample} from './examples/Sizes'; import {Variants as VariantsExample} from './examples/Variants'; @@ -29,6 +28,10 @@ export const Basic: Story = { render: BasicExample, }; +export const Icon: Story = { + render: IconExample, +}; + export const Media: Story = { render: MediaExample, }; @@ -41,10 +44,6 @@ export const Custom: Story = { render: CustomExample, }; -export const CustomColor: Story = { - render: CustomColorExample, -}; - export const Sizes: Story = { render: SizesExample, }; @@ -52,7 +51,3 @@ export const Sizes: Story = { export const Variants: Story = { render: VariantsExample, }; - -export const RTL: Story = { - render: RTLExample, -}; diff --git a/modules/labs-react/accessory/stories/examples/Custom.tsx b/modules/labs-react/accessory/stories/examples/Custom.tsx index db5cdcfead..2d4996fef7 100644 --- a/modules/labs-react/accessory/stories/examples/Custom.tsx +++ b/modules/labs-react/accessory/stories/examples/Custom.tsx @@ -59,7 +59,6 @@ export const Custom = () => (
- Default
( color={system.color.fg.warning.strong} type="pdf" /> - color and background
- Stencil vars
diff --git a/modules/labs-react/accessory/stories/examples/CustomColor.tsx b/modules/labs-react/accessory/stories/examples/CustomColor.tsx deleted file mode 100644 index 9be2269769..0000000000 --- a/modules/labs-react/accessory/stories/examples/CustomColor.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - AccessoryIcon, - AccessoryMedia, - AccessorySize, -} from '@workday/canvas-kit-labs-react/accessory'; -import {Subtext} from '@workday/canvas-kit-react/text'; -import {createStyles, px2rem} from '@workday/canvas-kit-styling'; -import {documentIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; -import {system} from '@workday/canvas-tokens-web'; - -const containerStyles = createStyles({ - display: 'flex', - flexDirection: 'column', - gap: system.gap.md, -}); - -const rowStyles = createStyles({ - display: 'flex', - alignItems: 'center', - gap: system.gap.md, - p: { - minWidth: px2rem(104), - margin: 0, - }, -}); - -const sizes: AccessorySize[] = ['extraSmall', 'small', 'medium', 'large', 'extraLarge']; - -const photo = 'https://picsum.photos/seed/accessory/200/200'; - -export const CustomColor = () => ( -
- {sizes.map(size => ( -
- {size} - - -
- ))} -
-); diff --git a/modules/labs-react/accessory/stories/examples/RTL.tsx b/modules/labs-react/accessory/stories/examples/Icon.tsx similarity index 69% rename from modules/labs-react/accessory/stories/examples/RTL.tsx rename to modules/labs-react/accessory/stories/examples/Icon.tsx index b5f8e0a96a..d860c31d56 100644 --- a/modules/labs-react/accessory/stories/examples/RTL.tsx +++ b/modules/labs-react/accessory/stories/examples/Icon.tsx @@ -1,5 +1,4 @@ import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory'; -import {Subtext} from '@workday/canvas-kit-react/text'; import {createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -10,9 +9,9 @@ const rowStyles = createStyles({ gap: system.gap.sm, }); -export const RTL = () => ( -
+export const Icon = () => ( +
- مكتمل +
); From 229f3f64d10a48cbd3cd63647dfb5a1e3c661030 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Oct 2026 10:44:26 -0600 Subject: [PATCH 07/13] fix: Add calendar component --- cypress/component/Accessory.spec.tsx | 3 +- modules/labs-react/accessory/README.md | 4 +- modules/labs-react/accessory/index.ts | 1 + .../labs-react/accessory/lib/Accessory.tsx | 6 +- .../accessory/lib/AccessoryCalendar.tsx | 86 +++++++++++++++++++ .../accessory/spec/Accessory.spec.tsx | 12 +++ .../labs-react/accessory/spec/SSR.spec.tsx | 2 + .../accessory/stories/Accessory.mdx | 22 +++-- .../accessory/stories/Accessory.stories.ts | 5 ++ .../accessory/stories/examples/Calendar.tsx | 17 ++++ .../accessory/stories/testing.stories.tsx | 16 ++++ 11 files changed, 162 insertions(+), 12 deletions(-) create mode 100644 modules/labs-react/accessory/lib/AccessoryCalendar.tsx create mode 100644 modules/labs-react/accessory/stories/examples/Calendar.tsx diff --git a/cypress/component/Accessory.spec.tsx b/cypress/component/Accessory.spec.tsx index ad177d7aa4..e9bc660294 100644 --- a/cypress/component/Accessory.spec.tsx +++ b/cypress/component/Accessory.spec.tsx @@ -1,4 +1,5 @@ import {Basic} from '../../modules/labs-react/accessory/stories/examples/Basic'; +import {Calendar} from '../../modules/labs-react/accessory/stories/examples/Calendar'; import {Custom} from '../../modules/labs-react/accessory/stories/examples/Custom'; import {File} from '../../modules/labs-react/accessory/stories/examples/File'; import {Icon} from '../../modules/labs-react/accessory/stories/examples/Icon'; @@ -15,7 +16,7 @@ describe('Accessory', () => { }); }); - [Basic, Icon, Media, File, Custom, Sizes, Variants].forEach(Example => { + [Basic, Icon, Media, File, Calendar, Custom, Sizes, Variants].forEach(Example => { context(`given the ${Example.name} story is rendered`, () => { beforeEach(() => { cy.mount(); diff --git a/modules/labs-react/accessory/README.md b/modules/labs-react/accessory/README.md index a286556bac..3238963275 100644 --- a/modules/labs-react/accessory/README.md +++ b/modules/labs-react/accessory/README.md @@ -4,8 +4,8 @@ LABS: Alpha This component is work in progress and currently in prerelease. -A small rounded visual that sits beside text. Prefer `AccessoryIcon`, `AccessoryFile`, or -`AccessoryMedia`. Use `Accessory` for custom content. +A small rounded visual that sits beside text. Prefer `AccessoryIcon`, `AccessoryFile`, +`AccessoryMedia`, or `AccessoryCalendar`. Use `Accessory` for custom content. View the [documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs) diff --git a/modules/labs-react/accessory/index.ts b/modules/labs-react/accessory/index.ts index dd04d65bfc..346c028dab 100644 --- a/modules/labs-react/accessory/index.ts +++ b/modules/labs-react/accessory/index.ts @@ -1,4 +1,5 @@ export * from './lib/Accessory'; +export * from './lib/AccessoryCalendar'; export * from './lib/AccessoryFile'; export * from './lib/AccessoryIcon'; export * from './lib/AccessoryMedia'; diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 6b2cb436cd..64f68497ee 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -126,9 +126,9 @@ export const accessoryStencil = createStencil({ /** * `Accessory` is the small rounded visual that sits beside text, most often the leading element in * a list item or other row. It owns the tile size and corner radius so a system icon, file type, - * image, or custom content stays one consistent shape. `AccessoryIcon`, `AccessoryFile`, and - * `AccessoryMedia` render this shell. Accessories are decorative and always hidden from assistive - * technology. + * image, calendar date, or custom content stays one consistent shape. `AccessoryIcon`, + * `AccessoryFile`, `AccessoryMedia`, and `AccessoryCalendar` render this shell. Accessories are + * decorative and always hidden from assistive technology. * * ```tsx * diff --git a/modules/labs-react/accessory/lib/AccessoryCalendar.tsx b/modules/labs-react/accessory/lib/AccessoryCalendar.tsx new file mode 100644 index 0000000000..d399c8305b --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryCalendar.tsx @@ -0,0 +1,86 @@ +import {createComponent} from '@workday/canvas-kit-react/common'; +import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; + +export interface AccessoryCalendarProps extends AccessoryProps { + /** + * The month label, such as `Apr`. + */ + month: string; + /** + * The day of the month, such as `30`. + */ + date: number | string; +} + +/** + * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the + * default foreground color. `color` overrides the month. `background` overrides the tile fill. + */ +export const accessoryCalendarStencil = createStencil({ + parts: { + icon: 'accessory-icon', + month: 'accessory-calendar-month', + date: 'accessory-calendar-date', + }, + base: ({datePart, iconPart, monthPart}) => ({ + [iconPart]: { + flexDirection: 'column', + // 2px month margin plus 1px stack gap in the Sana accessory calendar. + gap: px2rem(3), + overflow: 'hidden', + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.default + ), + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + [monthPart]: { + color: cssVar(accessoryStencil.vars.iconColor, system.legacy.color.fg.danger.default), + fontSize: system.legacy.fontSize.subtext.sm, + fontWeight: system.fontWeight.medium, + lineHeight: 1, + transform: `translateY(${px2rem(1)})`, + }, + [datePart]: { + color: system.color.fg.default, + fontSize: system.legacy.fontSize.body.sm, + fontWeight: system.fontWeight.normal, + lineHeight: 1, + transform: `translateY(${px2rem(1)})`, + }, + }), +}); + +/** + * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the + * day is the default foreground color. Always decorative. + */ +export const AccessoryCalendar = createComponent('span')({ + displayName: 'AccessoryCalendar', + Component: ( + {month, date, size = 'extraLarge', color, background, ...elemProps}: AccessoryCalendarProps, + ref, + Element + ) => { + return ( + + + {month} + {date} + + + ); + }, +}); diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx index 3b7970317e..afc7289cb7 100644 --- a/modules/labs-react/accessory/spec/Accessory.spec.tsx +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; import {Accessory} from '../lib/Accessory'; +import {AccessoryCalendar} from '../lib/AccessoryCalendar'; import {AccessoryFile} from '../lib/AccessoryFile'; import {AccessoryIcon} from '../lib/AccessoryIcon'; import {AccessoryMedia} from '../lib/AccessoryMedia'; @@ -16,6 +17,17 @@ describe('Accessory', () => { verifyComponent(AccessoryIcon, {props: {icon: checkIcon}}); verifyComponent(AccessoryMedia, {props: {src: imageSrc, alt: 'Preview', icon: checkIcon}}); verifyComponent(AccessoryFile, {}); + verifyComponent(AccessoryCalendar, {props: {month: 'Apr', date: 30}}); + + describe('when a calendar date is rendered', () => { + it('should show the month and day', () => { + const {container} = render(); + + expect(container).toHaveTextContent('Apr'); + expect(container).toHaveTextContent('30'); + expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument(); + }); + }); describe('when an icon is rendered', () => { it('should hide the accessory from assistive technology', () => { diff --git a/modules/labs-react/accessory/spec/SSR.spec.tsx b/modules/labs-react/accessory/spec/SSR.spec.tsx index 165e4d7229..e6b79b4bd5 100644 --- a/modules/labs-react/accessory/spec/SSR.spec.tsx +++ b/modules/labs-react/accessory/spec/SSR.spec.tsx @@ -5,6 +5,7 @@ import {renderToString} from 'react-dom/server'; import {checkIcon} from '@workday/canvas-system-icons-web'; +import {AccessoryCalendar} from '../lib/AccessoryCalendar'; import {AccessoryFile} from '../lib/AccessoryFile'; import {AccessoryIcon} from '../lib/AccessoryIcon'; import {AccessoryMedia} from '../lib/AccessoryMedia'; @@ -20,6 +21,7 @@ describe('Accessory', () => { + ); diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 3522215626..60e9b99547 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -4,6 +4,7 @@ import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-d import AccessoryStoriesMeta from './Accessory.stories'; import {Basic} from './examples/Basic'; +import {Calendar} from './examples/Calendar'; import {Custom} from './examples/Custom'; import {File} from './examples/File'; import {Icon} from './examples/Icon'; @@ -19,10 +20,11 @@ import {Variants} from './examples/Variants'; list item or other row. It keeps every thumbnail in one consistent shape and size, so a list of mixed content still feels uniform. -It can show a system icon, a file type, an image, or fully custom content — whichever suits the -row. Prefer `AccessoryIcon`, `AccessoryFile`, or `AccessoryMedia`, which each extend the shared -`Accessory` props (`size`, `color`, `background`) and render that shell. Use `Accessory` itself for -custom content, such as a gradient icon. Accessories are decorative and always hidden from +It can show a system icon, a file type, an image, a calendar date, or fully custom content — +whichever suits the row. Prefer `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, or +`AccessoryCalendar`, which each extend the shared `Accessory` props (`size`, `color`, `background`) +and render that shell. Use `Accessory` itself for custom content, such as a gradient icon. +Accessories are decorative and always hidden from assistive technology. They do not handle clicks or focus. ## Installation @@ -36,8 +38,9 @@ yarn add @workday/canvas-kit-labs-react ### Basic Example `Accessory` is only the tile — size and corner radius. It does not render a visual by itself. Use a -targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file type, or -`AccessoryMedia` for an image (optionally with an icon on a scrim). Put custom content inside +targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file type, +`AccessoryMedia` for an image (optionally with an icon on a scrim), or `AccessoryCalendar` for a +month and day. Put custom content inside `Accessory` when none of those fit the row. @@ -63,6 +66,13 @@ size. `file` and `txt` use `surface.alt` and a default border. +### Calendar + +`AccessoryCalendar` stacks a month label over the day. Pass `month` and `date`. The month uses a +critical color. The day uses the default foreground color. + + + ### Custom Use `Accessory` when the row needs content that is not a system icon, file type, or image. Set diff --git a/modules/labs-react/accessory/stories/Accessory.stories.ts b/modules/labs-react/accessory/stories/Accessory.stories.ts index 856af5a587..3c64965b68 100644 --- a/modules/labs-react/accessory/stories/Accessory.stories.ts +++ b/modules/labs-react/accessory/stories/Accessory.stories.ts @@ -4,6 +4,7 @@ import {Accessory} from '@workday/canvas-kit-labs-react/accessory'; import mdxDoc from './Accessory.mdx'; import {Basic as BasicExample} from './examples/Basic'; +import {Calendar as CalendarExample} from './examples/Calendar'; import {Custom as CustomExample} from './examples/Custom'; import {File as FileExample} from './examples/File'; import {Icon as IconExample} from './examples/Icon'; @@ -40,6 +41,10 @@ export const File: Story = { render: FileExample, }; +export const Calendar: Story = { + render: CalendarExample, +}; + export const Custom: Story = { render: CustomExample, }; diff --git a/modules/labs-react/accessory/stories/examples/Calendar.tsx b/modules/labs-react/accessory/stories/examples/Calendar.tsx new file mode 100644 index 0000000000..3ef6881d96 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Calendar.tsx @@ -0,0 +1,17 @@ +import {AccessoryCalendar} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, +}); + +export const Calendar = () => ( +
+ + + +
+); diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx index 4df9b649dc..487f7df7ea 100644 --- a/modules/labs-react/accessory/stories/testing.stories.tsx +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -1,4 +1,5 @@ import { + AccessoryCalendar, AccessoryFile, AccessoryFileType, AccessoryIcon, @@ -90,3 +91,18 @@ export const AccessoryFileStates = () => ( ); + +export const AccessoryCalendarStates = () => ( + + ({value: size, label: size})), + })} + columnProps={permutateProps({ + className: [{label: 'Apr 30', value: ''}], + })} + > + {props => } + + +); From 83ed93b22944321887d2544eb45f17b940787bdd Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Oct 2026 11:06:17 -0600 Subject: [PATCH 08/13] fix: Add favicon --- cypress/component/Accessory.spec.tsx | 7 +- modules/labs-react/accessory/README.md | 2 +- modules/labs-react/accessory/index.ts | 1 + .../labs-react/accessory/lib/Accessory.tsx | 5 +- .../accessory/lib/AccessoryFavicon.tsx | 147 ++++++++++++++++++ .../accessory/spec/Accessory.spec.tsx | 22 +++ .../labs-react/accessory/spec/SSR.spec.tsx | 2 + .../accessory/stories/Accessory.mdx | 22 ++- .../accessory/stories/Accessory.stories.ts | 5 + .../accessory/stories/testing.stories.tsx | 16 ++ 10 files changed, 219 insertions(+), 10 deletions(-) create mode 100644 modules/labs-react/accessory/lib/AccessoryFavicon.tsx diff --git a/cypress/component/Accessory.spec.tsx b/cypress/component/Accessory.spec.tsx index e9bc660294..2c78e5a041 100644 --- a/cypress/component/Accessory.spec.tsx +++ b/cypress/component/Accessory.spec.tsx @@ -1,6 +1,7 @@ import {Basic} from '../../modules/labs-react/accessory/stories/examples/Basic'; import {Calendar} from '../../modules/labs-react/accessory/stories/examples/Calendar'; import {Custom} from '../../modules/labs-react/accessory/stories/examples/Custom'; +import {Favicon} from '../../modules/labs-react/accessory/stories/examples/Favicon'; import {File} from '../../modules/labs-react/accessory/stories/examples/File'; import {Icon} from '../../modules/labs-react/accessory/stories/examples/Icon'; import {Media} from '../../modules/labs-react/accessory/stories/examples/Media'; @@ -14,9 +15,13 @@ describe('Accessory', () => { fixture: 'avatar.png', headers: {'content-type': 'image/png'}, }); + cy.intercept('GET', 'https://www.google.com/s2/favicons*', { + fixture: 'avatar.png', + headers: {'content-type': 'image/png'}, + }); }); - [Basic, Icon, Media, File, Calendar, Custom, Sizes, Variants].forEach(Example => { + [Basic, Icon, Media, Favicon, File, Calendar, Custom, Sizes, Variants].forEach(Example => { context(`given the ${Example.name} story is rendered`, () => { beforeEach(() => { cy.mount(); diff --git a/modules/labs-react/accessory/README.md b/modules/labs-react/accessory/README.md index 3238963275..d200b97285 100644 --- a/modules/labs-react/accessory/README.md +++ b/modules/labs-react/accessory/README.md @@ -5,7 +5,7 @@ This component is work in progress and currently in prerelease. A small rounded visual that sits beside text. Prefer `AccessoryIcon`, `AccessoryFile`, -`AccessoryMedia`, or `AccessoryCalendar`. Use `Accessory` for custom content. +`AccessoryMedia`, `AccessoryFavicon`, or `AccessoryCalendar`. Use `Accessory` for custom content. View the [documentation for Accessory](https://workday.github.io/canvas-kit/?path=/docs/labs-accessory--docs) diff --git a/modules/labs-react/accessory/index.ts b/modules/labs-react/accessory/index.ts index 346c028dab..991aa8e479 100644 --- a/modules/labs-react/accessory/index.ts +++ b/modules/labs-react/accessory/index.ts @@ -1,5 +1,6 @@ export * from './lib/Accessory'; export * from './lib/AccessoryCalendar'; +export * from './lib/AccessoryFavicon'; export * from './lib/AccessoryFile'; export * from './lib/AccessoryIcon'; export * from './lib/AccessoryMedia'; diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 64f68497ee..8ed29ad9f0 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -126,8 +126,9 @@ export const accessoryStencil = createStencil({ /** * `Accessory` is the small rounded visual that sits beside text, most often the leading element in * a list item or other row. It owns the tile size and corner radius so a system icon, file type, - * image, calendar date, or custom content stays one consistent shape. `AccessoryIcon`, - * `AccessoryFile`, `AccessoryMedia`, and `AccessoryCalendar` render this shell. Accessories are + * image, site favicon, calendar date, or custom content stays one consistent shape. + * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar` + * render this shell. Accessories are * decorative and always hidden from assistive technology. * * ```tsx diff --git a/modules/labs-react/accessory/lib/AccessoryFavicon.tsx b/modules/labs-react/accessory/lib/AccessoryFavicon.tsx new file mode 100644 index 0000000000..47745288d5 --- /dev/null +++ b/modules/labs-react/accessory/lib/AccessoryFavicon.tsx @@ -0,0 +1,147 @@ +import {createComponent} from '@workday/canvas-kit-react/common'; +import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +import {Accessory, AccessoryProps, AccessorySize, accessoryStencil} from './Accessory'; + +/** Hostname from a site URL or a bare domain such as `gmail.com`. */ +function hostnameFromSiteUrl(siteUrl: string): string { + const trimmed = siteUrl.trim(); + if (!trimmed) { + return ''; + } + + try { + const withProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`; + return new URL(withProtocol).hostname || ''; + } catch { + return ''; + } +} + +/** + * Brand favicon URL for a site, resolved through the public Google favicon endpoint. Tiles larger + * than 32px request a 180px source. Smaller tiles request 64px. + */ +function faviconSrcFromSiteUrl(siteUrl: string, size: AccessorySize): string { + const host = hostnameFromSiteUrl(siteUrl); + if (!host) { + return ''; + } + + const sourceSize = size === 'extraLarge' ? 180 : 64; + return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=${sourceSize}`; +} + +export interface AccessoryFaviconProps extends AccessoryProps { + /** + * The site URL or bare domain, such as `https://mail.google.com` or `gmail.com`. The hostname is + * used to resolve the favicon. + */ + url: string; +} + +/** + * Favicon treatment for `AccessoryFavicon`. At `large` and `extraLarge` the mark is inset in an + * outlined tile. At `medium` and smaller the mark fills the tile and the frame is removed. + * `background` overrides the tile fill. + */ +export const accessoryFaviconStencil = createStencil({ + parts: { + icon: 'accessory-icon', + image: 'accessory-favicon-image', + }, + base: ({iconPart, imagePart}) => ({ + [iconPart]: { + overflow: 'hidden', + backgroundColor: cssVar( + accessoryStencil.vars.tileBackground, + system.legacy.color.surface.default + ), + borderWidth: px2rem(1), + borderStyle: 'solid', + borderColor: system.legacy.color.border.default, + }, + [imagePart]: { + width: `calc(100% - ${cssVar(system.space.x3)})`, + height: `calc(100% - ${cssVar(system.space.x3)})`, + objectFit: 'contain', + borderRadius: system.legacy.shape.md, + cornerShape: 'superellipse(1.1)', + }, + }), + modifiers: { + size: { + extraSmall: ({iconPart, imagePart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + [imagePart]: { + width: '100%', + height: '100%', + borderRadius: 0, + }, + }), + small: ({iconPart, imagePart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + [imagePart]: { + width: '100%', + height: '100%', + borderRadius: 0, + }, + }), + medium: ({iconPart, imagePart}) => ({ + [iconPart]: { + backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'), + borderWidth: 0, + }, + [imagePart]: { + width: '100%', + height: '100%', + borderRadius: 0, + }, + }), + large: {}, + extraLarge: {}, + }, + }, + defaultModifiers: { + size: 'extraLarge', + }, +}); + +/** + * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as + * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at + * smaller sizes. Always decorative. + */ +export const AccessoryFavicon = createComponent('span')({ + displayName: 'AccessoryFavicon', + Component: ( + {url, size = 'extraLarge', background, ...elemProps}: AccessoryFaviconProps, + ref, + Element + ) => { + const src = faviconSrcFromSiteUrl(url, size); + + return ( + + {src ? ( + + + + ) : null} + + ); + }, +}); diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx index afc7289cb7..8e9d533597 100644 --- a/modules/labs-react/accessory/spec/Accessory.spec.tsx +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -5,6 +5,7 @@ import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web'; import {Accessory} from '../lib/Accessory'; import {AccessoryCalendar} from '../lib/AccessoryCalendar'; +import {AccessoryFavicon} from '../lib/AccessoryFavicon'; import {AccessoryFile} from '../lib/AccessoryFile'; import {AccessoryIcon} from '../lib/AccessoryIcon'; import {AccessoryMedia} from '../lib/AccessoryMedia'; @@ -18,6 +19,7 @@ describe('Accessory', () => { verifyComponent(AccessoryMedia, {props: {src: imageSrc, alt: 'Preview', icon: checkIcon}}); verifyComponent(AccessoryFile, {}); verifyComponent(AccessoryCalendar, {props: {month: 'Apr', date: 30}}); + verifyComponent(AccessoryFavicon, {props: {url: 'gmail.com'}}); describe('when a calendar date is rendered', () => { it('should show the month and day', () => { @@ -64,6 +66,26 @@ describe('Accessory', () => { }); }); + describe('when a favicon is rendered', () => { + it('should resolve the site hostname and stay decorative', () => { + const {container} = render(); + const img = container.querySelector('img')!; + + expect(img).toHaveAttribute( + 'src', + 'https://www.google.com/s2/favicons?domain=mail.google.com&sz=180' + ); + expect(img).toHaveAttribute('alt', ''); + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + + it('should render nothing when the site URL has no hostname', () => { + const {container} = render(); + + expect(container.querySelector('img')).not.toBeInTheDocument(); + }); + }); + describe('when a file type is rendered', () => { it('should hide the accessory from assistive technology', () => { const {container} = render(); diff --git a/modules/labs-react/accessory/spec/SSR.spec.tsx b/modules/labs-react/accessory/spec/SSR.spec.tsx index e6b79b4bd5..7a82790fad 100644 --- a/modules/labs-react/accessory/spec/SSR.spec.tsx +++ b/modules/labs-react/accessory/spec/SSR.spec.tsx @@ -6,6 +6,7 @@ import {renderToString} from 'react-dom/server'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {AccessoryCalendar} from '../lib/AccessoryCalendar'; +import {AccessoryFavicon} from '../lib/AccessoryFavicon'; import {AccessoryFile} from '../lib/AccessoryFile'; import {AccessoryIcon} from '../lib/AccessoryIcon'; import {AccessoryMedia} from '../lib/AccessoryMedia'; @@ -22,6 +23,7 @@ describe('Accessory', () => { + ); diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index 60e9b99547..f91bff9fb8 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -6,6 +6,7 @@ import AccessoryStoriesMeta from './Accessory.stories'; import {Basic} from './examples/Basic'; import {Calendar} from './examples/Calendar'; import {Custom} from './examples/Custom'; +import {Favicon} from './examples/Favicon'; import {File} from './examples/File'; import {Icon} from './examples/Icon'; import {Media} from './examples/Media'; @@ -20,9 +21,10 @@ import {Variants} from './examples/Variants'; list item or other row. It keeps every thumbnail in one consistent shape and size, so a list of mixed content still feels uniform. -It can show a system icon, a file type, an image, a calendar date, or fully custom content — -whichever suits the row. Prefer `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, or -`AccessoryCalendar`, which each extend the shared `Accessory` props (`size`, `color`, `background`) +It can show a system icon, a file type, an image, a site favicon, a calendar date, or fully custom +content — whichever suits the row. Prefer `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, +`AccessoryFavicon`, or `AccessoryCalendar`, which each extend the shared `Accessory` props (`size`, +`color`, `background`) and render that shell. Use `Accessory` itself for custom content, such as a gradient icon. Accessories are decorative and always hidden from assistive technology. They do not handle clicks or focus. @@ -39,8 +41,8 @@ yarn add @workday/canvas-kit-labs-react `Accessory` is only the tile — size and corner radius. It does not render a visual by itself. Use a targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file type, -`AccessoryMedia` for an image (optionally with an icon on a scrim), or `AccessoryCalendar` for a -month and day. Put custom content inside +`AccessoryMedia` for an image (optionally with an icon on a scrim), `AccessoryFavicon` for a site +favicon, or `AccessoryCalendar` for a month and day. Put custom content inside `Accessory` when none of those fit the row. @@ -58,6 +60,13 @@ to center a glyph on a contrast scrim. +### Favicon + +`AccessoryFavicon` resolves a brand mark from a site URL or domain. At `large` and `extraLarge` the +mark sits inset in an outlined tile. At `medium` and smaller it fills the tile. + + + ### File `AccessoryFile` renders a file type through the shared icon graphic. `type` chooses the glyph and @@ -75,7 +84,8 @@ critical color. The day uses the default foreground color. ### Custom -Use `Accessory` when the row needs content that is not a system icon, file type, or image. Set +Use `Accessory` when the row needs content that is not a system icon, file type, image, or favicon. +Set `accessoryStencil.vars.iconColor` and `accessoryStencil.vars.tileBackground` to recolor the tile. The icon `data-part` keeps the tile's corner radius. diff --git a/modules/labs-react/accessory/stories/Accessory.stories.ts b/modules/labs-react/accessory/stories/Accessory.stories.ts index 3c64965b68..30beaf42bf 100644 --- a/modules/labs-react/accessory/stories/Accessory.stories.ts +++ b/modules/labs-react/accessory/stories/Accessory.stories.ts @@ -6,6 +6,7 @@ import mdxDoc from './Accessory.mdx'; import {Basic as BasicExample} from './examples/Basic'; import {Calendar as CalendarExample} from './examples/Calendar'; import {Custom as CustomExample} from './examples/Custom'; +import {Favicon as FaviconExample} from './examples/Favicon'; import {File as FileExample} from './examples/File'; import {Icon as IconExample} from './examples/Icon'; import {Media as MediaExample} from './examples/Media'; @@ -37,6 +38,10 @@ export const Media: Story = { render: MediaExample, }; +export const Favicon: Story = { + render: FaviconExample, +}; + export const File: Story = { render: FileExample, }; diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx index 487f7df7ea..5c79531366 100644 --- a/modules/labs-react/accessory/stories/testing.stories.tsx +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -1,5 +1,6 @@ import { AccessoryCalendar, + AccessoryFavicon, AccessoryFile, AccessoryFileType, AccessoryIcon, @@ -77,6 +78,21 @@ export const AccessoryMediaStates = () => ( ); +export const AccessoryFaviconStates = () => ( + + ({value: size, label: size})), + })} + columnProps={permutateProps({ + className: [{label: 'Gmail', value: ''}], + })} + > + {props => } + + +); + export const AccessoryFileStates = () => ( Date: Wed, 7 Oct 2026 11:10:20 -0600 Subject: [PATCH 09/13] fix: Clean up faivcon --- .../accessory/stories/examples/Favicon.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 modules/labs-react/accessory/stories/examples/Favicon.tsx diff --git a/modules/labs-react/accessory/stories/examples/Favicon.tsx b/modules/labs-react/accessory/stories/examples/Favicon.tsx new file mode 100644 index 0000000000..6bad864242 --- /dev/null +++ b/modules/labs-react/accessory/stories/examples/Favicon.tsx @@ -0,0 +1,19 @@ +import {AccessoryFavicon} from '@workday/canvas-kit-labs-react/accessory'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const rowStyles = createStyles({ + display: 'flex', + alignItems: 'center', + gap: system.gap.sm, +}); + +export const Favicon = () => ( +
+ + + + + +
+); From da9c41385cfdc01edd63d73d43464ad63147970d Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Oct 2026 13:31:11 -0600 Subject: [PATCH 10/13] fix(labs-react): Use legacy colors for accessory glyphs Chromatic media states no longer depend on a remote image. Co-authored-by: Cursor --- .../labs-react/accessory/lib/AccessoryFile.tsx | 16 ++++++++-------- .../labs-react/accessory/lib/AccessoryMedia.tsx | 6 +++--- .../accessory/stories/testing.stories.tsx | 11 ++++++++++- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/modules/labs-react/accessory/lib/AccessoryFile.tsx b/modules/labs-react/accessory/lib/AccessoryFile.tsx index df99c75be4..25fe40e001 100644 --- a/modules/labs-react/accessory/lib/AccessoryFile.tsx +++ b/modules/labs-react/accessory/lib/AccessoryFile.tsx @@ -9,7 +9,7 @@ import { tableExpandIcon, txtIcon, } from '@workday/canvas-system-icons-web'; -import {system} from '@workday/canvas-tokens-web'; +import {base, system} from '@workday/canvas-tokens-web'; import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; @@ -54,31 +54,31 @@ export const accessoryFileStencil = createStencil({ modifiers: { type: { pdf: { - [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.iconColor]: base.legacy.neutral0, [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.critical, }, spreadsheet: { - [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.iconColor]: base.legacy.neutral0, [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.positive, }, document: { - [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.iconColor]: base.legacy.neutral0, [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.info, }, presentation: { - [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.iconColor]: base.legacy.neutral0, [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.caution, }, video: { - [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.iconColor]: base.legacy.neutral0, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, file: { - [accessoryStencil.vars.iconColor]: system.color.fg.default, + [accessoryStencil.vars.iconColor]: base.legacy.neutralA800, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, txt: { - [accessoryStencil.vars.iconColor]: system.color.fg.default, + [accessoryStencil.vars.iconColor]: base.legacy.neutralA800, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, }, diff --git a/modules/labs-react/accessory/lib/AccessoryMedia.tsx b/modules/labs-react/accessory/lib/AccessoryMedia.tsx index 424a834078..a87a1a8cea 100644 --- a/modules/labs-react/accessory/lib/AccessoryMedia.tsx +++ b/modules/labs-react/accessory/lib/AccessoryMedia.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon'; import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; -import {system} from '@workday/canvas-tokens-web'; +import {base, system} from '@workday/canvas-tokens-web'; import {Accessory, AccessoryProps, accessoryStencil} from './Accessory'; @@ -25,7 +25,7 @@ export interface AccessoryMediaProps extends AccessoryProps { /** * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When * set, a scrim is painted under the icon for contrast. Uses `color` from `Accessory` for the - * glyph (`system.color.fg.inverse` by default). + * glyph (`base.legacy.neutral0` by default). */ icon?: SystemIconProps['icon']; } @@ -101,7 +101,7 @@ export const AccessoryMedia = createComponent('span')({ size = 'extraLarge', objectFit = 'cover', icon, - color = system.color.fg.inverse, + color = base.legacy.neutral0, background, ...elemProps }: AccessoryMediaProps, diff --git a/modules/labs-react/accessory/stories/testing.stories.tsx b/modules/labs-react/accessory/stories/testing.stories.tsx index 5c79531366..7d39d2fac7 100644 --- a/modules/labs-react/accessory/stories/testing.stories.tsx +++ b/modules/labs-react/accessory/stories/testing.stories.tsx @@ -46,7 +46,16 @@ const fileTypes: AccessoryFileType[] = [ 'txt', ]; -const photo = 'https://picsum.photos/seed/accessory/200/200'; +const photo = + 'data:image/svg+xml,' + + encodeURIComponent( + ` + + + + + ` + ); export const AccessoryIconStates = () => ( From 5d067ddd5a70ee35cf799b5c8b64981fb8e7bbe8 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Oct 2026 14:18:35 -0600 Subject: [PATCH 11/13] fix(labs-react): Remove unused Subtext import from Accessory example Co-authored-by: Cursor --- modules/labs-react/accessory/stories/examples/Custom.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/labs-react/accessory/stories/examples/Custom.tsx b/modules/labs-react/accessory/stories/examples/Custom.tsx index 2d4996fef7..854b23b828 100644 --- a/modules/labs-react/accessory/stories/examples/Custom.tsx +++ b/modules/labs-react/accessory/stories/examples/Custom.tsx @@ -3,7 +3,6 @@ import { AccessoryMedia, accessoryStencil, } from '@workday/canvas-kit-labs-react/accessory'; -import {Subtext} from '@workday/canvas-kit-react/text'; import {createStencil, createStyles} from '@workday/canvas-kit-styling'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; From 2086cf1b0826228e601845c687ea1b21aa44ce54 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 9 Oct 2026 09:08:46 -0600 Subject: [PATCH 12/13] fix: Update based on feedback --- .../labs-react/accessory/lib/Accessory.tsx | 10 +++++----- .../accessory/lib/AccessoryFavicon.tsx | 12 ++++++++++- .../accessory/lib/AccessoryFile.tsx | 20 +++++++++---------- .../accessory/spec/Accessory.spec.tsx | 1 + .../accessory/stories/Accessory.mdx | 6 ++++-- .../accessory/stories/examples/Favicon.tsx | 7 ++----- 6 files changed, 33 insertions(+), 23 deletions(-) diff --git a/modules/labs-react/accessory/lib/Accessory.tsx b/modules/labs-react/accessory/lib/Accessory.tsx index 8ed29ad9f0..0b58d5e6a7 100644 --- a/modules/labs-react/accessory/lib/Accessory.tsx +++ b/modules/labs-react/accessory/lib/Accessory.tsx @@ -6,8 +6,8 @@ import {base, component, system} from '@workday/canvas-tokens-web'; /** * The size of an `Accessory` tile. * - * * `extraSmall` — 16px tile, 10px icon - * * `small` — 20px tile, 12px icon + * * `extraSmall` — 16px tile, 16px icon + * * `small` — 20px tile, 18px icon * * `medium` — 24px tile, 16px icon * * `large` — 32px tile, 18px icon * * `extraLarge` — 40px tile, 20px icon @@ -16,8 +16,8 @@ export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extra export interface AccessoryProps extends CSProps { /** - * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 10px, - * 12px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`. + * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 16px, + * 18px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`. * * * `extraSmall` — 16px * * `small` — 20px @@ -88,7 +88,7 @@ export const accessoryStencil = createStencil({ small: ({iconPart, tileBackground}) => ({ width: system.legacy.size.xxs, height: system.legacy.size.xxs, - [cornerShapeStencil.vars.shape]: base.legacy.size75, + [cornerShapeStencil.vars.shape]: system.sana.shape.sm, [iconPart]: { [systemIconStencil.vars.size]: base.legacy.size225, backgroundColor: cssVar(tileBackground, 'transparent'), diff --git a/modules/labs-react/accessory/lib/AccessoryFavicon.tsx b/modules/labs-react/accessory/lib/AccessoryFavicon.tsx index 47745288d5..aaf129ac69 100644 --- a/modules/labs-react/accessory/lib/AccessoryFavicon.tsx +++ b/modules/labs-react/accessory/lib/AccessoryFavicon.tsx @@ -118,6 +118,10 @@ export const accessoryFaviconStencil = createStencil({ * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at * smaller sizes. Always decorative. + * + * The image is requested from the user's browser at `https://www.google.com/s2/favicons`. Google + * receives the hostname and the user's IP address. `referrerPolicy="no-referrer"` keeps the app + * origin off that request. It does not proxy the request. */ export const AccessoryFavicon = createComponent('span')({ displayName: 'AccessoryFavicon', @@ -138,7 +142,13 @@ export const AccessoryFavicon = createComponent('span')({ > {src ? ( - + ) : null} diff --git a/modules/labs-react/accessory/lib/AccessoryFile.tsx b/modules/labs-react/accessory/lib/AccessoryFile.tsx index 25fe40e001..084ea17e07 100644 --- a/modules/labs-react/accessory/lib/AccessoryFile.tsx +++ b/modules/labs-react/accessory/lib/AccessoryFile.tsx @@ -54,31 +54,31 @@ export const accessoryFileStencil = createStencil({ modifiers: { type: { pdf: { - [accessoryStencil.vars.iconColor]: base.legacy.neutral0, - [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.critical, + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.danger, }, spreadsheet: { - [accessoryStencil.vars.iconColor]: base.legacy.neutral0, - [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.positive, + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.success, }, document: { - [accessoryStencil.vars.iconColor]: base.legacy.neutral0, + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.info, }, presentation: { - [accessoryStencil.vars.iconColor]: base.legacy.neutral0, - [accessoryStencil.vars.tileBackground]: system.legacy.color.brand.accent.caution, + [accessoryStencil.vars.iconColor]: system.color.fg.inverse, + [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.warning, }, video: { - [accessoryStencil.vars.iconColor]: base.legacy.neutral0, + [accessoryStencil.vars.iconColor]: system.color.fg.default, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, file: { - [accessoryStencil.vars.iconColor]: base.legacy.neutralA800, + [accessoryStencil.vars.iconColor]: system.color.fg.default, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, txt: { - [accessoryStencil.vars.iconColor]: base.legacy.neutralA800, + [accessoryStencil.vars.iconColor]: system.color.fg.default, [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default, }, }, diff --git a/modules/labs-react/accessory/spec/Accessory.spec.tsx b/modules/labs-react/accessory/spec/Accessory.spec.tsx index 8e9d533597..96189e984d 100644 --- a/modules/labs-react/accessory/spec/Accessory.spec.tsx +++ b/modules/labs-react/accessory/spec/Accessory.spec.tsx @@ -76,6 +76,7 @@ describe('Accessory', () => { 'https://www.google.com/s2/favicons?domain=mail.google.com&sz=180' ); expect(img).toHaveAttribute('alt', ''); + expect(img).toHaveAttribute('referrerPolicy', 'no-referrer'); expect(screen.queryByRole('img')).not.toBeInTheDocument(); }); diff --git a/modules/labs-react/accessory/stories/Accessory.mdx b/modules/labs-react/accessory/stories/Accessory.mdx index f91bff9fb8..6be29caf41 100644 --- a/modules/labs-react/accessory/stories/Accessory.mdx +++ b/modules/labs-react/accessory/stories/Accessory.mdx @@ -62,8 +62,10 @@ to center a glyph on a contrast scrim. ### Favicon -`AccessoryFavicon` resolves a brand mark from a site URL or domain. At `large` and `extraLarge` the -mark sits inset in an outlined tile. At `medium` and smaller it fills the tile. +`AccessoryFavicon` resolves a brand mark from a site URL or domain. The browser requests that mark +from Google's favicon service, which receives the hostname and the user's IP. The image uses +`referrerPolicy="no-referrer"`, so the app origin is not sent. At `large` and `extraLarge` the mark +sits inset in an outlined tile. At `medium` and smaller it fills the tile. diff --git a/modules/labs-react/accessory/stories/examples/Favicon.tsx b/modules/labs-react/accessory/stories/examples/Favicon.tsx index 6bad864242..cd380b0090 100644 --- a/modules/labs-react/accessory/stories/examples/Favicon.tsx +++ b/modules/labs-react/accessory/stories/examples/Favicon.tsx @@ -10,10 +10,7 @@ const rowStyles = createStyles({ export const Favicon = () => (
- - - - - + +
); From 9b795bdc2b47f0fc0dda6eb9900d25db5dab5f00 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 9 Oct 2026 09:43:04 -0600 Subject: [PATCH 13/13] fix: Update typehceck --- modules/labs-react/accessory/lib/AccessoryFile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/labs-react/accessory/lib/AccessoryFile.tsx b/modules/labs-react/accessory/lib/AccessoryFile.tsx index 084ea17e07..97b4bf1420 100644 --- a/modules/labs-react/accessory/lib/AccessoryFile.tsx +++ b/modules/labs-react/accessory/lib/AccessoryFile.tsx @@ -9,7 +9,7 @@ import { tableExpandIcon, txtIcon, } from '@workday/canvas-system-icons-web'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; import {Accessory, AccessoryProps, accessoryStencil} from './Accessory';