Skip to content

Commit 7d12c66

Browse files
devongovettdevongovett
authored
A few more RAC docs CSS simplifications (#5353)
1 parent 2e59636 commit 7d12c66

19 files changed

+456
-417
lines changed

‎packages/react-aria-components/docs/Breadcrumbs.mdx

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -70,40 +70,40 @@ import {Breadcrumbs, Breadcrumb, Link} from 'react-aria-components';
7070
alt: ' ';
7171
padding: 0 5px;
7272
}
73-
}
74-
75-
.react-aria-Link {
76-
--focus-ring-color: slateblue;
77-
--text-color: var(--spectrum-global-color-gray-800);
78-
--text-color-current: var(--spectrum-global-color-gray-900);
79-
--text-color-disabled: gray;
80-
81-
color: var(--text-color);
82-
outline: none;
83-
position: relative;
84-
text-decoration: none;
85-
cursor: pointer;
8673

87-
&[data-hovered] {
88-
text-decoration: underline;
89-
}
74+
.react-aria-Link {
75+
--focus-ring-color: slateblue;
76+
--text-color: var(--spectrum-global-color-gray-800);
77+
--text-color-current: var(--spectrum-global-color-gray-900);
78+
--text-color-disabled: gray;
79+
80+
color: var(--text-color);
81+
outline: none;
82+
position: relative;
83+
text-decoration: none;
84+
cursor: pointer;
85+
86+
&[data-hovered] {
87+
text-decoration: underline;
88+
}
9089

91-
&[data-current] {
92-
color: var(--text-color-current);
93-
font-weight: bold;
94-
}
90+
&[data-current] {
91+
color: var(--text-color-current);
92+
font-weight: bold;
93+
}
9594

96-
&[data-focus-visible]:after {
97-
content: '';
98-
position: absolute;
99-
inset: -2px -4px;
100-
border-radius: 6px;
101-
border: 2px solid var(--focus-ring-color);
95+
&[data-focus-visible]:after {
96+
content: '';
97+
position: absolute;
98+
inset: -2px -4px;
99+
border-radius: 6px;
100+
border: 2px solid var(--focus-ring-color);
101+
}
102102
}
103103
}
104104

105105
@media (forced-colors: active) {
106-
.react-aria-Link {
106+
.react-aria-Breadcrumbs .react-aria-Link {
107107
--focus-ring-color: Highlight;
108108
--text-color: LinkText;
109109
--text-color-current: CanvasText;

‎packages/react-aria-components/docs/Calendar.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-
7676
max-width: 100%;
7777
color: var(--text-color);
7878

79-
& header {
79+
header {
8080
display: flex;
8181
align-items: center;
8282
margin: 0 4px .5rem 4px;

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

Lines changed: 48 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -100,73 +100,64 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
100100
}
101101
}
102102

103-
.react-aria-Button {
104-
background: slateblue;
105-
color: white;
106-
border-radius: 4px;
107-
border: none;
108-
margin-left: -1.714rem;
109-
width: 1.429rem;
110-
height: 1.429rem;
111-
padding: 0;
112-
font-size: 0.857rem;
113-
}
103+
.react-aria-Button {
104+
background: slateblue;
105+
color: white;
106+
border-radius: 4px;
107+
border: none;
108+
margin-left: -1.714rem;
109+
width: 1.429rem;
110+
height: 1.429rem;
111+
padding: 0;
112+
font-size: 0.857rem;
114113
}
114+
}
115115

116-
@layer listbox {
117-
.react-aria-ListBox {
118-
display: block;
119-
width: unset;
120-
max-height: inherit;
121-
min-height: unset;
122-
border: none;
116+
@layer popover {
117+
.react-aria-Popover {
118+
width: var(--trigger-width);
119+
}
120+
}
123121

124-
.react-aria-ListBoxItem {
125-
padding: 0.286rem 0.571rem 0.286rem 1.571rem;
122+
@layer listbox {
123+
.react-aria-ListBox {
124+
display: block;
125+
width: unset;
126+
max-height: inherit;
127+
min-height: unset;
128+
border: none;
129+
}
126130

127-
&[data-focus-visible] {
128-
box-shadow: unset;
129-
}
131+
.react-aria-ListBoxItem {
132+
padding: 0.286rem 0.571rem 0.286rem 1.571rem;
130133

131-
&[data-selected] {
132-
font-weight: 600;
133-
background: unset;
134-
color: var(--text-color);
135-
136-
&::before {
137-
content: '✓';
138-
content: '✓' / '';
139-
alt: ' ';
140-
position: absolute;
141-
top: 4px;
142-
left: 4px;
143-
}
144-
}
134+
&[data-focus-visible] {
135+
box-shadow: unset;
136+
}
145137

146-
&[data-focused],
147-
&[data-pressed] {
148-
background: var(--highlight-background);
149-
color: var(--highlight-foreground);
138+
&[data-selected] {
139+
font-weight: 600;
140+
background: unset;
141+
color: var(--text-color);
142+
143+
&::before {
144+
content: '✓';
145+
content: '✓' / '';
146+
alt: ' ';
147+
position: absolute;
148+
top: 4px;
149+
left: 4px;
150150
}
151-
}
152-
}
153-
}
154151

155-
@layer popover {
156-
.react-aria-Popover {
157-
padding: 0px;
158-
margin-top: 0px;
159-
min-width: var(--trigger-width);
160-
box-sizing: border-box;
161-
162-
&[data-placement=top] {
163-
margin-bottom: unset;
164-
--origin: translateY(8px);
152+
&[data-focus-visible] {
153+
box-shadow: unset;
154+
}
165155
}
166156

167-
&[data-placement=bottom] {
168-
margin-top: unset;
169-
--origin: translateY(-8px);
157+
&[data-focused],
158+
&[data-pressed] {
159+
background: var(--highlight-background);
160+
color: var(--highlight-foreground);
170161
}
171162
}
172163
}

‎packages/react-aria-components/docs/DatePicker.mdx

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -108,36 +108,28 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
108108
color: white;
109109
border-radius: 4px;
110110
border: none;
111-
appearance: none;
112111
margin-left: -1.929rem;
113112
width: 1.429rem;
114113
height: 1.429rem;
115114
padding: 0;
116-
vertical-align: middle;
117115
font-size: 0.857rem;
118-
outline: none;
119116
box-sizing: content-box;
120117
border: 2px solid var(--page-background);
121118

122119
&[data-focus-visible] {
123120
box-shadow: 0 0 0 2px slateblue;
124121
}
125122
}
126-
}
127123

128-
.react-aria-DateInput {
129-
display: flex;
130-
padding: 4px 2.5rem 4px 8px;
131-
border: 1px solid var(--field-border);
132-
border-radius: 6px;
133-
background: var(--field-background);
134-
width: fit-content;
135-
min-width: 150px;
136-
white-space: nowrap;
124+
.react-aria-DateInput {
125+
padding: 4px 2.5rem 4px 8px;
126+
}
127+
}
137128

138-
&[data-focus-within] {
139-
border-color: var(--highlight-background);
140-
box-shadow: 0 0 0 1px var(--highlight-background);
129+
@layer popover {
130+
.react-aria-Popover {
131+
max-width: unset;
132+
padding: 1.25rem;
141133
}
142134
}
143135

‎packages/react-aria-components/docs/DateRangePicker.mdx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -137,14 +137,11 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
137137
color: white;
138138
border-radius: 4px;
139139
border: none;
140-
appearance: none;
141140
margin-left: auto;
142141
width: 1.429rem;
143142
height: 1.429rem;
144143
padding: 0;
145-
vertical-align: middle;
146144
font-size: 0.857rem;
147-
outline: none;
148145
box-sizing: content-box;
149146
flex-shrink: 0;
150147
border: 2px solid var(--page-background);
@@ -155,15 +152,21 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
155152
box-shadow: 0 0 0 2px slateblue;
156153
}
157154
}
155+
156+
.react-aria-DateInput {
157+
width: unset;
158+
min-width: unset;
159+
padding: unset;
160+
border: unset;
161+
box-shadow: unset;
162+
}
158163
}
159164

160-
.react-aria-DateInput {
161-
display: flex;
162-
width: unset;
163-
min-width: unset;
164-
padding: unset;
165-
border: unset;
166-
box-shadow: unset;
165+
@layer popover {
166+
.react-aria-Popover {
167+
max-width: unset;
168+
padding: 1.25rem;
169+
}
167170
}
168171

169172
@media (forced-colors: active) {

‎packages/react-aria-components/docs/Dialog.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
8282
```css
8383
.react-aria-Dialog {
8484
outline: none;
85+
padding: 30px;
8586

8687
.react-aria-Heading {
8788
line-height: 1em;

‎packages/react-aria-components/docs/GridList.mdx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,6 @@ import {GridList, GridListItem, Button} from 'react-aria-components';
105105
min-height: 100px;
106106
box-sizing: border-box;
107107

108-
&[data-empty] {
109-
align-items: center;
110-
justify-content: center;
111-
font-style: italic;
112-
}
113-
114108
&[data-focus-visible] {
115109
border-color: var(--highlight-background);
116110
box-shadow: 0 0 0 1px var(--highlight-background);
@@ -161,6 +155,7 @@ import {GridList, GridListItem, Button} from 'react-aria-components';
161155
.react-aria-Button:not([slot]) {
162156
margin-left: auto;
163157
}
158+
164159
.react-aria-Button {
165160
background: transparent;
166161
border: none;
@@ -215,6 +210,7 @@ import {GridList, GridListItem, Button} from 'react-aria-components';
215210
}
216211
}
217212
}
213+
218214
:where(.react-aria-GridListItem) .react-aria-Checkbox {
219215
--selected-color: white;
220216
--selected-color-pressed: #ddd;
@@ -694,6 +690,21 @@ Use the `renderEmptyState` prop to customize what the `GridList` will display if
694690
</GridList>
695691
```
696692

693+
<details>
694+
<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
695+
696+
```css
697+
.react-aria-GridList {
698+
&[data-empty] {
699+
align-items: center;
700+
justify-content: center;
701+
font-style: italic;
702+
}
703+
}
704+
```
705+
706+
</details>
707+
697708
## Drag and drop
698709

699710
GridList supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the <TypeLink links={docs.links} type={docs.exports.useDragAndDrop} /> hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items.

‎packages/react-aria-components/docs/Group.mdx

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ import {TextField, Label, Group, Input, Button} from 'react-aria-components';
5252
<details>
5353
<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
5454

55+
```css hidden
56+
@import './Button.mdx' layer(button);
57+
```
58+
5559
```css
5660
.react-aria-Group {
5761
--field-border: var(--spectrum-alias-border-color);
@@ -102,41 +106,6 @@ import {TextField, Label, Group, Input, Button} from 'react-aria-components';
102106
}
103107
}
104108

105-
.react-aria-Button {
106-
--border-color: var(--spectrum-alias-border-color);
107-
--border-color-pressed: var(--spectrum-alias-border-color-down);
108-
--border-color-disabled: var(--spectrum-alias-border-color-disabled);
109-
--background-color: var(--spectrum-global-color-gray-50);
110-
--background-color-pressed: var(--spectrum-global-color-gray-100);
111-
--text-color: var(--spectrum-alias-text-color);
112-
--text-color-disabled: var(--spectrum-alias-text-color-disabled);
113-
--focus-ring-color: slateblue;
114-
115-
color: var(--text-color);
116-
background: var(--background-color);
117-
border: 1px solid var(--border-color);
118-
border-radius: 4px;
119-
appearance: none;
120-
vertical-align: middle;
121-
font-size: 1rem;
122-
text-align: center;
123-
margin: 0;
124-
outline: none;
125-
padding: 6px 10px;
126-
text-decoration: none;
127-
128-
&[data-pressed] {
129-
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
130-
background: var(--background-color-pressed);
131-
border-color: var(--border-color-pressed);
132-
}
133-
134-
&[data-focus-visible] {
135-
border-color: var(--focus-ring-color);
136-
box-shadow: 0 0 0 1px var(--focus-ring-color);
137-
}
138-
}
139-
140109
@media (forced-colors: active) {
141110
.react-aria-TextField {
142111
--field-border: ButtonBorder;

0 commit comments

Comments
 (0)