Icon: Add Compact Icons

docs/examples/icon/compactIcon.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Flex, IconCompact, SelectList } from 'gestalt';
+
+export default function Example() {
+  const compactIconsList = IconCompact.icons;
+  const [selectedValue, setSelectedValue] = useState<string | undefined>(compactIconsList[0]);
+
+  return (
+    <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
+      <Flex alignItems="center" direction="row" gap={4}>
+        <SelectList
+          id="select-list-example"
+          onChange={({ value }) => {
+            setSelectedValue(value);
+          }}
+        >
+          {compactIconsList.map((value: string) => (
+            <SelectList.Option key={value} label={value} value={value} />
+          ))}
+        </SelectList>
+
+        <IconCompact
+          accessibilityLabel="Add a new item"
+          color="default"
+          icon={selectedValue as typeof compactIconsList[0]}
+        />
+      </Flex>
+    </Flex>
+  );
+}

docs/pages/foundations/iconography/library.tsx

@@ -4,6 +4,7 @@ import {
   Flex,
   Heading,
   Icon,
+  IconCompact,
   Layer,
   Link,
   Pog,
@@ -18,7 +19,11 @@ import iconCategoryData from './ICON_DATA.json';
 import Page from '../../../docs-components/Page';
 import PageHeader from '../../../docs-components/PageHeader';
 
-const { icons } = Icon;
+const { icons: regularIcons } = Icon;
+const { icons: compactIcons } = IconCompact;
+
+const icons = [...compactIcons, ...regularIcons];
+
 const CATEGORIES = [
   'Add',
   'Ads and measurement',
@@ -40,7 +45,7 @@ function IconTile({
   iconDescription = 'Description coming soon',
   onTap,
 }: {
-  iconName: NonNullable<ComponentProps<typeof Icon>['icon']>;
+  iconName: NonNullable<ComponentProps<typeof Icon | typeof IconCompact>['icon']>;
   iconDescription: string;
   onTap: () => void;
 }) {
@@ -77,6 +82,7 @@ function IconTile({
             <Icon
               accessibilityLabel=""
               color={hovered ? 'inverse' : 'default'}
+              // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'Icons'.
               icon={iconName}
               size="24"
             />
@@ -112,8 +118,12 @@ function findIconByCategory(icon: string | null | undefined, category: string) {
   // so we don't accidentally show icons that are only in Figma.
   const iconComponentName = icons.find((name) => name === icon);
 
+  // if the name is prefixed by 'compact', we need to remove it to match the icon name in the JSON
+  const isCompactIcon = (name: string) => name === iconComponentName?.replace('compact-', '');
+
   return iconCategoryData.icons.find(
-    ({ name, categories }) => name === iconComponentName && categories.includes(category),
+    ({ name, categories }) =>
+      (name === iconComponentName && categories.includes(category)) || isCompactIcon(name),
   );
 }
 
@@ -171,7 +181,9 @@ export default function IconPage() {
     sortedAlphabetical ? (
       <Flex gap={3} wrap>
         {(suggestedOptions || iconOptions).map(({ label: iconName }) => {
-          const filteredIconData = iconCategoryData.icons.find((icon) => icon.name === iconName);
+          const filteredIconData = iconCategoryData.icons.find(
+            (icon) => icon.name === iconName || icon.name === `${iconName.replace('compact-', '')}`,
+          );
 
           return (
             <IconTile

docs/pages/web/icon.tsx

@@ -10,6 +10,7 @@ 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';
@@ -222,6 +223,20 @@ Should be used sparingly and only in places where the UI is very dense and a lar
             title="Custom SVG icon"
           />
         </MainSection.Subsection>
+        <MainSection.Subsection
+          columns={2}
+          description={`Icons are available as part of a Compact Icon set. 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.
+           <br/> They can be used with the \`IconCompact\` component.`}
+          title="Compact icon"
+        >
+          <MainSection.Card
+            cardSize="lg"
+            sandpackExample={
+              <SandpackExample code={compactIcon} name="compact icons" previewHeight={HEIGHT} />
+            }
+            title="Compact Icon"
+          />
+        </MainSection.Subsection>
       </MainSection>
       <MainSection name="Writing">
         <MainSection.Subsection columns={2}>

packages/gestalt-icons-android/dist/classic/compact/index.d.ts

@@ -0,0 +1,18 @@
+declare const icons: Readonly<{
+    'compact-add': any;
+    'compact-arrow-up-right': any;
+    'compact-cancel': any;
+    'compact-check': any;
+    'compact-check-circle-fill': any;
+    'compact-chevron-down': any;
+    'compact-chevron-left': any;
+    'compact-chevron-right': any;
+    'compact-chevron-up': any;
+    'compact-dash': any;
+    'compact-lock': any;
+    'compact-sparkle': any;
+    'compact-workflow-status-problem': any;
+    'compact-workflow-status-warning': any;
+    'compact-info-circle-fill': any;
+}>;
+export default icons;

packages/gestalt-icons-android/dist/vr-theme/compact/index.d.ts

@@ -0,0 +1,17 @@
+declare const icons: Readonly<{
+    'compact-add': any;
+    'compact-arrow-up-right': any;
+    'compact-cancel': any;
+    'compact-check': any;
+    'compact-check-circle-fill': any;
+    'compact-chevron-down': any;
+    'compact-chevron-left': any;
+    'compact-chevron-right': any;
+    'compact-chevron-up': any;
+    'compact-dash': any;
+    'compact-info-circle-fill': any;
+    'compact-lock': any;
+    'compact-workflow-status-problem': any;
+    'compact-workflow-status-warning': any;
+}>;
+export default icons;

packages/gestalt-icons-android/src/classic/compact/global.d.ts

@@ -0,0 +1,10 @@
+declare module '*.svg' {
+  /**
+   * Use `any` to avoid conflicts with
+   * `@svgr/webpack` plugin or
+   * `babel-plugin-inline-react-svg` plugin.
+   */
+  const content: any;
+
+  export default content;
+}

packages/gestalt-icons-android/src/classic/compact/index.ts

@@ -0,0 +1,35 @@
+import compactAdd from './ic_compact-add_gestalt.svg';
+import compactArrowUpRight from './ic_compact-arrow-up-right_gestalt.svg';
+import compactCancel from './ic_compact-cancel_gestalt.svg';
+import compactCheck from './ic_compact-check_gestalt.svg';
+import compactCheckCircleFill from './ic_compact-check-circle-fill_gestalt.svg';
+import compactChevronDown from './ic_compact-chevron-down_gestalt.svg';
+import compactChevronLeft from './ic_compact-chevron-left_gestalt.svg';
+import compactChevronRight from './ic_compact-chevron-right_gestalt.svg';
+import compactChevronUp from './ic_compact-chevron-up_gestalt.svg';
+import compactDash from './ic_compact-dash_gestalt.svg';
+import compactInfoCircleFill from './ic_compact-info-circle-fill_gestalt.svg';
+import compactLock from './ic_compact-lock_gestalt.svg';
+import compactSparkle from './ic_compact-sparkle_gestalt.svg';
+import compactWorkflowStatusProblem from './ic_compact-workflow-status-problem_gestalt.svg';
+import compactWorkflowStatusWarning from './ic_compact-workflow-status-warning_gestalt.svg';
+
+const icons = Object.freeze({
+  'compact-add': compactAdd,
+  'compact-arrow-up-right': compactArrowUpRight,
+  'compact-cancel': compactCancel,
+  'compact-check': compactCheck,
+  'compact-check-circle-fill': compactCheckCircleFill,
+  'compact-chevron-down': compactChevronDown,
+  'compact-chevron-left': compactChevronLeft,
+  'compact-chevron-right': compactChevronRight,
+  'compact-chevron-up': compactChevronUp,
+  'compact-dash': compactDash,
+  'compact-lock': compactLock,
+  'compact-sparkle': compactSparkle,
+  'compact-workflow-status-problem': compactWorkflowStatusProblem,
+  'compact-workflow-status-warning': compactWorkflowStatusWarning,
+  'compact-info-circle-fill': compactInfoCircleFill,
+});
+
+export default icons;

packages/gestalt-icons-android/src/vr-theme/compact/global.d.ts

@@ -0,0 +1,10 @@
+declare module '*.svg' {
+  /**
+   * Use `any` to avoid conflicts with
+   * `@svgr/webpack` plugin or
+   * `babel-plugin-inline-react-svg` plugin.
+   */
+  const content: any;
+
+  export default content;
+}

packages/gestalt-icons-android/src/vr-theme/compact/index.ts

@@ -0,0 +1,33 @@
+import compactAdd from './ic_vr_compact-add_gestalt.svg';
+import compactArrowUpRight from './ic_vr_compact-arrow-up-right_gestalt.svg';
+import compactCancel from './ic_vr_compact-cancel_gestalt.svg';
+import compactCheck from './ic_vr_compact-check_gestalt.svg';
+import compactCheckCircleFill from './ic_vr_compact-check-circle-fill_gestalt.svg';
+import compactChevronDown from './ic_vr_compact-chevron-down_gestalt.svg';
+import compactChevronLeft from './ic_vr_compact-chevron-left_gestalt.svg';
+import compactChevronRight from './ic_vr_compact-chevron-right_gestalt.svg';
+import compactChevronUp from './ic_vr_compact-chevron-up_gestalt.svg';
+import compactDash from './ic_vr_compact-dash_gestalt.svg';
+import compactInfoCircleFill from './ic_vr_compact-info-circle-fill_gestalt.svg';
+import compactLock from './ic_vr_compact-lock_gestalt.svg';
+import compactWorkflowStatusProblem from './ic_vr_compact-workflow-status-problem_gestalt.svg';
+import compactWorkflowStatusWarning from './ic_vr_compact-workflow-status-warning_gestalt.svg';
+
+const icons = Object.freeze({
+  'compact-add': compactAdd,
+  'compact-arrow-up-right': compactArrowUpRight,
+  'compact-cancel': compactCancel,
+  'compact-check': compactCheck,
+  'compact-check-circle-fill': compactCheckCircleFill,
+  'compact-chevron-down': compactChevronDown,
+  'compact-chevron-left': compactChevronLeft,
+  'compact-chevron-right': compactChevronRight,
+  'compact-chevron-up': compactChevronUp,
+  'compact-dash': compactDash,
+  'compact-info-circle-fill': compactInfoCircleFill,
+  'compact-lock': compactLock,
+  'compact-workflow-status-problem': compactWorkflowStatusProblem,
+  'compact-workflow-status-warning': compactWorkflowStatusWarning,
+});
+
+export default icons;

packages/gestalt/src/Icon.test.tsx

@@ -1,5 +1,6 @@
 import { create } from 'react-test-renderer';
 import Icon from './Icon';
+import IconCompact from './IconCompact';
 
 test('Icon renders', () => {
   const tree = create(<Icon accessibilityLabel="Add" icon="add" />).toJSON();
@@ -23,6 +24,13 @@ test('Icon flipped if its in the flip on rtl list', () => {
   expect(tree).toMatchSnapshot();
 });
 
+test('Compact Icons Component supports 16x16', () => {
+  const tree = create(
+    <IconCompact accessibilityLabel="check-circle-icon" icon="compact-check-circle-fill" />,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test('validate data test id for text', () => {
   const component = create(
     <Icon accessibilityLabel="send" dataTestId="test-icon" icon="send" />,