diff --git a/playwright/core/expectScreenshotFixture.ts b/playwright/core/expectScreenshotFixture.ts index 49e9afba96..6e769247dd 100644 --- a/playwright/core/expectScreenshotFixture.ts +++ b/playwright/core/expectScreenshotFixture.ts @@ -29,6 +29,18 @@ export const expectScreenshotFixture: PlaywrightFixture const themes = paramsThemes || defaultParams.themes; + // Wait for loading of all the images + const locators = await page.locator('//img').all(); + await Promise.all( + locators.map((locator) => + locator.evaluate( + (image: HTMLImageElement) => + image.complete || + new Promise((resolve) => image.addEventListener('load', resolve)), + ), + ), + ); + if (themes?.includes('light')) { await page.emulateMedia({colorScheme: 'light'}); diff --git a/playwright/playwright.config.ts b/playwright/playwright.config.ts index 802d1b97cb..7c423e4aa2 100644 --- a/playwright/playwright.config.ts +++ b/playwright/playwright.config.ts @@ -33,7 +33,6 @@ const config: PlaywrightTestConfig = { updateSnapshots: process.env.UPDATE_REQUEST ? 'all' : 'missing', snapshotPathTemplate: '{testDir}/{testFileDir}/../__snapshots__/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}', - /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ /* Maximum time one test can run for. */ timeout: 10 * 1000, /* Run tests in files in parallel */ @@ -52,7 +51,6 @@ const config: PlaywrightTestConfig = { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', headless: true, - /* Port to use for Playwright component endpoint. */ screenshot: 'only-on-failure', timezoneId: 'UTC', ctCacheDir: process.env.IS_DOCKER ? '.cache-docker' : '.cache', diff --git a/scripts/playwright-docker.sh b/scripts/playwright-docker.sh index 8b59d87b21..58879a3fa2 100755 --- a/scripts/playwright-docker.sh +++ b/scripts/playwright-docker.sh @@ -12,12 +12,12 @@ command_exists() { } run_command() { - $CONTAINER_TOOL run --rm --network host -it -w /work \ - -v $(pwd):/work \ - -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \ - -e IS_DOCKER=1 \ - "$IMAGE_NAME:$IMAGE_TAG" \ - /bin/bash -c "$1" + $CONTAINER_TOOL run --rm --network host -it -w /work \ + -v $(pwd):/work \ + -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \ + -e IS_DOCKER=1 \ + "$IMAGE_NAME:$IMAGE_TAG" \ + /bin/bash -c "$1" } if command_exists docker; then @@ -30,14 +30,14 @@ else fi if [[ "$1" = "clear-cache" ]]; then - rm -rf "$NODE_MODULES_CACHE_DIR" - rm -rf "./playwright/.cache-docker" - exit 0 + rm -rf "$NODE_MODULES_CACHE_DIR" + rm -rf "./playwright/.cache-docker" + exit 0 fi if [[ ! -d "$NODE_MODULES_CACHE_DIR" ]]; then - mkdir -p "$NODE_MODULES_CACHE_DIR" - run_command 'npm ci' + mkdir -p "$NODE_MODULES_CACHE_DIR" + run_command 'npm ci' fi run_command "$1" diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss index 0ea1866bf3..6a1943d5d8 100644 --- a/src/components/Avatar/Avatar.scss +++ b/src/components/Avatar/Avatar.scss @@ -5,12 +5,14 @@ $block: '.#{variables.$ns}avatar'; #{$block} { --_--size: #{avatar-variables.$default-size}; - --_--background-color: var(--g-color-base-misc-light); + --_--border-width: 2px; + --_--inner-border-width: 3px; --_--border-color: currentColor; + --_--background-color: var(--g-color-base-misc-light); --_--color: var(--g-color-text-misc); + --_--font-weight: var(--g-text-body-font-weight); --_--font-size: var(--g-text-body-1-font-size); --_--line-height: var(--g-text-body-1-line-height); - --_--font-weight: var(--g-text-body-font-weight); overflow: hidden; display: inline-flex; @@ -21,28 +23,6 @@ $block: '.#{variables.$ns}avatar'; border-radius: 50%; background-color: var(--g-avatar-background-color, var(--_--background-color)); - &__image { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - - &__icon { - color: var(--g-avatar-color, var(--_--color)); - - & > svg { - display: block; - } - } - - &__text { - color: var(--g-avatar-color, var(--_--color)); - font-size: var(--g-avatar-font-size, var(--_--font-size)); - line-height: var(--g-avatar-line-height, var(--_--line-height)); - font-weight: var(--_--font-weight); - } - &_with-border, &_view_outlined { position: relative; @@ -57,11 +37,13 @@ $block: '.#{variables.$ns}avatar'; } &::before { - border: 3px solid var(--g-color-base-background); + border: var(--g-avatar-inner-border-width, var(--_--inner-border-width)) solid + var(--g-color-base-background); } &::after { - border: 2px solid var(--g-avatar-border-color, var(--_--border-color)); + border: var(--g-avatar-border-width, var(--_--border-width)) solid + var(--g-avatar-border-color, var(--_--border-color)); } } @@ -72,30 +54,46 @@ $block: '.#{variables.$ns}avatar'; } } - &_2xs { + &_3xs, + &_2xs, + &_xs { + --_--font-weight: var(--g-text-caption-font-weight); --_--font-size: var(--g-text-caption-1-font-size); --_--line-height: var(--g-text-caption-1-line-height); - --_--font-weight: var(--g-text-caption-font-weight); } - &_xs, &_s { - --_--font-size: var(--g-text-caption-1-font-size); - --_--line-height: var(--g-text-caption-1-line-height); --_--font-weight: var(--g-text-caption-font-weight); + --_--font-size: var(--g-text-caption-2-font-size); + --_--line-height: var(--g-text-caption-2-line-height); } &_m, &_l { + --_--font-weight: var(--g-text-subheader-font-weight); --_--font-size: var(--g-text-subheader-1-font-size); --_--line-height: var(--g-text-subheader-1-line-height); - --_--font-weight: var(--g-text-subheader-font-weight); } &_xl { + --_--font-weight: var(--g-text-subheader-font-weight); --_--font-size: var(--g-text-subheader-2-font-size); --_--line-height: var(--g-text-subheader-2-line-height); - --_--font-weight: var(--g-text-subheader-font-weight); + } + + &_3xs, + &_2xs { + --_--border-width: 1.5px; + --_--inner-border-width: 2.5px; + } + + &_xs, + &_s, + &_m, + &_l, + &_xl { + --_--border-width: 2px; + --_--inner-border-width: 3px; } } @@ -130,4 +128,26 @@ $block: '.#{variables.$ns}avatar'; } } } + + &__image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__icon { + color: var(--g-avatar-color, var(--_--color)); + + & > svg { + display: block; + } + } + + &__text { + color: var(--g-avatar-color, var(--_--color)); + font-weight: var(--g-avatar-font-weight, var(--_--font-weight)); + font-size: var(--g-avatar-font-size, var(--_--font-size)); + line-height: var(--g-avatar-line-height, var(--_--line-height)); + } } diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 61b5cef88c..aa9c86f071 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {block} from '../utils/cn'; +import {filterDOMProps} from '../utils/filterDOMProps'; import {AvatarIcon} from './AvatarIcon'; import {AvatarImage} from './AvatarImage'; @@ -20,8 +21,6 @@ export const Avatar = React.forwardRef((props, ref) backgroundColor, borderColor, title, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledby, className, style: styleProp, qa, @@ -75,11 +74,10 @@ export const Avatar = React.forwardRef((props, ref) className={b({size, theme, view, 'with-border': Boolean(borderColor)}, className)} title={title} role="img" - aria-label={ariaLabel} - aria-labelledby={ariaLabelledby} style={style} data-qa={qa} ref={ref} + {...filterDOMProps(props, {labelable: true})} > {renderContent()} diff --git a/src/components/Avatar/AvatarIcon/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon/AvatarIcon.tsx index b34625c0ff..62ae916292 100644 --- a/src/components/Avatar/AvatarIcon/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon/AvatarIcon.tsx @@ -6,6 +6,7 @@ import type {AvatarSize} from '../types/common'; import type {AvatarIconProps} from './types'; const avatarSizeToIconSize: Record = { + '3xs': 10, '2xs': 12, xs: 14, s: 16, diff --git a/src/components/Avatar/AvatarText/AvatarText.tsx b/src/components/Avatar/AvatarText/AvatarText.tsx index 05f3c9cb92..bd4cb5d38f 100644 --- a/src/components/Avatar/AvatarText/AvatarText.tsx +++ b/src/components/Avatar/AvatarText/AvatarText.tsx @@ -3,9 +3,9 @@ import React from 'react'; import type {AvatarTextProps} from './types'; import {getAvatarDisplayText} from './utils'; -export const AvatarText = ({text, color, className}: AvatarTextProps) => { +export const AvatarText = ({text, color, size, className}: AvatarTextProps) => { const style = {color}; - const displayText = getAvatarDisplayText(text); + const displayText = getAvatarDisplayText(text, size); return (
diff --git a/src/components/Avatar/AvatarText/utils.ts b/src/components/Avatar/AvatarText/utils.ts index 1ab9966299..de72a1f20a 100644 --- a/src/components/Avatar/AvatarText/utils.ts +++ b/src/components/Avatar/AvatarText/utils.ts @@ -1,7 +1,15 @@ -export const getAvatarDisplayText = (text: string) => { - const words = text.split(/\s+/); - const result = - words.length > 1 ? [words[0][0], words[1][0]].filter(Boolean).join('') : text.slice(0, 2); +import type {AvatarSize} from '../types/common'; - return result.toUpperCase(); +export const getAvatarDisplayText = (text: string, size: AvatarSize) => { + if (size === '3xs') { + return text[0].toUpperCase(); + } + + const words = text.split(/[^a-zA-Z]+/); + + if (words.length <= 1) { + return text.slice(0, 2).toUpperCase(); + } + + return [words[0][0], words[1][0]].filter(Boolean).join('').toUpperCase(); }; diff --git a/src/components/Avatar/README.md b/src/components/Avatar/README.md index 63f2edbcce..32f1e853d9 100644 --- a/src/components/Avatar/README.md +++ b/src/components/Avatar/README.md @@ -141,12 +141,13 @@ LANDING_BLOCK--> ### Size -To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `2xs`, `xs`, `s`, `m`, `l`, `xl`. +To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`. ### Common -| Name | Description | Type | Default | -| :-------------- | :-------------------------------------- | :-------------------------------------: | :------: | -| size | Avatar size | `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` | -| theme | Avatar theme | `'normal'` `'brand'` | `normal` | -| view | Avatar view | `'filled'` `'outlined'` | `filled` | -| backgroundColor | Custom background color | `string` | | -| borderColor | Custom border color | `string` | | -| title | HTML `title` attributes | `string` | | -| aria-label | `aria-label` for avatar block | `string` | | -| aria-labelledby | `aria-labelledby` for avatar block | `string` | | -| className | Custom CSS class for root element | `string` | | -| style | HTML style attribute | `React.CSSProperties` | | -| qa | HTML `data-qa` attribute, used in tests | `string` | | +| Name | Description | Type | Default | +| :--------------- | :-------------------------------------- | :---------------------------------------------: | :------: | +| size | Avatar size | `'3xs'` `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` | +| theme | Avatar theme | `'normal'` `'brand'` | `normal` | +| view | Avatar view | `'filled'` `'outlined'` | `filled` | +| backgroundColor | Custom background color | `string` | | +| borderColor | Custom border color | `string` | | +| title | HTML `title` attributes | `string` | | +| aria-label | `aria-label` for avatar block | `string` | | +| aria-labelledby | `aria-labelledby` for avatar block | `string` | | +| aria-describedby | `aria-describedby` for avatar block | `string` | | +| aria-details | `aria-details` for avatar block | `string` | | +| className | Custom CSS class for root element | `string` | | +| style | HTML style attribute | `React.CSSProperties` | | +| qa | HTML `data-qa` attribute, used in tests | `string` | | ### Image-specific @@ -210,11 +214,14 @@ LANDING_BLOCK--> ## CSS API -| Name | Description | -| :---------------------------- | :---------------------- | -| `--g-avatar-size` | Size (width and height) | -| `--g-avatar-background-color` | Background color | -| `--g-avatar-border-color` | Border color | -| `--g-avatar-color` | Icon and text color | -| `--g-avatar-font-size` | Text font size | -| `--g-avatar-line-height` | Text line height | +| Name | Description | +| :------------------------------ | :---------------------- | +| `--g-avatar-size` | Size (width and height) | +| `--g-avatar-border-width` | Border width | +| `--g-avatar-inner-border-width` | Inner border width | +| `--g-avatar-border-color` | Border color | +| `--g-avatar-background-color` | Background color | +| `--g-avatar-color` | Icon and text color | +| `--g-avatar-font-weight` | Text font weight | +| `--g-avatar-font-size` | Text font size | +| `--g-avatar-line-height` | Text line height | diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-chromium-linux.png deleted file mode 100644 index d849f90c6b..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-webkit-linux.png deleted file mode 100644 index 0c343c9af8..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-chromium-linux.png new file mode 100644 index 0000000000..12b15646da Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-webkit-linux.png new file mode 100644 index 0000000000..71fa4831a4 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-chromium-linux.png new file mode 100644 index 0000000000..4ac0172d27 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-webkit-linux.png new file mode 100644 index 0000000000..32497e5eb6 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Icon-light-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-chromium-linux.png deleted file mode 100644 index 8a7a8b192f..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-webkit-linux.png deleted file mode 100644 index 603f4ccf56..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-chromium-linux.png new file mode 100644 index 0000000000..444fb52a1b Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-webkit-linux.png new file mode 100644 index 0000000000..fae6b482bc Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-chromium-linux.png new file mode 100644 index 0000000000..283d5c677e Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-webkit-linux.png new file mode 100644 index 0000000000..810c08caa1 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Image-light-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-1-chromium-linux.png deleted file mode 100644 index 8a7a8b192f..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-dark-chromium-linux.png new file mode 100644 index 0000000000..444fb52a1b Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-light-chromium-linux.png new file mode 100644 index 0000000000..283d5c677e Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-ImageFallback-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-chromium-linux.png deleted file mode 100644 index e8d1040607..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-webkit-linux.png deleted file mode 100644 index 32c6a4708c..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-chromium-linux.png new file mode 100644 index 0000000000..1813285d3f Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-webkit-linux.png new file mode 100644 index 0000000000..a8fdcbe603 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-chromium-linux.png new file mode 100644 index 0000000000..0c01dcb1f3 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-webkit-linux.png new file mode 100644 index 0000000000..3cbdbbd05a Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-light-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-chromium-linux.png deleted file mode 100644 index e662f2dc70..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-webkit-linux.png deleted file mode 100644 index ecef4ac4b8..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-chromium-linux.png new file mode 100644 index 0000000000..812a3c92b2 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-webkit-linux.png new file mode 100644 index 0000000000..d31e459c07 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-chromium-linux.png new file mode 100644 index 0000000000..9e90e8b9f1 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-webkit-linux.png new file mode 100644 index 0000000000..e76113f3b8 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-Text-light-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-chromium-linux.png deleted file mode 100644 index e8015e0799..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-webkit-linux.png deleted file mode 100644 index e9619e35bd..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-chromium-linux.png new file mode 100644 index 0000000000..f7c116f757 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-webkit-linux.png new file mode 100644 index 0000000000..2f839e05be Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-chromium-linux.png new file mode 100644 index 0000000000..af5ec55afb Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-webkit-linux.png new file mode 100644 index 0000000000..84dabf3b54 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-TextInitials-light-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-chromium-linux.png deleted file mode 100644 index d279870575..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-chromium-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-webkit-linux.png deleted file mode 100644 index f7f0b7ce61..0000000000 Binary files a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-1-webkit-linux.png and /dev/null differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-chromium-linux.png new file mode 100644 index 0000000000..51dd7b4922 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-webkit-linux.png new file mode 100644 index 0000000000..a04e1fc47c Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-dark-webkit-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-chromium-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-chromium-linux.png new file mode 100644 index 0000000000..30406f8093 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-chromium-linux.png differ diff --git a/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-webkit-linux.png b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-webkit-linux.png new file mode 100644 index 0000000000..ae345285b0 Binary files /dev/null and b/src/components/Avatar/__snapshots__/Avatar.visual.test.tsx-snapshots/Avatar-render-story-WithBorder-light-webkit-linux.png differ diff --git a/src/components/Avatar/__stories__/Avatar.stories.tsx b/src/components/Avatar/__stories__/Avatar.stories.tsx index 9cf2207c4d..c1b56a4b23 100644 --- a/src/components/Avatar/__stories__/Avatar.stories.tsx +++ b/src/components/Avatar/__stories__/Avatar.stories.tsx @@ -54,12 +54,14 @@ const randomAvatars = faker.helpers const imageProps = { imgUrl, + alt: 'Sample image', }; const iconProps = { backgroundColor: 'var(--g-color-base-brand)', icon: FaceRobot, color: 'var(--g-color-text-brand-contrast)', + 'aria-label': 'Sample icon', }; const textProps = { @@ -132,9 +134,8 @@ export const TextInitials: Story = { export const WithBorder: Story = { args: { - imgUrl, + ...imageProps, borderColor: 'var(--g-color-line-misc)', - alt: 'Sample image', 'aria-label': 'Image with border', }, }; @@ -145,52 +146,33 @@ export const AvatarShowcase: Story = { return ( + + + - + - + - + - + - + + + + @@ -198,7 +180,6 @@ export const AvatarShowcase: Story = { {...imageProps} size="2xs" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with 2XS size and border" /> @@ -207,7 +188,6 @@ export const AvatarShowcase: Story = { {...imageProps} size="xs" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with XS size and border" /> @@ -216,7 +196,6 @@ export const AvatarShowcase: Story = { {...imageProps} size="s" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with S size and border" /> @@ -225,7 +204,6 @@ export const AvatarShowcase: Story = { {...imageProps} size="m" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with M size and border" /> @@ -234,7 +212,6 @@ export const AvatarShowcase: Story = { {...imageProps} size="l" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with L size and border" /> @@ -243,80 +220,58 @@ export const AvatarShowcase: Story = { {...imageProps} size="xl" borderColor={BORDER_COLOR} - alt="Sample image" aria-label="Avatar with XL size and border" /> + + + - + - + - + - + - + - + + + + - + - + - + - + - + - + + + + @@ -335,6 +290,14 @@ export const AvatarShowcase: Story = { + + + { - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount, browserName}) => { + test('render story: ', async ({browserName, mount, expectScreenshot}) => { test.skip(browserName === 'webkit', 'Test is flaky for webkit'); const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); - test('render story: ', async ({mount}) => { + test('render story: ', async ({mount, expectScreenshot}) => { const component = await mount(); - - await expect(component).toHaveScreenshot(); + await expectScreenshot({component}); }); }); diff --git a/src/components/Avatar/_variables.scss b/src/components/Avatar/_variables.scss index 957c60eb0b..ba9acd3e19 100644 --- a/src/components/Avatar/_variables.scss +++ b/src/components/Avatar/_variables.scss @@ -1,6 +1,7 @@ @use 'sass:map'; $sizes: ( + '3xs': 16px, '2xs': 20px, 'xs': 24px, 's': 28px, diff --git a/src/components/Avatar/constants.ts b/src/components/Avatar/constants.ts index 0b470c5be9..a127e58a44 100644 --- a/src/components/Avatar/constants.ts +++ b/src/components/Avatar/constants.ts @@ -1,6 +1,7 @@ import type {AvatarSize} from './types/common'; export const AVATAR_SIZES: Record = { + '3xs': 16, '2xs': 20, xs: 24, s: 28, diff --git a/src/components/Avatar/types/common.ts b/src/components/Avatar/types/common.ts index 6d3a51a1ff..ce41d14ac6 100644 --- a/src/components/Avatar/types/common.ts +++ b/src/components/Avatar/types/common.ts @@ -1,6 +1,7 @@ -export type AvatarSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'; +import type {DOMProps} from '../../types'; -export interface AvatarCommonProps { +export type AvatarSize = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'; + +export interface AvatarCommonProps extends Pick { size: AvatarSize; - className?: string; } diff --git a/src/components/Avatar/types/main.ts b/src/components/Avatar/types/main.ts index 17037a6e47..f5fb575296 100644 --- a/src/components/Avatar/types/main.ts +++ b/src/components/Avatar/types/main.ts @@ -1,5 +1,5 @@ import type {DistributiveOmit} from '../../../types/utils'; -import type {DOMProps, QAProps} from '../../types'; +import type {AriaLabelingProps, DOMProps, QAProps} from '../../types'; import type {AvatarIconProps} from '../AvatarIcon'; import type {AvatarImageProps} from '../AvatarImage'; import type {AvatarTextProps} from '../AvatarText'; @@ -9,12 +9,7 @@ import type {AvatarCommonProps, AvatarSize} from './common'; export type AvatarTheme = 'normal' | 'brand'; export type AvatarView = 'filled' | 'outlined'; -interface AvatarAriaProps { - 'aria-label'?: string; - 'aria-labelledby'?: string; -} - -interface AvatarBaseProps extends DOMProps, QAProps, AvatarAriaProps { +interface AvatarBaseProps extends AriaLabelingProps, DOMProps, QAProps { size?: AvatarSize; theme?: AvatarTheme; view?: AvatarView; @@ -24,7 +19,4 @@ interface AvatarBaseProps extends DOMProps, QAProps, AvatarAriaProps { } export type AvatarProps = AvatarBaseProps & - DistributiveOmit< - AvatarImageProps | AvatarIconProps | AvatarTextProps | AvatarAriaProps, - keyof AvatarCommonProps - >; + DistributiveOmit; diff --git a/src/components/User/README.md b/src/components/User/README.md index 94f6f4060b..b67670c229 100644 --- a/src/components/User/README.md +++ b/src/components/User/README.md @@ -28,7 +28,7 @@ LANDING_BLOCK--> ## Size -To control the size of the `User` use the `size` property. The default size is `m`. Possible values: `2xs`, `xs`, `s`, `m`, `l`, `xl`. +To control the size of the `User` use the `size` property. The default size is `m`. Possible values: `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`. This propeperty passes to the internal `Avatar` component too. @@ -36,6 +36,7 @@ This propeperty passes to the internal `Avatar` component too. @@ -44,6 +45,7 @@ This propeperty passes to the internal `Avatar` component too. `} > + @@ -56,21 +58,26 @@ LANDING_BLOCK--> ## Properties -| Name | Description | Type | Default | -| :-------------- | :-------------------------------------- | :----------------------------------------------------------------: | :-----: | -| avatar | User avatar | [AvatarProps](../Avatar/README.md#properties) `React.ReactElement` | | -| name | User name | `React.ReactNode` | | -| description | User description | `React.ReactNode` | | -| size | User block size | `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` | -| aria-label | `aria-label` for user block | `string` | | -| aria-labelledby | `aria-labelledby` for user block | `string` | | -| className | Custom CSS class for root element | `string` | | -| style | HTML style attribute | `React.CSSProperties` | | -| qa | HTML `data-qa` attribute, used in tests | `string` | | +| Name | Description | Type | Default | +| :-------------- | :-------------------------------------- | :-------------------------------------------------------------------------: | :-----: | +| avatar | User avatar | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` | | +| name | User name | `React.ReactNode` | | +| description | User description | `React.ReactNode` | | +| size | User block size | `'3xs'` `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` | +| aria-label | `aria-label` for user block | `string` | | +| aria-labelledby | `aria-labelledby` for user block | `string` | | +| className | Custom CSS class for root element | `string` | | +| style | HTML style attribute | `React.CSSProperties` | | +| qa | HTML `data-qa` attribute, used in tests | `string` | | ## CSS API -| Name | Description | -| :--------------------- | :------------------------------- | -| `--g-user-font-size` | Name and description font size | -| `--g-user-line-height` | Name and description line height | +| Name | Description | +| :--------------------------------- | :-------------------------------- | +| `--g-user-gap` | Gap between avatar and text block | +| `--g-user-name-font-weight` | Name font weight | +| `--g-user-name-font-size` | Name font size | +| `--g-user-name-line-height` | Name line height | +| `--g-user-description-font-weight` | Description font weight | +| `--g-user-description-font-size` | Description font size | +| `--g-user-description-line-height` | Description line height | diff --git a/src/components/User/User.scss b/src/components/User/User.scss index 962040ee19..30a9b63ede 100644 --- a/src/components/User/User.scss +++ b/src/components/User/User.scss @@ -3,22 +3,51 @@ $block: '.#{variables.$ns}user'; -@mixin user-text() { - @include mixins.text-body-short(); - - font-size: var(--g-user-font-size, var(--g-text-body-short-font-size)); - line-height: var(--g-user-line-height, var(--g-text-body-short-line-height)); -} - -@mixin user-text-small() { - font-size: var(--g-user-font-size, var(--g-text-code-inline-1-font-size)); - line-height: var(--g-user-line-height, var(--g-text-code-inline-1-line-height)); - font-weight: var(--g-text-body-font-weight); -} - #{$block} { + --_--gap: var(--g-spacing-2); + --_--name-font-weight: var(--g-text-body-font-weight); + --_--name-font-size: var(--g-text-body-short-font-size); + --_--name-line-height: var(--g-text-body-short-line-height); + --_--description-font-weight: var(--g-text-body-font-weight); + --_--description-font-size: var(--g-text-body-short-font-size); + --_--description-line-height: var(--g-text-body-short-line-height); + display: flex; align-items: center; + gap: var(--g-user-gap, var(--_--gap)); + + &_size { + &_3xs, + &_2xs, + &_xs, + &_s { + --_--gap: calc(var(--g-spacing-base) * 1.5); + } + + &_m { + --_--gap: var(--g-spacing-2); + } + + &_l, + &_xl { + --_--gap: var(--g-spacing-3); + } + + &_3xs, + &_2xs, + &_xs, + &_s, + &_m, + &_l { + --_--name-font-size: var(--g-text-body-short-font-size); + --_--name-line-height: var(--g-text-body-short-line-height); + } + + &_xl { + --_--name-font-size: var(--g-text-body-2-font-size); + --_--name-line-height: var(--g-text-body-2-line-height); + } + } &__avatar { display: flex; @@ -31,35 +60,22 @@ $block: '.#{variables.$ns}user'; flex-direction: column; min-width: 0; - @include user-text(); - #{$block}__name { - color: var(--g-color-text-primary); @include mixins.overflow-ellipsis(); + + color: var(--g-color-text-primary); + font-weight: var(--g-user-name-font-weight, var(--_--name-font-weight)); + font-size: var(--g-user-name-font-size, var(--_--name-font-size)); + line-height: var(--g-user-name-line-height, var(--_--name-line-height)); } #{$block}__description { - color: var(--g-color-text-secondary); @include mixins.overflow-ellipsis(); - } - } - - &__avatar + &__info { - margin-inline-start: 12px; - } - - &_size { - &_xs, - &_2xs { - #{$block}__avatar + #{$block}__info { - margin-inline-start: 6px; - } - } - &_2xs { - #{$block}__info { - @include user-text-small(); - } + color: var(--g-color-text-secondary); + font-weight: var(--g-user-description-font-weight, var(--_--description-font-weight)); + font-size: var(--g-user-description-font-size, var(--_--description-font-size)); + line-height: var(--g-user-description-line-height, var(--_--description-line-height)); } } } diff --git a/src/components/User/User.tsx b/src/components/User/User.tsx index 27494bc830..7761182a30 100644 --- a/src/components/User/User.tsx +++ b/src/components/User/User.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {Avatar} from '../Avatar'; import {block} from '../utils/cn'; -import {COMPACT_SIZES, DEFAULT_SIZE} from './constants'; +import {COMPACT_SIZES, DEFAULT_USER_SIZE} from './constants'; import type {UserProps} from './types'; import './User.scss'; @@ -21,7 +21,7 @@ export const User = React.forwardRef( avatar, name, description, - size = DEFAULT_SIZE, + size = DEFAULT_USER_SIZE, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, @@ -30,6 +30,16 @@ export const User = React.forwardRef( }, ref, ) => { + let avatarView: React.ReactNode = null; + + if (typeof avatar === 'string') { + avatarView = ; + } else if (React.isValidElement(avatar)) { + avatarView = avatar; + } else if (avatar) { + avatarView = ; + } + const showDescription = Boolean(description && !COMPACT_SIZES.includes(size)); return ( @@ -41,11 +51,7 @@ export const User = React.forwardRef( data-qa={qa} ref={ref} > - {avatar ? ( -
- {React.isValidElement(avatar) ? avatar : } -
- ) : null} + {avatarView ?
{avatarView}
: null} {name || showDescription ? (
{name ? ( diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-chromium-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-chromium-linux.png deleted file mode 100644 index 81de70c937..0000000000 Binary files a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-chromium-linux.png and /dev/null differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-webkit-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-webkit-linux.png deleted file mode 100644 index 5af295c7b6..0000000000 Binary files a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-1-webkit-linux.png and /dev/null differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-chromium-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-chromium-linux.png new file mode 100644 index 0000000000..d5277197e5 Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-chromium-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-webkit-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-webkit-linux.png new file mode 100644 index 0000000000..f0b51fbb85 Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-dark-webkit-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-chromium-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-chromium-linux.png new file mode 100644 index 0000000000..6a81950a45 Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-chromium-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-webkit-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-webkit-linux.png new file mode 100644 index 0000000000..bd48c048c3 Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Default-light-webkit-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-chromium-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-chromium-linux.png new file mode 100644 index 0000000000..fb7ea680cb Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-chromium-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-webkit-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-webkit-linux.png new file mode 100644 index 0000000000..ad0e1926ab Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-dark-webkit-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-chromium-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-chromium-linux.png new file mode 100644 index 0000000000..227a87ae09 Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-chromium-linux.png differ diff --git a/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-webkit-linux.png b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-webkit-linux.png new file mode 100644 index 0000000000..a1b419f6fb Binary files /dev/null and b/src/components/User/__snapshots__/User.visual.test.tsx-snapshots/User-render-story-Showcase-light-webkit-linux.png differ diff --git a/src/components/User/__stories__/User.stories.tsx b/src/components/User/__stories__/User.stories.tsx index 13efa861a4..2f1bb6adbc 100644 --- a/src/components/User/__stories__/User.stories.tsx +++ b/src/components/User/__stories__/User.stories.tsx @@ -1,5 +1,9 @@ +import React from 'react'; + import type {Meta, StoryObj} from '@storybook/react'; +import {Showcase} from '../../../demo/Showcase'; +import {ShowcaseItem} from '../../../demo/ShowcaseItem'; import {User} from '../User'; const meta: Meta = { @@ -24,14 +28,47 @@ export default meta; type Story = StoryObj; +const commonProps = { + avatar: { + imgUrl: 'data:image/png;base64,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', + 'aria-label': "Isaac's avatar", + alt: 'Isaac', + }, + name: 'Isaac', + description: 'user@gravity-ui.com', +}; + export const Default: Story = { - args: { - avatar: { - imgUrl: 'data:image/png;base64,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', - 'aria-label': 'Avatar of user@gravity-ui.com', - alt: 'Isaac', - }, - name: 'Isaac', - description: 'user@gravity-ui.com', + args: commonProps, +}; + +export const UserShowcase: Story = { + name: 'Showcase', + render: () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); }, }; diff --git a/src/components/User/__tests__/User.visual.test.tsx b/src/components/User/__tests__/User.visual.test.tsx index c94f096430..fce69e988f 100644 --- a/src/components/User/__tests__/User.visual.test.tsx +++ b/src/components/User/__tests__/User.visual.test.tsx @@ -1,15 +1,17 @@ import React from 'react'; -import {expect} from '@playwright/experimental-ct-react'; - import {test} from '~playwright/core'; -import {Default} from './stories'; +import {UserStories} from './stories'; test.describe('User', () => { - test('render story: ', async ({mount}) => { - const component = await mount(); + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); - await expect(component).toHaveScreenshot(); + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); }); }); diff --git a/src/components/User/__tests__/stories.ts b/src/components/User/__tests__/stories.ts index ad381f1b5e..df1422953f 100644 --- a/src/components/User/__tests__/stories.ts +++ b/src/components/User/__tests__/stories.ts @@ -2,4 +2,4 @@ import {composeStories} from '@storybook/react'; import * as Stories from '../__stories__/User.stories'; -export const {Default} = composeStories(Stories); +export const UserStories = composeStories(Stories); diff --git a/src/components/User/constants.ts b/src/components/User/constants.ts index 91ec59451f..be628892a4 100644 --- a/src/components/User/constants.ts +++ b/src/components/User/constants.ts @@ -1,4 +1,5 @@ import type {UserSize} from './types'; -export const COMPACT_SIZES: UserSize[] = ['xs', '2xs']; -export const DEFAULT_SIZE: UserSize = 'm'; +export const DEFAULT_USER_SIZE: UserSize = 'm'; + +export const COMPACT_SIZES: UserSize[] = ['xs', '2xs', '3xs']; diff --git a/src/components/User/index.ts b/src/components/User/index.ts index b2563fe154..930f0f616b 100644 --- a/src/components/User/index.ts +++ b/src/components/User/index.ts @@ -1,2 +1,3 @@ export type {UserSize, UserProps} from './types'; +export {DEFAULT_USER_SIZE} from './constants'; export {User} from './User'; diff --git a/src/components/User/types.ts b/src/components/User/types.ts index 5d1c0f80c3..cdc488bb9e 100644 --- a/src/components/User/types.ts +++ b/src/components/User/types.ts @@ -4,10 +4,13 @@ import type {DistributiveOmit} from '../../types/utils'; import type {AvatarProps} from '../Avatar'; import type {DOMProps, QAProps} from '../types'; -export type UserSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'; +export type UserSize = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'; export interface UserProps extends DOMProps, QAProps { - avatar?: DistributiveOmit | React.ReactElement; + avatar?: + | DistributiveOmit + | string + | React.ReactElement; name?: React.ReactNode; description?: React.ReactNode; size?: UserSize; diff --git a/src/components/UserLabel/README.md b/src/components/UserLabel/README.md index bc3a610712..5a514ce3cf 100644 --- a/src/components/UserLabel/README.md +++ b/src/components/UserLabel/README.md @@ -2,35 +2,35 @@ The `UserLabel` component can be used to display users or user-related information. -### Type +## Type Used to manage avatar appearance. Use "person" for a personalized entity and "email" for an email adresses. Use "empty" for cases when you do not need any avatar. ```tsx -Charles Darwin (person) -email@example.com (email) -Alan Turing (other) + + + ``` -### Avatar +## Avatar This component can be used with a custom avatar. It works only with `type: 'person'`. You are able to provide an image, a props of [Avatar](../Avatar/README.md) component or custom React node. @@ -39,12 +39,12 @@ This component can be used with a custom avatar. It works only with `type: 'pers code={` import {GraduationCap} from '@gravity-ui/icons'; -Charles Darwin -Charles Darwin + + `} > - Charles Darwin - '}}>Charles Darwin + + '}} text="Charles Darwin" /> LANDING_BLOCK--> @@ -53,33 +53,33 @@ LANDING_BLOCK--> ```tsx import {GraduationCap} from '@gravity-ui/icons'; -Charles Darwin -Charles Darwin + + ``` -### Interactivity +## Interactivity This component is also interactive. It can be clickable or closable. ```tsx - alert('onClick triggered')}>Charles Darwin - alert('onCloseClick triggered')}>Charles Darwin + alert('onClick triggered')} /> + alert('onCloseClick triggered')} /> ``` @@ -89,19 +89,28 @@ LANDING_BLOCK--> | Name | Description | Type | Default | | :----------- | :------------------------------------------ | :-------------------------------------------------------------------------: | :----------: | | type | Avatar appearance | `'person'` `'email'` `'empty'` | `'person'` | -| avatar | User avatar | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` | | -| children | Visible text | `React.ReactNode` | | | view | UserLabel view | `'outlined'` `'clear'` | `'outlined'` | +| size | UserLabel size | `'3xs'` `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `'s'` | +| avatar | User avatar | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` | | +| text | User text | `React.ReactNode` | | +| description | User description | `React.ReactNode` | | | onClick | `click` event handler for component itself | `Function` | | | onCloseClick | `click` event handler for button with cross | `Function` | | | className | Custom CSS class for root element | `string` | | | style | HTML style attribute | `React.CSSProperties` | | | qa | HTML `data-qa` attribute, used in tests | `string` | | -| size | Avatar size | `'xs'` `'s'` `'m'` `'l'` `'xl'` | `'s'` | ## CSS API -| Name | Description | -| :--------------------------- | :--------------- | -| `--g-user-label-font-size` | Text font size | -| `--g-user-label-line-height` | Text line height | +| Name | Description | +| :--------------------------------------- | :------------------------------------------------------ | +| `--g-user-label-size` | Size for avatar (width and height) and height for label | +| `--g-user-label-border-radius` | Label border radius | +| `--g-user-label-outer-gap` | Label horizontal padding | +| `--g-user-label-inner-gap` | Gap between elements (avatar, text, close icon) | +| `--g-user-label-text-font-weight` | Text font weight | +| `--g-user-label-text-font-size` | Text font size | +| `--g-user-label-text-line-height` | Text line height | +| `--g-user-label-description-font-weight` | Description font weight | +| `--g-user-label-description-font-size` | Description font size | +| `--g-user-label-description-line-height` | Description line height | diff --git a/src/components/UserLabel/UserLabel.scss b/src/components/UserLabel/UserLabel.scss index f01d582877..4abe66aca2 100644 --- a/src/components/UserLabel/UserLabel.scss +++ b/src/components/UserLabel/UserLabel.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../../../styles/mixins'; @use '../variables'; @use '../Avatar/variables' as avatar-variables; @@ -8,25 +9,36 @@ $block: '.#{variables.$ns}user-label'; $transitionDuration: 0.1s; $transitionTimingFunction: ease-in-out; + --_--size: #{map.get(avatar-variables.$sizes, 's')}; + --_--border-radius: 25px; + --_--outer-gap: var(--g-spacing-3); + --_--inner-gap: calc(var(--g-spacing-base) * 1.5); + --_--text-font-weight: var(--g-text-body-font-weight); + --_--text-font-size: var(--g-text-body-short-font-size); + --_--text-line-height: var(--g-text-body-short-line-height); + --_--description-font-weight: var(--g-text-body-font-weight); + --_--description-font-size: var(--g-text-body-short-font-size); + --_--description-line-height: var(--g-text-body-short-line-height); + position: relative; z-index: 0; display: inline-flex; max-width: 100%; - height: 28px; - border-radius: 20px; + height: var(--g-user-label-size, var(--_--size)); + border-radius: var(--g-user-label-border-radius, var(--_--border-radius)); transition-property: background-color; transition-duration: $transitionDuration; transition-timing-function: $transitionTimingFunction; &_view_outlined { - &:after { + &::after { + content: ''; position: absolute; z-index: -1; inset: 0; - content: ''; - border: 1px solid var(--g-color-line-generic); - border-radius: 20px; + border: 1px solid var(--g-color-line-generic-solid); + border-radius: inherit; transition-property: border-color; transition-duration: $transitionDuration; @@ -34,70 +46,149 @@ $block: '.#{variables.$ns}user-label'; } } - &_empty { - padding-inline-start: 12px; + &_size { + @each $size-name, $size-value in avatar-variables.$sizes { + &_#{$size-name} { + --_--size: #{$size-value}; + } + } + + &_3xs, + &_2xs { + --_--outer-gap: calc(var(--g-spacing-base) * 1.5); + --_--inner-gap: var(--g-spacing-1); + } + + &_xs { + --_--outer-gap: calc(var(--g-spacing-base) * 2.5); + --_--inner-gap: calc(var(--g-spacing-base) * 1.5); + } + + &_s { + --_--outer-gap: var(--g-spacing-3); + --_--inner-gap: calc(var(--g-spacing-base) * 1.5); + } + + &_m { + --_--outer-gap: var(--g-spacing-3); + --_--inner-gap: var(--g-spacing-2); + } + + &_l { + --_--outer-gap: var(--g-spacing-4); + --_--inner-gap: var(--g-spacing-3); + } + + &_xl { + --_--outer-gap: var(--g-spacing-5); + --_--inner-gap: var(--g-spacing-4); + } + + &_3xs, + &_2xs, + &_xs { + --_--text-font-weight: var(--g-text-caption-font-weight); + --_--text-font-size: var(--g-text-caption-2-font-size); + --_--text-line-height: var(--g-text-caption-2-line-height); + } + + &_s, + &_m, + &_l { + --_--text-font-weight: var(--g-text-body-font-weight); + --_--text-font-size: var(--g-text-body-short-font-size); + --_--text-line-height: var(--g-text-body-short-line-height); + } + + &_xl { + --_--text-font-weight: var(--g-text-body-font-weight); + --_--text-font-size: var(--g-text-body-2-font-size); + --_--text-line-height: var(--g-text-body-2-line-height); + } } &_clickable:hover { - cursor: pointer; background-color: var(--g-color-base-simple-hover); - &:after { + &::after { border-color: transparent; } } + &__avatar { + --g-avatar-size: var(--g-user-label-size, var(--_--size)); + --g-avatar-border-width: 1px; + --g-avatar-inner-border-width: 0; + --g-avatar-background-color: var(--g-color-base-neutral-light); + --g-avatar-color: var(--g-color-text-primary); + + display: flex; + margin-inline-end: var(--g-user-label-inner-gap, var(--_--inner-gap)); + } + &__main { @include mixins.button-reset(); - display: inline-flex; + display: flex; align-items: center; min-width: 0; - border-radius: inherit; - padding-inline-end: 6px; + border-radius: var(--g-user-label-border-radius, var(--_--border-radius)); + padding-inline-end: var(--g-user-label-outer-gap, var(--_--outer-gap)); + cursor: unset; - #{$block}_closeable & { - padding-inline-end: 0; + #{$block}_empty & { + padding-inline-start: var(--g-user-label-outer-gap, var(--_--outer-gap)); } #{$block}_clickable & { outline-offset: -1px; + cursor: pointer; &:focus-visible { outline: 2px solid var(--g-color-line-focus); } } - } - &__avatar { - --g-avatar-background-color: var(--g-color-base-generic-accent); - --g-avatar-color: var(--g-color-text-primary); + #{$block}_closeable & { + padding-inline-end: var(--g-user-label-inner-gap, var(--_--inner-gap)); + } + } + &__info { display: flex; - margin-inline-end: 6px; + flex-direction: column; + min-width: 0; } &__text { - font-size: var(--g-user-label-font-size, inherit); - line-height: var(--g-user-label-line-height, inherit); - min-width: 0; - margin-inline-end: 6px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + @include mixins.overflow-ellipsis(); + + color: var(--g-color-text-primary); + font-weight: var(--g-user-label-text-font-weight, var(--_--text-font-weight)); + font-size: var(--g-user-label-text-font-size, var(--_--text-font-size)); + line-height: var(--g-user-label-text-line-height, var(--_--text-line-height)); + } + + &__description { + @include mixins.overflow-ellipsis(); + + color: var(--g-color-text-secondary); + font-weight: var(--g-user-label-description-font-weight, var(--_--description-font-weight)); + font-size: var(--g-user-label-description-font-size, var(--_--description-font-size)); + line-height: var(--g-user-label-description-line-height, var(--_--description-line-height)); } &__close { @include mixins.button-reset(); box-sizing: initial; - display: inline-flex; + display: flex; justify-content: center; align-items: center; - width: 16px; - cursor: pointer; - padding-inline-end: 6px; + border-radius: var(--g-user-label-border-radius, var(--_--border-radius)); + padding-inline-end: var(--g-user-label-outer-gap, var(--_--outer-gap)); color: var(--g-color-text-secondary); + cursor: pointer; transition-property: color; transition-duration: $transitionDuration; @@ -115,15 +206,4 @@ $block: '.#{variables.$ns}user-label'; outline: 2px solid var(--g-color-line-focus); } } - - &_size { - @each $size-name, $size-value in avatar-variables.$sizes { - &_#{$size-name} { - height: #{$size-value}; - } - &_xl::after { - border-radius: 150px; - } - } - } } diff --git a/src/components/UserLabel/UserLabel.tsx b/src/components/UserLabel/UserLabel.tsx index 69eb3eaeb2..0e4a0d9c08 100644 --- a/src/components/UserLabel/UserLabel.tsx +++ b/src/components/UserLabel/UserLabel.tsx @@ -3,9 +3,11 @@ import React from 'react'; import {Envelope, Xmark} from '@gravity-ui/icons'; import {Avatar} from '../Avatar'; +import type {AvatarProps} from '../Avatar'; import {Icon} from '../Icon'; import {block} from '../utils/cn'; +import {BORDER_COLOR, COMPACT_SIZES, DEFAULT_USER_LABEL_SIZE, ICON_SIZES} from './constants'; import i18n from './i18n'; import type {UserLabelProps} from './types'; @@ -14,43 +16,50 @@ import './UserLabel.scss'; const b = block('user-label'); export const UserLabel = React.forwardRef( + // eslint-disable-next-line complexity ( { type = 'person', - avatar, - children, view = 'outlined', + size = DEFAULT_USER_LABEL_SIZE, + avatar, + text, + description, onClick, onCloseClick, className, style, qa, - size = 's', }, ref, ) => { const clickable = Boolean(onClick); const closeable = Boolean(onCloseClick); + const MainComponent = clickable ? 'button' : 'div'; let avatarView: React.ReactNode = null; + let avatarProps: AvatarProps | undefined; - let avatarProps; if (typeof avatar === 'string') { - avatarProps = { - imgUrl: avatar, - }; + avatarProps = {imgUrl: avatar}; } else if (avatar && !React.isValidElement(avatar)) { - avatarProps = avatar; - } else if (!avatar && typeof children === 'string') { - avatarProps = { - text: children, - }; + if ( + ('imgUrl' in avatar && avatar.imgUrl) || + ('icon' in avatar && avatar.icon) || + ('text' in avatar && avatar.text) + ) { + avatarProps = avatar as AvatarProps; + } else if (typeof text === 'string') { + avatarProps = {text, borderColor: BORDER_COLOR, ...avatar}; + } + } else if (!avatar && typeof text === 'string') { + avatarProps = {text, borderColor: BORDER_COLOR}; } switch (type) { case 'email': - avatarView = ; + avatarView = ; break; case 'empty': avatarView = null; @@ -65,15 +74,17 @@ export const UserLabel = React.forwardRef( break; } + const showDescription = Boolean(description && !COMPACT_SIZES.has(size)); + return (
( onClick={onClick} > {avatarView ?
{avatarView}
: null} -
{children}
+
+ {text} + {showDescription ? ( + {description} + ) : null} +
{onCloseClick ? ( ) : null}
diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-chromium-linux.png new file mode 100644 index 0000000000..79ab496248 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-webkit-linux.png new file mode 100644 index 0000000000..eb29d8be26 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-chromium-linux.png new file mode 100644 index 0000000000..ce59793178 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-webkit-linux.png new file mode 100644 index 0000000000..dd6db8795b Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-default-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-chromium-linux.png new file mode 100644 index 0000000000..cb90abaad5 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-webkit-linux.png new file mode 100644 index 0000000000..b47ecdccd5 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-chromium-linux.png new file mode 100644 index 0000000000..89574edf92 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-webkit-linux.png new file mode 100644 index 0000000000..3d2feac30f Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Clickable-hovered-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-chromium-linux.png new file mode 100644 index 0000000000..dc01fdcc98 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-webkit-linux.png new file mode 100644 index 0000000000..9fbd14fa6f Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-chromium-linux.png new file mode 100644 index 0000000000..b6d4bb5622 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-webkit-linux.png new file mode 100644 index 0000000000..9c6b999922 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Closable-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-chromium-linux.png new file mode 100644 index 0000000000..79ab496248 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-webkit-linux.png new file mode 100644 index 0000000000..eb29d8be26 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-chromium-linux.png new file mode 100644 index 0000000000..ce59793178 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-webkit-linux.png new file mode 100644 index 0000000000..dd6db8795b Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Default-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-chromium-linux.png new file mode 100644 index 0000000000..777c9eeb2d Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-webkit-linux.png new file mode 100644 index 0000000000..82f2d0dedd Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-chromium-linux.png new file mode 100644 index 0000000000..02f770ce28 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-webkit-linux.png new file mode 100644 index 0000000000..6438e89b7c Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Email-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-chromium-linux.png new file mode 100644 index 0000000000..cd05f4ced4 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-webkit-linux.png new file mode 100644 index 0000000000..6408b3d21e Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-chromium-linux.png new file mode 100644 index 0000000000..0c6d7b828e Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-webkit-linux.png new file mode 100644 index 0000000000..493903b27e Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Empty-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-chromium-linux.png new file mode 100644 index 0000000000..c74b6bdade Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-webkit-linux.png new file mode 100644 index 0000000000..c67e4610bc Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-chromium-linux.png new file mode 100644 index 0000000000..e0f0d3cca9 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-webkit-linux.png new file mode 100644 index 0000000000..01b6d85255 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Image-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-chromium-linux.png new file mode 100644 index 0000000000..2790f60590 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-webkit-linux.png new file mode 100644 index 0000000000..b8a8f14165 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-chromium-linux.png new file mode 100644 index 0000000000..c8549dca6d Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-webkit-linux.png new file mode 100644 index 0000000000..ca007468c2 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-LongText-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-chromium-linux.png new file mode 100644 index 0000000000..23620f4adb Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-webkit-linux.png new file mode 100644 index 0000000000..97ef20ed38 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-dark-webkit-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-chromium-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-chromium-linux.png new file mode 100644 index 0000000000..8c5533548c Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-chromium-linux.png differ diff --git a/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-webkit-linux.png b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-webkit-linux.png new file mode 100644 index 0000000000..7e36164322 Binary files /dev/null and b/src/components/UserLabel/__snapshots__/UserLabel.visual.test.tsx-snapshots/UserLabel-render-story-Showcase-light-webkit-linux.png differ diff --git a/src/components/UserLabel/__stories__/UserLabel.stories.tsx b/src/components/UserLabel/__stories__/UserLabel.stories.tsx index 1045b787fa..ddb9851220 100644 --- a/src/components/UserLabel/__stories__/UserLabel.stories.tsx +++ b/src/components/UserLabel/__stories__/UserLabel.stories.tsx @@ -1,11 +1,28 @@ -import {faker} from '@faker-js/faker/locale/en'; +import React from 'react'; + import type {Meta, StoryObj} from '@storybook/react'; +import {Showcase} from '../../../demo/Showcase'; +import {ShowcaseItem} from '../../../demo/ShowcaseItem'; import {UserLabel} from '../UserLabel'; const meta: Meta = { title: 'Components/Data Display/UserLabel', component: UserLabel, + parameters: { + a11y: { + element: '#storybook-root', + config: { + rules: [ + { + id: 'color-contrast', + enabled: false, + selector: '.g-user-label__description', + }, + ], + }, + }, + }, }; export default meta; @@ -13,73 +30,219 @@ export default meta; type Story = StoryObj; const person = 'Charles Darwin'; -const [firstName, lastName] = person.split(' '); -const email = faker.internet.email({firstName, lastName}); -const personImg = faker.image.avatar(); +const email = 'charles.darwin@gmail.com'; +const personImg = + 'data:image/png;base64,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'; +const avatarAriaProps = { + 'aria-label': `${person}'s avatar`, +}; -export const Default: Story = { - args: { - children: person, - avatar: { - 'aria-label': "Charles Darwin's avatar", - }, +const personProps = { + avatar: avatarAriaProps, + text: person, + description: email, +}; + +const imageProps = { + avatar: { + ...avatarAriaProps, + imgUrl: personImg, + alt: 'Fake person', }, + text: person, + description: email, }; -export const Image: Story = { - args: { - avatar: { - imgUrl: personImg, - 'aria-label': "Charles Darwin's avatar", - alt: 'Fake person', - }, - children: person, +const emailProps = { + type: 'email' as const, + avatar: { + ...avatarAriaProps, + alt: 'Sample envelope icon', }, + text: email, +}; + +const emptyProps = { + type: 'empty' as const, + text: person, + description: email, +}; + +const closeableProps = { + ...personProps, + onCloseClick: () => console.log('closed'), +}; + +export const Default: Story = { + args: personProps, +}; + +export const Image: Story = { + args: imageProps, }; export const Email: Story = { - args: { - type: 'email', - children: email, - avatar: { - 'aria-label': "Charles Darwin's avatar", - alt: 'Sample envelope icon', - }, - }, + args: emailProps, }; export const Empty: Story = { - args: { - type: 'empty', - children: person, - }, + args: emptyProps, }; -export const LongChildren: Story = { +export const LongText: Story = { args: { - children: person.repeat(100), - avatar: { - 'aria-label': "Charles Darwin's avatar", - }, + avatar: avatarAriaProps, + text: person.repeat(100), }, }; export const Clickable: Story = { args: { - children: person, - onClick: (value) => console.log('clicked', value), - avatar: { - 'aria-label': "Charles Darwin's avatar", - }, + avatar: avatarAriaProps, + text: person, + onClick: () => console.log('clicked'), }, }; export const Closable: Story = { - args: { - children: person, - onCloseClick: (value) => console.log('closed', value), - avatar: { - 'aria-label': "Charles Darwin's avatar", - }, + args: closeableProps, +}; + +export const UserLabelShowcase: Story = { + name: 'Showcase', + render: () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }, }; diff --git a/src/components/UserLabel/__tests__/UserLabel.test.tsx b/src/components/UserLabel/__tests__/UserLabel.test.tsx index bf0aaf4e86..035e2310aa 100644 --- a/src/components/UserLabel/__tests__/UserLabel.test.tsx +++ b/src/components/UserLabel/__tests__/UserLabel.test.tsx @@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'; import {queryByAttribute, render, screen} from '../../../../test-utils/utils'; import {getAvatarDisplayText} from '../../Avatar'; import {UserLabel} from '../UserLabel'; +import {DEFAULT_USER_LABEL_SIZE} from '../constants'; import i18n from '../i18n'; const MOCKED_TEXT = 'text'; @@ -16,9 +17,9 @@ describe('UserLabel', () => { 'should return text value as onClick argument', async (text) => { const onClick = jest.fn(); - render({text}); + render(); const user = userEvent.setup(); - const displayText = getAvatarDisplayText(text); + const displayText = getAvatarDisplayText(text, DEFAULT_USER_LABEL_SIZE); const personaNode = screen.getByText(displayText); await user.click(personaNode); expect(onClick).toHaveBeenCalled(); @@ -28,9 +29,7 @@ describe('UserLabel', () => { 'should return text value as onClose argument', async (text) => { const onCloseClick = jest.fn(); - const {container} = render( - {text}, - ); + const {container} = render(); const user = userEvent.setup(); const ariaLabelValue = i18n('label_remove-button'); const closeButtonNode = queryByAttribute('aria-label', container, ariaLabelValue); @@ -44,11 +43,11 @@ describe('UserLabel', () => { }, ); test('should render text as string', () => { - render({MOCKED_TEXT}); + render(); screen.getByText(MOCKED_TEXT); }); test('should render text as react node', () => { - render({MOCKED_TEXT_NODE}); + render(); screen.getByText(MOCKED_TEXT); }); }); diff --git a/src/components/UserLabel/__tests__/UserLabel.visual.test.tsx b/src/components/UserLabel/__tests__/UserLabel.visual.test.tsx new file mode 100644 index 0000000000..3bd5a5c168 --- /dev/null +++ b/src/components/UserLabel/__tests__/UserLabel.visual.test.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import {test} from '~playwright/core'; + +import {UserLabelStories} from './stories'; + +test.describe('UserLabel', () => { + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(, {width: 300}); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component, nameSuffix: 'default'}); + + await component.getByText('Charles Darwin').hover(); + await expectScreenshot({component, nameSuffix: 'hovered'}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + const component = await mount(); + await expectScreenshot({component}); + }); +}); diff --git a/src/components/UserLabel/__tests__/stories.ts b/src/components/UserLabel/__tests__/stories.ts new file mode 100644 index 0000000000..1a9c09fe9b --- /dev/null +++ b/src/components/UserLabel/__tests__/stories.ts @@ -0,0 +1,5 @@ +import {composeStories} from '@storybook/react'; + +import * as Stories from '../__stories__/UserLabel.stories'; + +export const UserLabelStories = composeStories(Stories); diff --git a/src/components/UserLabel/constants.ts b/src/components/UserLabel/constants.ts new file mode 100644 index 0000000000..b210344602 --- /dev/null +++ b/src/components/UserLabel/constants.ts @@ -0,0 +1,17 @@ +import type {UserLabelSize} from './types'; + +export const DEFAULT_USER_LABEL_SIZE: UserLabelSize = 's'; + +export const COMPACT_SIZES: Set = new Set(['m', 's', 'xs', '2xs', '3xs']); + +export const BORDER_COLOR = 'var(--g-color-line-generic-solid)'; + +export const ICON_SIZES: Record = { + '3xs': 12, + '2xs': 12, + xs: 12, + s: 16, + m: 16, + l: 16, + xl: 16, +}; diff --git a/src/components/UserLabel/index.ts b/src/components/UserLabel/index.ts index fcb9ee276f..71f86451ad 100644 --- a/src/components/UserLabel/index.ts +++ b/src/components/UserLabel/index.ts @@ -1,2 +1,3 @@ +export type {UserLabelType, UserLabelView, UserLabelSize, UserLabelProps} from './types'; +export {DEFAULT_USER_LABEL_SIZE} from './constants'; export {UserLabel} from './UserLabel'; -export type {UserLabelType, UserLabelView, UserLabelProps} from './types'; diff --git a/src/components/UserLabel/types.ts b/src/components/UserLabel/types.ts index 2bee2a95ca..295711c309 100644 --- a/src/components/UserLabel/types.ts +++ b/src/components/UserLabel/types.ts @@ -1,21 +1,23 @@ import type React from 'react'; import type {DistributiveOmit} from '../../types/utils'; -import type {AvatarProps, AvatarSize} from '../Avatar'; +import type {AvatarProps} from '../Avatar'; import type {DOMProps, QAProps} from '../types'; export type UserLabelType = 'person' | 'email' | 'empty'; export type UserLabelView = 'outlined' | 'clear'; +export type UserLabelSize = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'; export interface UserLabelProps extends DOMProps, QAProps { type?: UserLabelType; + view?: UserLabelView; + size?: UserLabelSize; avatar?: - | DistributiveOmit + | Partial> | string | React.ReactElement; - children: React.ReactNode; - view?: UserLabelView; + text: React.ReactNode; + description?: React.ReactNode; onClick?: React.MouseEventHandler; onCloseClick?: React.MouseEventHandler; - size?: AvatarSize; }