Skip to content

Commit 72e0b4c

Browse files
DSilDSil
committed
fix(ChoiceGroup): the label now renders as a div by default
It was rendering as an h4, causing problems with heading hierarchies
1 parent fc4eb13 commit 72e0b4c

File tree

4 files changed

+25
-22
lines changed

4 files changed

+25
-22
lines changed

‎packages/orbit-components/src/ChoiceGroup/ChoiceGroup.stories.tsx

+14-15
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const meta: Meta<ChoiceGroupPropsAndCustomArgs> = {
3030
label: "What was the reason for your cancellation?",
3131
onlySelectionText: "Only",
3232
labelSize: LABEL_SIZES.NORMAL,
33-
labelAs: LABEL_ELEMENTS.H4,
3433
error: "",
3534
filter: false,
3635
onChange: action("onChange"),
@@ -45,7 +44,7 @@ const meta: Meta<ChoiceGroupPropsAndCustomArgs> = {
4544
},
4645
},
4746
labelAs: {
48-
options: Object.values(LABEL_ELEMENTS),
47+
options: ["div", ...Object.values(LABEL_ELEMENTS)],
4948
control: {
5049
type: "select",
5150
},
@@ -59,9 +58,9 @@ type Story = StoryObj<ChoiceGroupPropsAndCustomArgs>;
5958
export const Default: Story = {
6059
render: args => (
6160
<ChoiceGroup {...args}>
62-
<Radio label="Reason one" value="one" />
63-
<Radio label="Reason two" value="two" />
64-
<Radio label="Reason three" value="three" />
61+
<Radio name="reason" label="Reason one" value="one" />
62+
<Radio name="reason" label="Reason two" value="two" />
63+
<Radio name="reason" label="Reason three" value="three" />
6564
</ChoiceGroup>
6665
),
6766

@@ -104,9 +103,9 @@ export const Filter: Story = {
104103
export const WithError: Story = {
105104
render: args => (
106105
<ChoiceGroup {...args}>
107-
<Radio label="Reason one" value="one" />
108-
<Radio label="Reason two" value="two" />
109-
<Radio label="Reason three" value="three" />
106+
<Radio name="reason" label="Reason one" value="one" />
107+
<Radio name="reason" label="Reason two" value="two" />
108+
<Radio name="reason" label="Reason three" value="three" />
110109
</ChoiceGroup>
111110
),
112111

@@ -153,7 +152,7 @@ export const RenderProp: Story = {
153152
}}
154153
>
155154
<Item>
156-
<Radio label={`Option ${index}`} value={index} />
155+
<Radio name="reason" label={`Option ${index}`} value={index} />
157156
</Item>
158157
</div>
159158
)}
@@ -176,9 +175,9 @@ export const RenderProp: Story = {
176175
export const Playground: Story = {
177176
render: args => (
178177
<ChoiceGroup {...args}>
179-
<Radio label="Reason one" value="one" />
180-
<Radio label="Reason two" value="two" />
181-
<Radio label="Reason three" value="three" />
178+
<Radio name="reason" label="Reason one" value="one" />
179+
<Radio name="reason" label="Reason two" value="two" />
180+
<Radio name="reason" label="Reason three" value="three" />
182181
</ChoiceGroup>
183182
),
184183

@@ -191,9 +190,9 @@ export const Rtl: Story = {
191190
render: args => (
192191
<RenderInRtl>
193192
<ChoiceGroup {...args}>
194-
<Radio label="Reason one" value="one" />
195-
<Radio label="Reason two" value="two" />
196-
<Radio label="Reason three" value="three" />
193+
<Radio name="reason" label="Reason one" value="one" />
194+
<Radio name="reason" label="Reason two" value="two" />
195+
<Radio name="reason" label="Reason three" value="three" />
197196
</ChoiceGroup>
198197
</RenderInRtl>
199198
),

‎packages/orbit-components/src/ChoiceGroup/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Table below contains all types of the props available in the ChoiceGroup compone
2828
| **children** | `React.Node ` | `(args) => React.Node` | The content of the ChoiceGroup, normally **Radio** or **Checkbox**. Pass a function for advanced usage, see "Render prop" in Storybook for an example. |
2929
| error | `Translation` | | The error to display beneath the ChoiceGroup. Also, the Checkboxes/Radios will turn red when you pass some value. |
3030
| label | `Translation` | | Heading text of the ChoiceGroup |
31-
| labelAs | [`enum`](#enum) | `"h4"` | The element used to render the label into. |
31+
| labelAs | [`enum`](#enum) | `"div"` | The element used to render the label into. |
3232
| labelSize | [`enum`](#enum) | `"normal"` | The size type of Heading. |
3333
| **onChange** | `event => void \| Promise` | | Function for handling onChange event. [See Functional specs](#functional-specs) |
3434
| filter | `boolean` | `false` | Changes visual appearance of child components, to contain background on hover and updates padding. |

‎packages/orbit-components/src/ChoiceGroup/index.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import cx from "clsx";
66
import Heading from "../Heading";
77
import type { Type } from "../Heading/types";
88
import Stack from "../Stack";
9-
import { LABEL_SIZES, LABEL_ELEMENTS } from "./consts";
9+
import { LABEL_SIZES } from "./consts";
1010
import Feedback from "./components/Feedback";
1111
import FilterWrapper from "./components/FilterWrapper";
1212
import useRandomId from "../hooks/useRandomId";
@@ -45,7 +45,7 @@ const ChoiceGroup = React.forwardRef<HTMLDivElement, Props>(
4545
id,
4646
label,
4747
labelSize = LABEL_SIZES.NORMAL,
48-
labelAs = LABEL_ELEMENTS.H4,
48+
labelAs = "div",
4949
error,
5050
children,
5151
filter,
@@ -82,14 +82,18 @@ const ChoiceGroup = React.forwardRef<HTMLDivElement, Props>(
8282
)}
8383
>
8484
{label && (
85-
<Heading id={groupID} type={getHeadingSize(labelSize)} as={labelAs} spaceAfter="medium">
85+
<Heading
86+
id={groupID}
87+
type={getHeadingSize(labelSize)}
88+
as={labelAs}
89+
role={undefined}
90+
spaceAfter="medium"
91+
>
8692
{label}
8793
</Heading>
8894
)}
8995
{typeof children === "function" ? (
9096
children({
91-
// for now a plain <div> is all we need, but we're reserving this space in the API
92-
// in case we'll need something more in the future
9397
Container: "div",
9498
Item: ItemContainer({ filter, onOnlySelection, onlySelectionText, itemProps }),
9599
spacing: filter ? "0px" : theme.orbit.space200,

‎packages/orbit-components/src/ChoiceGroup/types.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type * as React from "react";
66
import type * as Common from "../common/types";
77

88
export type Size = "normal" | "large";
9-
type Element = "h2" | "h3" | "h4" | "h5" | "h6";
9+
type Element = "h2" | "h3" | "h4" | "h5" | "h6" | "div";
1010

1111
export interface Props extends Common.Globals {
1212
readonly children:

0 commit comments

Comments
 (0)