Skip to content

Commit a18bcb3

Browse files
ktaborssnowystinger
ktabors
and
snowystinger
authored
Adding more S2 ContextualHelp examples (#6875)
* Adding more S2 ContextualHelp examples * adding NumberField ContectualHelp for v3 parity * re-adding removed props when previously meant to just stop the omit of a prop. --------- Co-authored-by: Robert Snow <[email protected]>
1 parent 754e9ad commit a18bcb3

File tree

8 files changed

+529
-12
lines changed

8 files changed

+529
-12
lines changed

‎packages/@react-spectrum/s2/src/NumberField.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
4040
export interface NumberFieldProps extends
4141
AriaNumberFieldProps,
4242
StyleProps,
43-
Omit<SpectrumLabelableProps, 'contextualHelp'>,
43+
SpectrumLabelableProps,
4444
HelpTextProps {
4545
/**
4646
* Whether the NumberField step buttons should be collapsed into a single column.
@@ -228,6 +228,7 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
228228
[props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
229229
let {
230230
label,
231+
contextualHelp,
231232
description: descriptionMessage,
232233
errorMessage,
233234
isCollapsed,
@@ -280,7 +281,8 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
280281
size={size}
281282
labelPosition={labelPosition}
282283
labelAlign={labelAlign}
283-
necessityIndicator={necessityIndicator}>
284+
necessityIndicator={necessityIndicator}
285+
contextualHelp={contextualHelp}>
284286
{label}
285287
</FieldLabel>
286288
<FieldGroup

‎packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,16 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Checkbox, CheckboxGroup} from '../src';
13+
import {
14+
Checkbox,
15+
CheckboxGroup,
16+
Content,
17+
ContextualHelp,
18+
Footer,
19+
Heading,
20+
Link,
21+
Text
22+
} from '../src';
1423
import type {Meta, StoryObj} from '@storybook/react';
1524

1625
const meta: Meta<typeof CheckboxGroup> = {
@@ -42,3 +51,64 @@ export const Example: Story = {
4251
label: 'Favorite sports'
4352
}
4453
};
54+
55+
export const ContextualHelpExample = (args: any) => (
56+
<CheckboxGroup {...args}>
57+
<Checkbox isEmphasized value="soccer">Soccer</Checkbox>
58+
<Checkbox value="baseball">Baseball</Checkbox>
59+
<Checkbox value="basketball">Basketball</Checkbox>
60+
</CheckboxGroup>
61+
);
62+
63+
ContextualHelpExample.args = {
64+
label: 'Favorite sports',
65+
contextualHelp: (
66+
<ContextualHelp>
67+
<Heading>Sports</Heading>
68+
<Content>
69+
<Text>
70+
Social games we paly to have fun and stay healthy.
71+
</Text>
72+
</Content>
73+
<Footer>
74+
<Link
75+
isStandalone
76+
href="https://en.wikipedia.org/wiki/Sport"
77+
target="_blank">Learn more about sports</Link>
78+
</Footer>
79+
</ContextualHelp>
80+
)
81+
};
82+
83+
ContextualHelpExample.parameters = {
84+
docs: {
85+
source: {
86+
transform: () => {
87+
return `
88+
<CheckboxGroup
89+
contextualHelp={
90+
<ContextualHelp>
91+
<Heading>Sports</Heading>
92+
<Content>
93+
<Text>
94+
Social games we paly to have fun and stay healthy.
95+
</Text>
96+
</Content>
97+
<Footer>
98+
<Link
99+
isStandalone
100+
href="https://en.wikipedia.org/wiki/Sport"
101+
target="_blank">Learn more about sports</Link>
102+
</Footer>
103+
</ContextualHelp>
104+
}
105+
label="Segment"
106+
/>
107+
<Checkbox isEmphasized value="soccer">Soccer</Checkbox>
108+
<Checkbox value="baseball">Baseball</Checkbox>
109+
<Checkbox value="basketball">Basketball</Checkbox>
110+
</CheckboxGroup>`;
111+
}
112+
}
113+
}
114+
};

‎packages/@react-spectrum/s2/stories/ColorField.stories.tsx

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {ColorField} from '../src/ColorField';
13+
import {
14+
ColorField,
15+
Content,
16+
ContextualHelp,
17+
Footer,
18+
Heading,
19+
Link,
20+
Text
21+
} from '../src/';
1422
import type {Meta} from '@storybook/react';
1523

1624
const meta: Meta<typeof ColorField> = {
@@ -31,3 +39,56 @@ export const Example = (args: any) => <ColorField {...args} />;
3139
Example.args = {
3240
label: 'Color'
3341
};
42+
43+
export const ContextualHelpExample = (args: any) => (
44+
<ColorField {...args} />
45+
);
46+
47+
ContextualHelpExample.args = {
48+
label: 'Color',
49+
contextualHelp: (
50+
<ContextualHelp>
51+
<Heading>Color</Heading>
52+
<Content>
53+
<Text>
54+
Pick your favorite color.
55+
</Text>
56+
</Content>
57+
<Footer>
58+
<Link
59+
isStandalone
60+
href="https://en.wikipedia.org/wiki/Color"
61+
target="_blank">Learn more about color</Link>
62+
</Footer>
63+
</ContextualHelp>
64+
)
65+
};
66+
67+
ContextualHelpExample.parameters = {
68+
docs: {
69+
source: {
70+
transform: () => {
71+
return `
72+
<ColorField
73+
contextualHelp={
74+
<ContextualHelp>
75+
<Heading>Color</Heading>
76+
<Content>
77+
<Text>
78+
Pick your favorite color.
79+
</Text>
80+
</Content>
81+
<Footer>
82+
<Link
83+
isStandalone
84+
href="https://en.wikipedia.org/wiki/Color"
85+
target="_blank">Learn more about color</Link>
86+
</Footer>
87+
</ContextualHelp>
88+
}
89+
label="Color"
90+
/>`;
91+
}
92+
}
93+
}
94+
};

‎packages/@react-spectrum/s2/stories/NumberField.stories.tsx

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,18 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Button, Form} from '../src';
13+
import {
14+
Button,
15+
Content,
16+
ContextualHelp,
17+
Footer,
18+
Form,
19+
Heading,
20+
Link,
21+
NumberField,
22+
Text
23+
} from '../src';
1424
import type {Meta, StoryObj} from '@storybook/react';
15-
import {NumberField} from '../src/NumberField';
1625
import {style} from '../style/spectrum-theme' with {type: 'macro'};
1726

1827
const meta: Meta<typeof NumberField> = {
@@ -62,3 +71,55 @@ CustomWidth.parameters = {
6271
disable: true
6372
}
6473
};
74+
75+
76+
export const ContextualHelpExample = (args: any) => <NumberField {...args} />;
77+
78+
ContextualHelpExample.args = {
79+
label: 'Quantity',
80+
contextualHelp: (
81+
<ContextualHelp>
82+
<Heading>Quantity</Heading>
83+
<Content>
84+
<Text>
85+
Pick a number between negative infinity and positive infinity.
86+
</Text>
87+
</Content>
88+
<Footer>
89+
<Link
90+
isStandalone
91+
href="https://en.wikipedia.org/wiki/Quantity"
92+
target="_blank">Learn more about quantity</Link>
93+
</Footer>
94+
</ContextualHelp>
95+
)
96+
};
97+
98+
ContextualHelpExample.parameters = {
99+
docs: {
100+
source: {
101+
transform: () => {
102+
return `
103+
<NumberField
104+
label="Quantity"
105+
contextualHelp={
106+
<ContextualHelp>
107+
<Heading>Quantity</Heading>
108+
<Content>
109+
<Text>
110+
Pick a number between negative infinity and positive infinity.
111+
</Text>
112+
</Content>
113+
<Footer>
114+
<Link
115+
isStandalone
116+
href="https://en.wikipedia.org/wiki/Quantity"
117+
target="_blank">Learn more about quantity</Link>
118+
</Footer>
119+
</ContextualHelp>
120+
}
121+
/>`;
122+
}
123+
}
124+
}
125+
};

‎packages/@react-spectrum/s2/stories/Picker.stories.tsx

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,20 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Button, Form, Header, Heading, Picker, PickerItem, PickerSection, Text} from '../src';
14-
13+
import {
14+
Button,
15+
Content,
16+
ContextualHelp,
17+
Footer,
18+
Form,
19+
Header,
20+
Heading,
21+
Link,
22+
Picker,
23+
PickerItem,
24+
PickerSection,
25+
Text
26+
} from '../src';
1527
import {categorizeArgTypes, StaticColorDecorator} from './utils';
1628
import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
1729
import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
@@ -140,3 +152,72 @@ CustomWidth.parameters = {
140152
disable: true
141153
}
142154
};
155+
156+
export const ContextualHelpExample = (args: any) => (
157+
<Picker {...args}>
158+
<PickerItem>Chocolate</PickerItem>
159+
<PickerItem>Mint</PickerItem>
160+
<PickerItem>Strawberry</PickerItem>
161+
<PickerItem>Vanilla</PickerItem>
162+
<PickerItem>Chocolate Chip Cookie Dough</PickerItem>
163+
</Picker>
164+
);
165+
166+
ContextualHelpExample.args = {
167+
label: 'Ice cream flavor',
168+
contextualHelp: (
169+
<ContextualHelp>
170+
<Heading>What is a ice cream?</Heading>
171+
<Content>
172+
<Text>
173+
A combination of sugar, eggs, milk, and cream is cooked to make
174+
a custard base. Then, flavorings are added, and this flavored
175+
mixture is carefully churned and frozen to make ice cream.
176+
</Text>
177+
</Content>
178+
<Footer>
179+
<Link
180+
isStandalone
181+
href="https://en.wikipedia.org/wiki/Ice_cream"
182+
target="_blank">Learn more about ice cream</Link>
183+
</Footer>
184+
</ContextualHelp>
185+
)
186+
};
187+
188+
ContextualHelpExample.parameters = {
189+
docs: {
190+
source: {
191+
transform: () => {
192+
return `
193+
<Picker
194+
contextualHelp={
195+
<ContextualHelp>
196+
<Heading>What is a ice cream?</Heading>
197+
<Content>
198+
<Text>
199+
A combination of sugar, eggs, milk, and cream is cooked to make
200+
a custard base. Then, flavorings are added, and this flavored
201+
mixture is carefully churned and frozen to make ice cream.
202+
</Text>
203+
</Content>
204+
<Footer>
205+
<Link
206+
isStandalone
207+
href="https://en.wikipedia.org/wiki/Ice_cream"
208+
target="_blank">Learn more about ice cream</Link>
209+
</Footer>
210+
</ContextualHelp>
211+
}
212+
label="Ice cream flavor"
213+
/>
214+
<PickerItem>Chocolate</PickerItem>
215+
<PickerItem>Mint</PickerItem>
216+
<PickerItem>Strawberry</PickerItem>
217+
<PickerItem>Vanilla</PickerItem>
218+
<PickerItem>Chocolate Chip Cookie Dough</PickerItem>
219+
</Picker>`;
220+
}
221+
}
222+
}
223+
};

0 commit comments

Comments
 (0)