diff --git a/.github/pr-title-checker-config.json b/.github/pr-title-checker-config.json index 2247bf9814..7a6e0a2d42 100644 --- a/.github/pr-title-checker-config.json +++ b/.github/pr-title-checker-config.json @@ -11,7 +11,7 @@ "ESLint plugin: ", "Tokens: " ], - "regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+", + "regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+", "regexpFlags": "", "ignoreLabels": [] }, diff --git a/docs/docs-components/siteIndex.ts b/docs/docs-components/siteIndex.ts index 3796171098..91fb8daee2 100644 --- a/docs/docs-components/siteIndex.ts +++ b/docs/docs-components/siteIndex.ts @@ -149,6 +149,7 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [ 'IconButton', 'IconButtonLink', 'IconButtonFloating', + 'IconCompact', 'Image', 'Indicator', 'Label', diff --git a/docs/examples/icon/compactIcon.tsx b/docs/examples/icon/compactIcon.tsx deleted file mode 100644 index bf5e7e0b0b..0000000000 --- a/docs/examples/icon/compactIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useState } from 'react'; -import { Flex, IconCompact, SelectList } from 'gestalt'; - -export default function Example() { - const compactIconsList = IconCompact.icons; - const [selectedValue, setSelectedValue] = useState(compactIconsList[0]); - - return ( - - - { - setSelectedValue(value); - }} - > - {compactIconsList.map((value: string) => ( - - ))} - - - - - - ); -} diff --git a/docs/examples/iconCompact/builtInIcon.tsx b/docs/examples/iconCompact/builtInIcon.tsx new file mode 100644 index 0000000000..2f1a72762c --- /dev/null +++ b/docs/examples/iconCompact/builtInIcon.tsx @@ -0,0 +1,9 @@ +import { Flex, IconCompact } from 'gestalt'; + +export default function Example() { + return ( + + + + ); +} diff --git a/docs/examples/iconCompact/customIcon.tsx b/docs/examples/iconCompact/customIcon.tsx new file mode 100644 index 0000000000..0843d0c547 --- /dev/null +++ b/docs/examples/iconCompact/customIcon.tsx @@ -0,0 +1,15 @@ +import { Flex, IconCompact } from 'gestalt'; + +export default function Example() { + return ( + + + + ); +} diff --git a/docs/examples/iconCompact/main.tsx b/docs/examples/iconCompact/main.tsx new file mode 100644 index 0000000000..71a309d867 --- /dev/null +++ b/docs/examples/iconCompact/main.tsx @@ -0,0 +1,11 @@ +import { Flex, IconCompact } from 'gestalt'; + +export default function Example() { + return ( + + + + + + ); +} diff --git a/docs/pages/visual-test/IconCompact-list-dark.tsx b/docs/pages/visual-test/IconCompact-list-dark.tsx new file mode 100644 index 0000000000..3ebe4436c4 --- /dev/null +++ b/docs/pages/visual-test/IconCompact-list-dark.tsx @@ -0,0 +1,27 @@ +import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt'; +import icons from 'gestalt/src/icons/compact'; + +export default function Snapshot() { + return ( + + + + {Object.keys(icons).map((name, idk) => ( + + {idk} + {/* @ts-expect-error - TS2322 */} + + {name} + + ))} + + + + ); +} diff --git a/docs/pages/visual-test/IconCompact-list-vr.tsx b/docs/pages/visual-test/IconCompact-list-vr.tsx new file mode 100644 index 0000000000..4e42d70b3a --- /dev/null +++ b/docs/pages/visual-test/IconCompact-list-vr.tsx @@ -0,0 +1,27 @@ +import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt'; +import icons from 'gestalt/src/icons-vr-theme/compact'; + +export default function Snapshot() { + return ( + + + + {Object.keys(icons).map((name, idk) => ( + + {idk} + {/* @ts-expect-error - TS2322 */} + + {name} + + ))} + + + + ); +} diff --git a/docs/pages/visual-test/IconCompact-list.tsx b/docs/pages/visual-test/IconCompact-list.tsx new file mode 100644 index 0000000000..ed81ab45cd --- /dev/null +++ b/docs/pages/visual-test/IconCompact-list.tsx @@ -0,0 +1,27 @@ +import { Box, ColorSchemeProvider, Flex, IconCompact, Text } from 'gestalt'; +import icons from 'gestalt/src/icons/compact'; + +export default function Snapshot() { + return ( + + + + {Object.keys(icons).map((name, idk) => ( + + {idk} + {/* @ts-expect-error - TS2322 */} + + {name} + + ))} + + + + ); +} diff --git a/docs/pages/web/icon.tsx b/docs/pages/web/icon.tsx index ccf3b46224..362fe663c9 100644 --- a/docs/pages/web/icon.tsx +++ b/docs/pages/web/icon.tsx @@ -10,7 +10,6 @@ import PageHeader from '../../docs-components/PageHeader'; import QualityChecklist from '../../docs-components/QualityChecklist'; import SandpackExample from '../../docs-components/SandpackExample'; import builtInIcon from '../../examples/icon/builtInIcon'; -import compactIcon from '../../examples/icon/compactIcon'; import customIcon from '../../examples/icon/customIcon'; import doClarity from '../../examples/icon/doClarity'; import doIntentional from '../../examples/icon/doIntentional'; @@ -223,20 +222,6 @@ Should be used sparingly and only in places where the UI is very dense and a lar title="Custom SVG icon" /> - They can be used with the \`IconCompact\` component.`} - title="Compact icon" - > - - } - title="Compact Icon" - /> - @@ -266,6 +251,9 @@ Use a descriptive label to describe the Icon + + + + + + + + + + + + + + + + Element; color: string[]; }' is not assignable to type 'IntrinsicAttributes & Props'. + color={[ + 'default', + 'disabled', + 'subtle', + 'success', + 'error', + 'warning', + 'info', + 'recommendation', + 'inverse', + 'shopping', + 'brandPrimary', + 'light', + 'dark', + ]} + > + {({ color }) => } + + + + + + } + title="Built-in icon" + /> + + } + title="Custom SVG icon" + /> + + + + + + + + + + + + + + + + ); +} + +export async function getServerSideProps(): Promise<{ + props: { + generatedDocGen: DocGen; + }; +}> { + const generatedDocGen = await docGen('IconCompact'); + const overriddenDocGen = overrideTypes(generatedDocGen, { + icon: (IconCompact?.icons ?? []).map((icon) => `'${icon}'`).join(' | '), + }); + + return { + props: { generatedDocGen: overriddenDocGen }, + }; +} diff --git a/packages/gestalt/src/IconCompact.tsx b/packages/gestalt/src/IconCompact.tsx index 6735ce8b27..1e00dc6b8f 100644 --- a/packages/gestalt/src/IconCompact.tsx +++ b/packages/gestalt/src/IconCompact.tsx @@ -63,15 +63,15 @@ type Props = { const IconNames: ReadonlyArray = Object.keys(compactIconsVR); /** - * [Icons](https://gestalt.pinterest.systems/web/icon) are the symbolic representation of an action or information, providing visual context and improving usability. + * [Icons](https://gestalt.pinterest.systems/web/icon) are the symbolic representation of an action or information, providing visual context and improving usability. These icons have a 16x16 viewboxes and are used in places where space is limited. Refer to your designer for guidance on when to use Compact Icons. + * * See the [Iconography and SVG guidelines](https://gestalt.pinterest.systems/foundations/iconography/library) to explore the full icon library. * - * ![Icon light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png) - * ![Icon dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png) + * ![Icon light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list.spec.ts-snapshots/IconCompact-list-chromium-darwin.png) + * ![Icon dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/IconCompact-list-dark-chromium-darwin.png) * */ - function IconCompact({ accessibilityLabel, color = 'subtle', diff --git a/playwright/accessibility/web__iconcompact.spec.ts b/playwright/accessibility/web__iconcompact.spec.ts new file mode 100644 index 0000000000..97c58cb503 --- /dev/null +++ b/playwright/accessibility/web__iconcompact.spec.ts @@ -0,0 +1,8 @@ +import { test } from '@playwright/test'; +import expectAccessiblePage from './expectAccessiblePage'; + +test('IconCompact Accessibility check', async ({ page }) => { + await page.goto('/web/iconcompact'); + // @ts-expect-error - TS2345 - Argument of type '{ page: Page; }' is not assignable to parameter of type '{ page: any; rules: any; }'. + await expectAccessiblePage({ page }); +}); diff --git a/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png b/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png index e3b87b9fc2..c4ca83064a 100644 Binary files a/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png and b/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png differ diff --git a/playwright/visual-test/Icon-list-vr.spec.ts-snapshots/Icon-list-vr-chromium-darwin.png b/playwright/visual-test/Icon-list-vr.spec.ts-snapshots/Icon-list-vr-chromium-darwin.png index 6b60a51fd0..97d5acf535 100644 Binary files a/playwright/visual-test/Icon-list-vr.spec.ts-snapshots/Icon-list-vr-chromium-darwin.png and b/playwright/visual-test/Icon-list-vr.spec.ts-snapshots/Icon-list-vr-chromium-darwin.png differ diff --git a/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png b/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png index 2506278ccb..c2070ecf50 100644 Binary files a/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png and b/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png differ diff --git a/playwright/visual-test/IconCompact-list-dark.spec.ts b/playwright/visual-test/IconCompact-list-dark.spec.ts new file mode 100644 index 0000000000..bcf36420d3 --- /dev/null +++ b/playwright/visual-test/IconCompact-list-dark.spec.ts @@ -0,0 +1,7 @@ +import { expect, test } from '@playwright/test'; + +test('IconCompact list dark mode visual regression check', async ({ page }) => { + await page.goto('/visual-test/IconCompact-list-dark'); + const locator = page.locator('[data-test-id="visual-test"]'); + await expect(locator).toHaveScreenshot('IconCompact-list-dark.png'); +}); diff --git a/playwright/visual-test/IconCompact-list-dark.spec.ts-snapshots/IconCompact-list-dark-chromium-darwin.png b/playwright/visual-test/IconCompact-list-dark.spec.ts-snapshots/IconCompact-list-dark-chromium-darwin.png new file mode 100644 index 0000000000..f875ee1151 Binary files /dev/null and b/playwright/visual-test/IconCompact-list-dark.spec.ts-snapshots/IconCompact-list-dark-chromium-darwin.png differ diff --git a/playwright/visual-test/IconCompact-list-vr.spec.ts b/playwright/visual-test/IconCompact-list-vr.spec.ts new file mode 100644 index 0000000000..967cce680c --- /dev/null +++ b/playwright/visual-test/IconCompact-list-vr.spec.ts @@ -0,0 +1,7 @@ +import { expect, test } from '@playwright/test'; + +test('IconCompact list visual regression check', async ({ page }) => { + await page.goto('/visual-test/IconCompact-list-vr'); + const locator = page.locator('[data-test-id="visual-test"]'); + await expect(locator).toHaveScreenshot('IconCompact-list-vr.png'); +}); diff --git a/playwright/visual-test/IconCompact-list-vr.spec.ts-snapshots/IconCompact-list-vr-chromium-darwin.png b/playwright/visual-test/IconCompact-list-vr.spec.ts-snapshots/IconCompact-list-vr-chromium-darwin.png new file mode 100644 index 0000000000..0d67f0736b Binary files /dev/null and b/playwright/visual-test/IconCompact-list-vr.spec.ts-snapshots/IconCompact-list-vr-chromium-darwin.png differ diff --git a/playwright/visual-test/IconCompact-list.spec.ts b/playwright/visual-test/IconCompact-list.spec.ts new file mode 100644 index 0000000000..bdd770cf87 --- /dev/null +++ b/playwright/visual-test/IconCompact-list.spec.ts @@ -0,0 +1,7 @@ +import { expect, test } from '@playwright/test'; + +test('IconCompact list visual regression check', async ({ page }) => { + await page.goto('/visual-test/IconCompact-list'); + const locator = page.locator('[data-test-id="visual-test"]'); + await expect(locator).toHaveScreenshot('IconCompact-list.png'); +}); diff --git a/playwright/visual-test/IconCompact-list.spec.ts-snapshots/IconCompact-list-chromium-darwin.png b/playwright/visual-test/IconCompact-list.spec.ts-snapshots/IconCompact-list-chromium-darwin.png new file mode 100644 index 0000000000..09b7ab61ea Binary files /dev/null and b/playwright/visual-test/IconCompact-list.spec.ts-snapshots/IconCompact-list-chromium-darwin.png differ