Skip to content

Commit

Permalink
feat(RadioTile): update RadioTile to accept Slug, phase 3 updates (…
Browse files Browse the repository at this point in the history 
…carbon-design-system#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]>
  • Loading branch information
@tw15egan @alisonjoseph
@guidari @tay1orjones
4 people committed May 24, 2024
1 parent df8c92a commit f7065bc
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 78 deletions.
6 changes: 6 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6436,6 +6436,9 @@ Map {
"disabled": Object {
"type": "bool",
},
"hasRoundedCorners": Object {
"type": "bool",
},
"id": Object {
"type": "string",
},
Expand All @@ -6449,6 +6452,9 @@ Map {
"required": Object {
"type": "bool",
},
"slug": Object {
"type": "node",
},
"tabIndex": Object {
"type": "number",
},
Expand Down
36 changes: 36 additions & 0 deletions packages/react/src/components/RadioTile/RadioTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`.
*/
Expand Down Expand Up @@ -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>`.
*/
Expand Down Expand Up @@ -100,6 +111,8 @@ const RadioTile = React.forwardRef(function RadioTile(
id,
onChange = noopFn,
tabIndex = 0,
hasRoundedCorners,
slug,
required,
...rest
}: RadioTileProps,
Expand All @@ -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');
Expand Down Expand Up @@ -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
Expand All @@ -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>
);
Expand Down Expand Up @@ -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>`.
*/
Expand Down Expand Up @@ -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>`.
*/
Expand Down
245 changes: 169 additions & 76 deletions packages/react/src/components/Slug/Slug-examples.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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>
</>
),
};
Loading

0 comments on commit f7065bc

Please sign in to comment.