Skip to content

Commit 0784c3d

Browse files
authored
docs: fix broken links and styling (#8292)
* update RAC complex-items links to be text-slots * RAC Combobox: fix button wrapping to new line on small screens
1 parent bed1793 commit 0784c3d

File tree

3 files changed

+10
-3
lines changed

3 files changed

+10
-3
lines changed

packages/react-aria-components/docs/ComboBox.mdx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,11 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
8787
.react-aria-ComboBox {
8888
color: var(--text-color);
8989

90+
> div:has(.react-aria-Input) {
91+
display: flex;
92+
align-items: center;
93+
}
94+
9095
.react-aria-Input {
9196
margin: 0;
9297
font-size: 1.072rem;
@@ -97,6 +102,7 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
97102
padding: 0.286rem 2rem 0.286rem 0.571rem;
98103
vertical-align: middle;
99104
outline: none;
105+
min-width: 0;
100106

101107
&[data-focused] {
102108
outline: 2px solid var(--focus-ring-color);
@@ -116,6 +122,7 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
116122
padding: 0;
117123
font-size: 0.857rem;
118124
cursor: default;
125+
flex-shrink: 0;
119126

120127
&[data-pressed] {
121128
box-shadow: none;
@@ -1277,7 +1284,7 @@ A `ListBoxItem` can be targeted with the `.react-aria-ListBoxItem` CSS selector,
12771284

12781285
<StateTable properties={docs.exports.ListBoxItemRenderProps.properties} />
12791286

1280-
Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#complex-items) for an example.
1287+
Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [text slots](#text-slots) for an example.
12811288

12821289
Note that items may not contain interactive children such as buttons, as screen readers will not be able to access them.
12831290

packages/react-aria-components/docs/Menu.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1109,7 +1109,7 @@ A `MenuItem` can be targeted with the `.react-aria-MenuItem` CSS selector, or by
11091109

11101110
<StateTable properties={docs.exports.MenuItemRenderProps.properties} />
11111111

1112-
MenuItems also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#complex-items) for an example.
1112+
MenuItems also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [text slots](#text-slots) for an example.
11131113

11141114
Note that items may not contain interactive children such as buttons, as screen readers will not be able to access them.
11151115

packages/react-aria-components/docs/Select.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1062,7 +1062,7 @@ A `ListBoxItem` can be targeted with the `.react-aria-ListBoxItem` CSS selector,
10621062

10631063
<StateTable properties={docs.exports.ListBoxItemRenderProps.properties} />
10641064

1065-
Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#complex-items) for an example.
1065+
Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [text slots](#text-slots) for an example.
10661066

10671067
Note that items may not contain interactive children such as buttons, as screen readers will not be able to access them.
10681068

0 commit comments

Comments
 (0)