feat(radiotile): update to use radio button icon (#15786)

* feat(radiotile): update to use radio button icon * feat(radiotile): place radio button icon behind feature flag * chore: revert changes to tile story * test(radiotile): verify unselected radio without 'defaultSelected' * chore: tilegroup jest test description --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Mar 1, 2024 · ef9501b · ef9501b
1 parent 8305c53
commit ef9501b
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 17 deletions.
diff --git a/packages/feature-flags/feature-flags.yml b/packages/feature-flags/feature-flags.yml
@@ -30,6 +30,10 @@ feature-flags:
     description: >
       Enable rendering of default icons in the tile components
     enabled: false
+  - name: enable-v12-tile-radio-icons
+    description: >
+      Enable rendering of radio icons in the RadioTile component
+    enabled: false
   - name: enable-v12-overflowmenu
     description: >
       Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents

diff --git a/packages/react/src/components/FeatureFlags/overview.stories.mdx b/packages/react/src/components/FeatureFlags/overview.stories.mdx
@@ -36,8 +36,10 @@ components with all feature flags turned on.
 | `enable-experimental-tile-contrast` | Enable the improved styling for tiles that provides better contrast      | `false` |                 | ✅        |
 | `enable-v12-tile-default-icons`     | Enable default icons for Tile components                                 | `false` | ✅              |           |
 | `enable-v12-overflowmenu`           | Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents | `false` | ✅              |           |
+| `enable-v12-tile-radio-icons`       | Enable rendering of default icons in the tile components                 | `false` | ✅              | ✅        |
 | `enable-treeview-controllable`      | Enable the new TreeView controllable API                                 | `false` | ✅              |           |
 
+
 ## Turning on feature flags in Javascript/react
 
 Use the FeatureFlag component to turn on a feature flag for a portion of your

diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { CheckmarkFilled } from '@carbon/icons-react';
+import {
+  RadioButtonChecked,
+  RadioButton,
+  CheckmarkFilled,
+} from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -15,6 +19,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { noopFn } from '../../internal/noopFn';
 import { Text } from '../Text';
+import { useFeatureFlag } from '../FeatureFlags';
 
 const RadioTile = React.forwardRef(function RadioTile(
   {
@@ -45,6 +50,18 @@ const RadioTile = React.forwardRef(function RadioTile(
       [`${prefix}--tile--disabled`]: disabled,
     }
   );
+  const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
+  function icon() {
+    if (v12TileRadioIcons) {
+      if (checked) {
+        return <RadioButtonChecked />;
+      } else {
+        return <RadioButton />;
+      }
+    } else {
+      return <CheckmarkFilled />;
+    }
+  }
 
   function handleOnChange(evt) {
     onChange(value, name, evt);
@@ -73,9 +90,7 @@ const RadioTile = React.forwardRef(function RadioTile(
         ref={ref}
       />
       <label {...rest} htmlFor={inputId} className={className}>
-        <span className={`${prefix}--tile__checkmark`}>
-          <CheckmarkFilled />
-        </span>
+        <span className={`${prefix}--tile__checkmark`}>{icon()}</span>
         <Text className={`${prefix}--tile-content`}>{children}</Text>
       </label>
     </div>

diff --git a/packages/react/src/components/Tile/Tile.featureflag.stories.js b/packages/react/src/components/Tile/Tile.featureflag.stories.js
@@ -155,25 +155,22 @@ MultiSelect.argTypes = {
 export const Radio = (args) => {
   return (
     <div className={experimentalClassname}>
-      <TileGroup
-        defaultSelected="default-selected"
-        legend="Radio Tile Group"
-        name="radio tile group">
+      <TileGroup legend="Radio Tile Group" name="radio tile group">
         <RadioTile
           id="radio-tile-1"
-          value="standard"
+          value="radio-tile-1"
           style={{ marginBottom: '.5rem' }}
           {...args}>
           Option 1
         </RadioTile>
         <RadioTile
           id="radio-tile-2"
-          value="default-selected"
+          value="radio-tile-2"
           style={{ marginBottom: '.5rem' }}
           {...args}>
           Option 2
         </RadioTile>
-        <RadioTile id="radio-tile-3" value="selected" {...args}>
+        <RadioTile id="radio-tile-3" value="radio-tile-3" {...args} disabled>
           Option 3
         </RadioTile>
       </TileGroup>
@@ -199,16 +196,17 @@ export const RadioWithLayer = () => {
       {(layer) => (
         <div className={experimentalClassname}>
           <TileGroup
-            defaultSelected="default-selected"
             legend="Radio Tile Group"
             name={`radio-tile-group-${layer}`}>
             <RadioTile
               id={`radio-tile-${layer}-1`}
-              value="standard"
+              value={`radio-tile-${layer}-1`}
               style={{ marginBottom: '.5rem' }}>
               Option 1
             </RadioTile>
-            <RadioTile id={`radio-tile-${layer}-2`} value="default-selected">
+            <RadioTile
+              id={`radio-tile-${layer}-2`}
+              value={`radio-tile-${layer}-2`}>
               Option 2
             </RadioTile>
           </TileGroup>

diff --git a/packages/react/src/components/Tile/tile-story.scss b/packages/react/src/components/Tile/tile-story.scss
@@ -2,7 +2,10 @@
 @use '@carbon/react/scss/type';
 
 .experimental-tile {
-  @include tile.tile($enable-experimental-tile-contrast: true);
+  @include tile.tile(
+    $enable-experimental-tile-contrast: true,
+    $enable-v12-tile-radio-icons: true
+  );
 }
 
 div .cds--tile--selectable:not(:last-child) {

diff --git a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
@@ -10,6 +10,7 @@ import TileGroup from '../TileGroup';
 import RadioTile from '../../RadioTile/RadioTile';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { FeatureFlags } from '../../FeatureFlags';
 
 describe('PasswordInput', () => {
   describe('renders as expected - Component API', () => {
@@ -120,6 +121,39 @@ describe('PasswordInput', () => {
       );
     });
 
+    //Feature flag : enable-v12-tile-radio-icons
+    it('should keep radio unselected if no `defaultSelected` is provided', () => {
+      render(
+        <FeatureFlags
+          flags={{
+            'enable-v12-tile-radio-icons': true,
+          }}>
+          <TileGroup legend="TestGroup" name="test">
+            <RadioTile id="test-1" value="test-1">
+              Option 1
+            </RadioTile>
+            <RadioTile id="test-2" value="test-2">
+              Option 2
+            </RadioTile>
+          </TileGroup>
+        </FeatureFlags>
+      );
+
+      expect(screen.getByDisplayValue('test-1')).toEqual(
+        screen.getByRole('radio', {
+          checked: false,
+          name: 'Option 1',
+        })
+      );
+
+      expect(screen.getByDisplayValue('test-2')).toEqual(
+        screen.getByRole('radio', {
+          checked: false,
+          name: 'Option 2',
+        })
+      );
+    });
+
     it('should support `valueSelected` as a way to select a radio button', () => {
       const { rerender } = render(
         <TileGroup

diff --git a/packages/react/src/feature-flags.js b/packages/react/src/feature-flags.js
@@ -12,4 +12,5 @@ FeatureFlags.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
+  'enable-v12-tile-radio-icons': false,
 });
diff --git a/packages/styles/scss/_feature-flags.scss b/packages/styles/scss/_feature-flags.scss
@@ -12,6 +12,7 @@
     'enable-css-grid': true,
     'enable-v11-release': true,
     'enable-experimental-tile-contrast': false,
+    'enable-v12-tile-radio-icons': false,
   )
   !default
 );
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
@@ -27,7 +27,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 /// Tile styles
 /// @access public
 /// @group tile
-@mixin tile($enable-experimental-tile-contrast: false) {
+@mixin tile(
+  $enable-experimental-tile-contrast: false,
+  $enable-v12-tile-radio-icons: false
+) {
   .#{$prefix}--tile-group {
     @include reset;
   }
@@ -163,9 +166,17 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     block-size: 1rem;
     inset-block-start: layout.density('padding-inline');
     inset-inline-end: layout.density('padding-inline');
-    opacity: 0;
     transition: $duration-fast-02 motion(standard, productive);
 
+    @if (
+      enabled('enable-v12-tile-radio-icons') or
+        $enable-experimental-tile-contrast
+    ) {
+      opacity: 1;
+    } @else {
+      opacity: 0;
+    }
+
     svg {
       border-radius: 50%;
       fill: $icon-secondary;