Skip to content

Commit 820c650

Browse files
nhironakanhironaka
committed
fix: update styles
1 parent 4a03a2e commit 820c650

File tree

5 files changed

+119
-121
lines changed

5 files changed

+119
-121
lines changed

‎packages/components/src/Radio.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ interface RadioProps extends AriaRadioProps {
2222
const RadioContext = createContext<ContextValue<RadioProps, HTMLLabelElement>>(null);
2323

2424
const RadioIcon = ({ isSelected }: Partial<RadioRenderProps>) => (
25-
<div className={radioIconStyles()}>
25+
<div data-radio-icon className={radioIconStyles()}>
2626
{isSelected ? (
2727
<svg aria-hidden="true" className={styles.icon} viewBox="0 0 16 16">
2828
<path

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

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@
1313
}
1414

1515
.card {
16-
/* Card variant styles for RadioGroup */
16+
align-items: stretch;
17+
gap: var(--lp-spacing-300);
1718
}
1819

1920
/* Card variant styling - targets child Radio components when parent has data-variant="card" */
2021
.group[data-variant='card'] label[data-rac] {
2122
border: var(--lp-border-width-200) solid var(--lp-color-border-ui-primary);
22-
border-radius: var(--lp-border-radius-regular);
23-
padding: var(--lp-spacing-400);
23+
border-radius: var(--lp-border-radius-medium);
2424
background: var(--lp-color-bg-ui-primary);
2525
transition: all var(--lp-duration-100) ease-in-out;
2626
flex-direction: column;
2727
align-items: flex-start;
28-
gap: var(--lp-spacing-300);
28+
gap: 0;
2929

3030
&[data-hovered] {
3131
border-color: var(--lp-color-border-interactive-primary-hover);
@@ -44,8 +44,17 @@
4444
}
4545

4646
&[data-selected] {
47-
border-color: var(--lp-color-border-interactive-primary-base);
47+
border-color: var(--lp-color-text-interactive-base);
4848
background: var(--lp-color-bg-interactive-primary-subtle);
49+
50+
& [slot='description'] {
51+
display: block;
52+
}
53+
54+
& [slot='heading'] {
55+
border-bottom-left-radius: 0;
56+
border-bottom-right-radius: 0;
57+
}
4958
}
5059

5160
&[data-disabled] {
@@ -55,43 +64,34 @@
5564
cursor: not-allowed;
5665
}
5766

58-
& .circle {
59-
position: absolute;
60-
top: var(--lp-spacing-400);
61-
right: var(--lp-spacing-400);
62-
width: var(--lp-size-20);
63-
height: var(--lp-size-20);
64-
}
65-
66-
&:not(:has([slot='description'])) {
67-
border-bottom-left-radius: 0;
68-
border-bottom-right-radius: 0;
69-
}
70-
7167
&:has([slot='heading']) {
7268
display: grid;
7369
grid-template-areas:
7470
'heading radio'
7571
'description description';
7672
grid-template-columns: 1fr auto;
77-
gap: var(--lp-spacing-300);
7873
align-items: flex-start;
74+
position: relative;
7975

80-
& .circle {
76+
& [data-radio-icon] {
77+
transition: all var(--lp-duration-100) ease-in-out;
8178
grid-area: radio;
82-
position: static;
79+
position: absolute;
80+
right: var(--lp-spacing-500);
81+
align-self: center;
8382
}
8483
}
8584

8685
&:has([slot='heading']):not(:has([slot='description'])) {
87-
grid-template-areas: 'heading radio';
86+
grid-template-areas: 'heading';
8887
}
8988

9089
& [slot='heading'] {
9190
grid-area: heading;
9291
display: flex;
9392
align-items: center;
94-
gap: var(--lp-spacing-300);
93+
gap: var(--lp-spacing-500);
94+
padding: var(--lp-spacing-400) var(--lp-spacing-500);
9595
}
9696

9797
& [slot='heading'] [slot='icon'] {
@@ -103,7 +103,6 @@
103103

104104
& [slot='heading'] [slot='label'] {
105105
font: var(--lp-text-label-1-semibold);
106-
color: var(--lp-color-text-ui-primary);
107106
}
108107

109108
& [slot='heading'] [slot='subtitle'] {
@@ -118,6 +117,12 @@
118117
font: var(--lp-text-body-2-regular);
119118
color: var(--lp-color-text-ui-secondary);
120119
margin-top: var(--lp-spacing-200);
120+
background: var(--lp-color-bg-interactive-selected);
121+
padding: var(--lp-spacing-500);
122+
display: none;
123+
border-bottom-left-radius: var(--lp-border-radius-medium);
124+
border-bottom-right-radius: var(--lp-border-radius-medium);
125+
transition: all var(--lp-duration-100) ease-in-out;
121126
}
122127

123128
&[data-selected] [slot='heading'] [slot='subtitle'] {

‎packages/components/stories/RadioGroup.stories.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { Meta, StoryObj } from '@storybook/react-vite';
22
import type { ComponentType } from 'react';
33

4+
import { Icon } from '@launchpad-ui/icons';
5+
import { vars } from '@launchpad-ui/vars';
46
import { userEvent, within } from 'storybook/test';
57

68
import { Button } from '../src/Button';
@@ -86,3 +88,90 @@ export const Validation: Story = {
8688
await userEvent.click(canvas.getByRole('button'));
8789
},
8890
};
91+
92+
export const Card: Story = {
93+
args: {
94+
variant: 'card',
95+
defaultValue: 'feature',
96+
},
97+
render: (args) => {
98+
return (
99+
<div
100+
style={{
101+
width: vars.size['320'],
102+
}}
103+
>
104+
<RadioGroup {...args}>
105+
<Label>Experiment type</Label>
106+
<div
107+
style={{
108+
display: 'flex',
109+
flexDirection: 'column',
110+
gap: vars.spacing[300],
111+
}}
112+
>
113+
<Radio value="feature">
114+
<div slot="heading">
115+
<div slot="icon">
116+
<Icon name="flag" size="medium" />
117+
</div>
118+
<div>
119+
<div slot="label">Feature change</div>
120+
<div slot="subtitle">A/B test different variations</div>
121+
</div>
122+
</div>
123+
<div slot="description">Compare treatments to see which one wins</div>
124+
</Radio>
125+
<Radio value="funnel">
126+
<div slot="heading">
127+
<div slot="icon">
128+
<Icon name="flask" size="medium" />
129+
</div>
130+
<div>
131+
<div slot="label">Funnel optimization</div>
132+
<div slot="subtitle">Multi-step conversion tracking</div>
133+
</div>
134+
</div>
135+
<div slot="description">Track the success of a multi-step user flow</div>
136+
</Radio>
137+
<Radio value="export">
138+
<div slot="heading">
139+
<div slot="icon">
140+
<Icon name="data" size="medium" />
141+
</div>
142+
<div>
143+
<div slot="label">Data Export only</div>
144+
<div slot="subtitle">Raw data for analysis</div>
145+
</div>
146+
</div>
147+
<div slot="description">Create custom experiment analysis in your warehouse</div>
148+
</Radio>
149+
<Radio value="snowflake" isDisabled>
150+
<div slot="heading">
151+
<div slot="icon">
152+
<Icon name="circle" size="medium" />
153+
</div>
154+
<div>
155+
<div slot="label">Snowflake native</div>
156+
<div slot="subtitle">Warehouse-powered insights</div>
157+
</div>
158+
</div>
159+
<div slot="description">Analysis powered by your Snowflake warehouse</div>
160+
</Radio>
161+
<Radio value="simple">
162+
<div slot="heading">
163+
<div slot="icon">
164+
<Icon name="gear" size="medium" />
165+
</div>
166+
<div>
167+
<div slot="label">Simple option</div>
168+
<div slot="subtitle">Basic configuration</div>
169+
</div>
170+
</div>
171+
</Radio>
172+
</div>
173+
</RadioGroup>
174+
</div>
175+
);
176+
},
177+
};

‎packages/components/stories/recipes/RadioCardGroup.mdx‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

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

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import { ListBox, ListBoxItem } from '../../src/ListBox';
2222
import { Modal, ModalOverlay } from '../../src/Modal';
2323
import { Perceivable } from '../../src/Perceivable';
2424
import { Popover } from '../../src/Popover';
25-
import { Radio } from '../../src/Radio';
2625
import { RadioButton } from '../../src/RadioButton';
2726
import { RadioGroup } from '../../src/RadioGroup';
2827
import { RadioIconButton } from '../../src/RadioIconButton';
@@ -149,93 +148,6 @@ export const RadioButtonGroup: Story = {
149148
name: 'RadioButtonGroup',
150149
};
151150

152-
export const RadioCardGroup: Story = {
153-
args: {
154-
children: (
155-
<div
156-
style={{
157-
display: 'flex',
158-
flexDirection: 'column',
159-
gap: vars.spacing[400],
160-
maxWidth: vars.size[480],
161-
}}
162-
>
163-
<RadioGroup defaultValue="feature" variant="card">
164-
<Label>Experiment type</Label>
165-
<div
166-
style={{
167-
display: 'flex',
168-
flexDirection: 'column',
169-
gap: vars.spacing[300],
170-
}}
171-
>
172-
<Radio value="feature">
173-
<div slot="heading">
174-
<div slot="icon">
175-
<Icon name="flag" size="medium" />
176-
</div>
177-
<div>
178-
<div slot="label">Feature change</div>
179-
<div slot="subtitle">A/B test different variations</div>
180-
</div>
181-
</div>
182-
<div slot="description">Compare treatments to see which one wins</div>
183-
</Radio>
184-
<Radio value="funnel">
185-
<div slot="heading">
186-
<div slot="icon">
187-
<Icon name="flask" size="medium" />
188-
</div>
189-
<div>
190-
<div slot="label">Funnel optimization</div>
191-
<div slot="subtitle">Multi-step conversion tracking</div>
192-
</div>
193-
</div>
194-
<div slot="description">Track the success of a multi-step user flow</div>
195-
</Radio>
196-
<Radio value="export">
197-
<div slot="heading">
198-
<div slot="icon">
199-
<Icon name="data" size="medium" />
200-
</div>
201-
<div>
202-
<div slot="label">Data Export only</div>
203-
<div slot="subtitle">Raw data for analysis</div>
204-
</div>
205-
</div>
206-
<div slot="description">Create custom experiment analysis in your warehouse</div>
207-
</Radio>
208-
<Radio value="snowflake" isDisabled>
209-
<div slot="heading">
210-
<div slot="icon">
211-
<Icon name="circle" size="medium" />
212-
</div>
213-
<div>
214-
<div slot="label">Snowflake native</div>
215-
<div slot="subtitle">Warehouse-powered insights</div>
216-
</div>
217-
</div>
218-
<div slot="description">Analysis powered by your Snowflake warehouse</div>
219-
</Radio>
220-
<Radio value="simple">
221-
<div slot="heading">
222-
<div slot="icon">
223-
<Icon name="gear" size="medium" />
224-
</div>
225-
<div>
226-
<div slot="label">Simple option</div>
227-
<div slot="subtitle">Basic configuration</div>
228-
</div>
229-
</div>
230-
</Radio>
231-
</div>
232-
</RadioGroup>
233-
</div>
234-
),
235-
},
236-
name: 'RadioCardGroup',
237-
};
238-
239151
export const ListBoxTooltip: Story = {
240152
render: () => {
241153
const [isOpen, setOpen] = useState(false);

0 commit comments

Comments
 (0)