Skip to content

Commit 20db863

Browse files
feat: add subtitle slot to RadioCard matching gonfalon shortDescription
- Add subtitle slot styling to RadioGroup.module.css with secondary text color - Update selected state styling to use primary color and medium font weight - Update RadioCardGroup story to demonstrate subtitle slot usage - Maintain CSS-only approach using descendant selectors for styling Co-Authored-By: Naomi Hironaka <[email protected]>
1 parent dd04246 commit 20db863

File tree

2 files changed

+32
-5
lines changed

2 files changed

+32
-5
lines changed

packages/components/src/styles/RadioGroup.module.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,22 @@
106106
color: var(--lp-color-text-ui-primary);
107107
}
108108

109+
& [slot='heading'] [slot='subtitle'] {
110+
font: var(--lp-text-body-2-regular);
111+
color: var(--lp-color-text-ui-secondary);
112+
text-align: left;
113+
white-space: normal;
114+
}
115+
109116
& [slot='description'] {
110117
grid-area: description;
111118
font: var(--lp-text-body-2-regular);
112119
color: var(--lp-color-text-ui-secondary);
113120
margin-top: var(--lp-spacing-200);
114121
}
122+
123+
&[data-selected] [slot='heading'] [slot='subtitle'] {
124+
color: var(--lp-color-text-ui-primary);
125+
font-weight: var(--lp-font-weight-medium);
126+
}
115127
}

packages/components/stories/recipes/composition.stories.tsx

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,10 @@ export const RadioCardGroup: Story = {
174174
<div slot="icon">
175175
<Icon name="flag" size="medium" />
176176
</div>
177-
<div slot="label">Feature change</div>
177+
<div>
178+
<div slot="label">Feature change</div>
179+
<div slot="subtitle">A/B test different variations</div>
180+
</div>
178181
</div>
179182
<div slot="description">Compare treatments to see which one wins</div>
180183
</Radio>
@@ -183,7 +186,10 @@ export const RadioCardGroup: Story = {
183186
<div slot="icon">
184187
<Icon name="flask" size="medium" />
185188
</div>
186-
<div slot="label">Funnel optimization</div>
189+
<div>
190+
<div slot="label">Funnel optimization</div>
191+
<div slot="subtitle">Multi-step conversion tracking</div>
192+
</div>
187193
</div>
188194
<div slot="description">Track the success of a multi-step user flow</div>
189195
</Radio>
@@ -192,7 +198,10 @@ export const RadioCardGroup: Story = {
192198
<div slot="icon">
193199
<Icon name="data" size="medium" />
194200
</div>
195-
<div slot="label">Data Export only</div>
201+
<div>
202+
<div slot="label">Data Export only</div>
203+
<div slot="subtitle">Raw data for analysis</div>
204+
</div>
196205
</div>
197206
<div slot="description">Create custom experiment analysis in your warehouse</div>
198207
</Radio>
@@ -201,7 +210,10 @@ export const RadioCardGroup: Story = {
201210
<div slot="icon">
202211
<Icon name="circle" size="medium" />
203212
</div>
204-
<div slot="label">Snowflake native</div>
213+
<div>
214+
<div slot="label">Snowflake native</div>
215+
<div slot="subtitle">Warehouse-powered insights</div>
216+
</div>
205217
</div>
206218
<div slot="description">Analysis powered by your Snowflake warehouse</div>
207219
</Radio>
@@ -210,7 +222,10 @@ export const RadioCardGroup: Story = {
210222
<div slot="icon">
211223
<Icon name="gear" size="medium" />
212224
</div>
213-
<div slot="label">Simple option</div>
225+
<div>
226+
<div slot="label">Simple option</div>
227+
<div slot="subtitle">Basic configuration</div>
228+
</div>
214229
</div>
215230
</Radio>
216231
</div>

0 commit comments

Comments
 (0)