feat(tile): add experimental improved contrast tile (#12711)

* feat(tile): add experimental improved contrast tile closes #12464 * Update ExperimentalTile.stories.js * feat(tile): update feature flag and story * feat(tile): add experimental tile feature flag docs * feat(tile): add improved contrast to vrt * chore: move improved tile to experimental section in storybook * chore: docs Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 8, 2022 · 4196aea · 4196aea
1 parent 0e42c3a
commit 4196aea
Show file tree

Hide file tree

Showing 21 changed files with 567 additions and 1 deletion.
diff --git a/e2e/components/Tile/Tile-test.e2e.js b/e2e/components/Tile/Tile-test.e2e.js
@@ -101,6 +101,80 @@ test.describe('Tile', () => {
           theme,
         });
       });
+
+      test('improved contrast clickable @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--clickable',
+          theme,
+        });
+      });
+
+      test('improved contrast clickable with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--clickable-with-layer',
+          theme,
+        });
+      });
+
+      test('improved contrast selectable @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--selectable',
+          theme,
+        });
+      });
+
+      test('improved contrast multi select @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--multi-select',
+          theme,
+        });
+      });
+
+      test('improved contrast radio @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--radio',
+          theme,
+        });
+      });
+
+      test('improved contrast radio with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--radio-with-layer',
+          theme,
+        });
+      });
+
+      test('improved contrast expandable @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--expandable',
+          theme,
+        });
+      });
+
+      test('improved contrast expandable with interactive @vrt', async ({
+        page,
+      }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--expandable-with-interactive',
+          theme,
+        });
+      });
+
+      test('improved contrast expandable with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tile',
+          id: 'components-tile-experimental-improved-contrast--expandable-with-layer',
+          theme,
+        });
+      });
     });
   });
 

diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -41,6 +41,9 @@ Array [
   "borderSubtleSelected01",
   "borderSubtleSelected02",
   "borderSubtleSelected03",
+  "borderTile01",
+  "borderTile02",
+  "borderTile03",
   "breakpoint",
   "breakpointDown",
   "breakpointUp",

diff --git a/packages/feature-flags/feature-flags.yml b/packages/feature-flags/feature-flags.yml
@@ -22,3 +22,7 @@ feature-flags:
     description: >
       Enable the features and functionality for the v11 Release
     enabled: false
+  - name: enable-experimental-tile-contrast
+    description: >
+      Enable the experimental tile improved contrast styles
+    enabled: false
diff --git a/packages/react/src/components/Tile/ExperimentalTile.mdx b/packages/react/src/components/Tile/ExperimentalTile.mdx
@@ -0,0 +1,55 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs';
+
+# Tile
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tile)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/tile/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/tile/accessibility)
+
+## Improved Contrast Tile
+
+In Sass, you can enable the improved contrast tiles via a feature flag.
+
+```scss
+@include feature-flags.enable('enable-experimental-tile-contrast');
+```
+
+or if you have multiple feature flags you can enable them this way.
+
+```scss
+@use '@carbon/react/scss/feature-flags' with (
+  $feature-flags: (
+    'enable-experimental-tile-contrast': true,
+  )
+);
+```
+
+<Preview>
+  <div style={{ width: '1018px', maxWidth: '100%' }}>
+    <Story id="experimental-improved-contrast-tile--clickable" />
+  </div>
+  <div style={{ width: '1018px', maxWidth: '100%' }}>
+    <Story id="experimental-improved-contrast-tile--expandable" />
+  </div>
+  <div style={{ width: '1018px', maxWidth: '100%' }}>
+    <Story id="experimental-improved-contrast-tile--multi-select" />
+  </div>
+  <div style={{ width: '1018px', maxWidth: '100%' }}>
+    <Story id="experimental-improved-contrast-tile--radio" />
+  </div>
+  <div style={{ width: '1018px', maxWidth: '100%' }}>
+    <Story id="experimental-improved-contrast-tile--selectable" />
+  </div>
+</Preview>
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Tile/Tile.mdx).