Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
May 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
02122d7
feat(RadioTile): update RadioTile to accept Slug, phase 3 updates
tw15egan Apr 18, 2024
a654509
chore(test): update snapshots
tw15egan Apr 18, 2024
8655c79
fix(RadioTile): fixed issue with feature flag variant
tw15egan Apr 22, 2024
bebe951
Merge branch 'main' into radio-tile-phase-3-updates
tw15egan Apr 22, 2024
06873fe
Merge branch 'main' into radio-tile-phase-3-updates
tw15egan May 6, 2024
be279a4
style(RadioTile): fix focus styles on RadioTile
tw15egan May 6, 2024
260c1b6
Update packages/react/src/components/Slug/slug-story.scss
alisonjoseph May 23, 2024
be2dca2
Merge branch 'main' into radio-tile-phase-3-updates
guidari May 24, 2024
9a730c3
Merge branch 'main' into radio-tile-phase-3-updates
tay1orjones May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6580,6 +6580,9 @@ Map {
"disabled": Object {
"type": "bool",
},
"hasRoundedCorners": Object {
"type": "bool",
},
"id": Object {
"type": "string",
},
Expand All @@ -6590,6 +6593,9 @@ Map {
"onChange": Object {
"type": "func",
},
"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
Open in desktop
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 All @@ -95,6 +106,8 @@ const RadioTile = React.forwardRef(function RadioTile(
id,
onChange = noopFn,
tabIndex = 0,
hasRoundedCorners,
slug,
...rest
}: RadioTileProps,
ref: React.Ref<HTMLInputElement>
Expand All @@ -105,10 +118,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 @@ -139,6 +155,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 @@ -157,6 +181,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 @@ -185,6 +210,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 All @@ -211,6 +242,11 @@ RadioTile.propTypes = {
*/
onChange: PropTypes.func,

/**
* **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
Open in desktop
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
Loading