feat(RadioTile): update RadioTile to accept Slug, phase 3 updates (…

…#16227) * feat(RadioTile): update RadioTile to accept Slug, phase 3 updates * chore(test): update snapshots * fix(RadioTile): fixed issue with feature flag variant * style(RadioTile): fix focus styles on RadioTile * Update packages/react/src/components/Slug/slug-story.scss --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Guilherme Datilio Ribeiro <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · May 24, 2024 · f7065bc · f7065bc
1 parent df8c92a
commit f7065bc
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 78 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6436,6 +6436,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6449,6 +6452,9 @@ Map {
       "required": Object {
         "type": "bool",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tabIndex": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -42,6 +42,12 @@ export interface RadioTileProps {
    */
   disabled?: boolean;
 
+  /**
+   * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -72,6 +78,11 @@ export interface RadioTileProps {
       | React.KeyboardEvent<HTMLInputElement>
   ) => void;
 
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug?: React.ReactNode;
+
   /**
    * Specify the tab index of the underlying `<input>`.
    */
@@ -100,6 +111,8 @@ const RadioTile = React.forwardRef(function RadioTile(
     id,
     onChange = noopFn,
     tabIndex = 0,
+    hasRoundedCorners,
+    slug,
     required,
     ...rest
   }: RadioTileProps,
@@ -111,10 +124,13 @@ const RadioTile = React.forwardRef(function RadioTile(
     customClassName,
     `${prefix}--tile`,
     `${prefix}--tile--selectable`,
+    `${prefix}--tile--radio`,
     {
       [`${prefix}--tile--is-selected`]: checked,
       [`${prefix}--tile--light`]: light,
       [`${prefix}--tile--disabled`]: disabled,
+      [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     }
   );
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
@@ -145,6 +161,14 @@ const RadioTile = React.forwardRef(function RadioTile(
     }
   }
 
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'xs',
+    });
+  }
+
   return (
     <div>
       <input
@@ -164,6 +188,7 @@ const RadioTile = React.forwardRef(function RadioTile(
       <label {...rest} htmlFor={inputId} className={className}>
         <span className={`${prefix}--tile__checkmark`}>{icon()}</span>
         <Text className={`${prefix}--tile-content`}>{children}</Text>
+        {normalizedSlug}
       </label>
     </div>
   );
@@ -192,6 +217,12 @@ RadioTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -223,6 +254,11 @@ RadioTile.propTypes = {
    */
   required: PropTypes.bool,
 
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Specify the tab index of the underlying `<input>`.
    */

diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js
@@ -30,6 +30,9 @@ import {
   TileAboveTheFoldContent,
   TileBelowTheFoldContent,
 } from '../Tile';
+import { default as RadioTile } from '../RadioTile';
+import TileGroup from '../TileGroup/TileGroup';
+import { FeatureFlags } from '../FeatureFlags';
 import { IconButton } from '../IconButton';
 import {
   ArrowRight,
@@ -697,75 +700,9 @@ export const _Tile = {
     },
   },
   render: (args) => (
-    <div className="slug-tile-container">
-      <Tile slug={slug} id="tile-1" {...args}>
-        <h4>Title</h4>
-        <p>
-          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
-          consectetur turpis mauris gravida penatibus.
-        </p>
-        <div className="ai-data">
-          <div className="data-container">
-            <p>Data Quality</p>
-            <h3>85%</h3>
-          </div>
-          <div className="data-container">
-            <p>Label text</p>
-            <h3>16%</h3>
-          </div>
-        </div>
-      </Tile>
-      <ClickableTile
-        href="https://www.carbondesignsystem.com/"
-        slug
-        id="tile-click"
-        renderIcon={ArrowRight}
-        {...args}>
-        <h4>Title</h4>
-        <p>
-          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
-          consectetur turpis mauris gravida penatibus.
-        </p>
-        <div className="ai-data">
-          <div className="data-container">
-            <p>Data Quality</p>
-            <h3>85%</h3>
-          </div>
-          <div className="data-container">
-            <p>Label text</p>
-            <h3>16%</h3>
-          </div>
-        </div>
-      </ClickableTile>
-      <SelectableTile
-        id="selectable-tile-1"
-        name="tiles"
-        value="selectable"
-        slug={slug}
-        {...args}>
-        <h4>Title</h4>
-        <p>
-          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
-          consectetur turpis mauris gravida penatibus.
-        </p>
-        <div className="ai-data">
-          <div className="data-container">
-            <p>Data Quality</p>
-            <h3>85%</h3>
-          </div>
-          <div className="data-container">
-            <p>Label text</p>
-            <h3>16%</h3>
-          </div>
-        </div>
-      </SelectableTile>
-      <ExpandableTile
-        id="expandable-tile-1"
-        tileCollapsedIconText="Interact to Expand tile"
-        tileExpandedIconText="Interact to Collapse tile"
-        slug={slug}
-        {...args}>
-        <TileAboveTheFoldContent>
+    <>
+      <div className="slug-tile-container">
+        <Tile slug={slug} id="tile-1" {...args}>
           <h4>Title</h4>
           <p>
             Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
@@ -781,15 +718,171 @@ export const _Tile = {
               <h3>16%</h3>
             </div>
           </div>
-        </TileAboveTheFoldContent>
-        <TileBelowTheFoldContent>
-          <h6>Expanded Section</h6>
+        </Tile>
+        <ClickableTile
+          href="https://www.carbondesignsystem.com/"
+          slug
+          id="tile-click"
+          renderIcon={ArrowRight}
+          {...args}>
+          <h4>Title</h4>
           <p>
             Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
-            at consectetur turpis mauris.
+            at consectetur turpis mauris gravida penatibus.
           </p>
-        </TileBelowTheFoldContent>
-      </ExpandableTile>
-    </div>
+          <div className="ai-data">
+            <div className="data-container">
+              <p>Data Quality</p>
+              <h3>85%</h3>
+            </div>
+            <div className="data-container">
+              <p>Label text</p>
+              <h3>16%</h3>
+            </div>
+          </div>
+        </ClickableTile>
+
+        <ExpandableTile
+          id="expandable-tile-1"
+          tileCollapsedIconText="Interact to Expand tile"
+          tileExpandedIconText="Interact to Collapse tile"
+          slug={slug}
+          {...args}>
+          <TileAboveTheFoldContent>
+            <h4>Title</h4>
+            <p>
+              Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+              at consectetur turpis mauris gravida penatibus.
+            </p>
+            <div className="ai-data">
+              <div className="data-container">
+                <p>Data Quality</p>
+                <h3>85%</h3>
+              </div>
+              <div className="data-container">
+                <p>Label text</p>
+                <h3>16%</h3>
+              </div>
+            </div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <h6>Expanded Section</h6>
+            <p>
+              Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+              at consectetur turpis mauris.
+            </p>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      </div>
+
+      <div className="slug-selectable-tile-container">
+        <TileGroup
+          defaultSelected="default-selected"
+          legend="Selectable Tile Group"
+          name="selectable tile group"
+          {...args}>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              id="selectable-tile-1"
+              slug={slug}
+              {...args}>
+              Option 1
+            </SelectableTile>
+          </div>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              slug={slug}
+              id="selectable-tile-2"
+              {...args}>
+              Option 2
+            </SelectableTile>
+          </div>
+          <div>
+            <SelectableTile
+              className="slug-selectable-tile"
+              slug={slug}
+              id="selectable-tile-3"
+              {...args}>
+              Option 3
+            </SelectableTile>
+          </div>
+        </TileGroup>
+      </div>
+      <br />
+      <br />
+      <div className="slug-selectable-tile-container">
+        <TileGroup
+          defaultSelected="default-selected"
+          legend="Radio Tile Group"
+          name="radio tile group"
+          {...args}>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-1"
+            value="standard"
+            slug={slug}
+            {...args}>
+            Option 1
+          </RadioTile>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-2"
+            value="default-selected"
+            slug={slug}
+            {...args}>
+            Option 2
+          </RadioTile>
+          <RadioTile
+            className="slug-radio-tile"
+            id="radio-tile-3"
+            value="selected"
+            slug={slug}
+            {...args}>
+            Option 3
+          </RadioTile>
+        </TileGroup>
+      </div>
+      <br />
+      <br />
+      <div className="slug-selectable-tile-container slug-experimental-radio-tile-container">
+        <FeatureFlags
+          flags={{
+            'enable-v12-tile-radio-icons': true,
+          }}>
+          <TileGroup
+            defaultSelected="default-selected"
+            legend="Radio Tile Group - Feature Flags enabled"
+            name="radio tile group two"
+            {...args}>
+            <RadioTile
+              className="slug-radio-tile"
+              id="radio-tile-4"
+              value="standard"
+              slug={slug}
+              {...args}>
+              Option 1
+            </RadioTile>
+            <RadioTile
+              className="slug-radio-tile"
+              id="radio-tile-5"
+              value="default-selected"
+              slug={slug}
+              {...args}>
+              Option 2
+            </RadioTile>
+            <RadioTile
+              className="slug-radio-tile"
+              id="radio-tile-6"
+              value="selected"
+              slug={slug}
+              {...args}>
+              Option 3
+            </RadioTile>
+          </TileGroup>
+        </FeatureFlags>
+      </div>
+    </>
   ),
 };