Skip to content

Commit a75a6de

Browse files
jiveyjivey
committed
update selected border styles
1 parent d515956 commit a75a6de

File tree

5 files changed

+24
-21
lines changed

5 files changed

+24
-21
lines changed

‎src/components/Tabs.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const buttonBarItemCss = css`
5858
5959
&[data-selected=true] {
6060
background: ${colors.palette.neutralLight};
61+
box-shadow: inset 0 0 0 0.1rem ${colors.palette.pale};
6162
}
6263
&:hover:not([data-selected=true]) {
6364
background: ${colors.palette.neutralLighter};

‎src/components/ToggleButtonGroup/styles.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export const StyledToggleButton = styled(ToggleButton)`
2525
2626
&[data-selected] {
2727
background-color: ${colors.palette.neutralLighter};
28+
// achieve a 2px border effect without disrupting layout
29+
box-shadow: inset 0 0 0 0.1rem ${colors.palette.pale};
2830
}
2931
3032
&[data-disabled] {

‎src/components/__snapshots__/ButtonBar.spec.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`ButtonBar renders 1`] = `
44
<DocumentFragment>
55
<div
6-
class="sc-gsnTZi bqPtVr"
6+
class="sc-gsnTZi hYiJLm"
77
>
88
<a>
99
One
@@ -18,7 +18,7 @@ exports[`ButtonBar renders 1`] = `
1818
exports[`ButtonBar renders large size 1`] = `
1919
<DocumentFragment>
2020
<div
21-
class="sc-gsnTZi eOLdKk"
21+
class="sc-gsnTZi hZAvUF"
2222
>
2323
<button>
2424
One
@@ -35,7 +35,7 @@ exports[`ButtonBar renders large size 1`] = `
3535
exports[`ButtonBar renders small size 1`] = `
3636
<DocumentFragment>
3737
<div
38-
class="sc-gsnTZi fgJhCT"
38+
class="sc-gsnTZi gFPpQi"
3939
>
4040
<button>
4141
One

‎src/components/__snapshots__/Tabs.spec.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Tabs component button-bar styling renders 1`] = `
66
data-react-aria-hidden="true"
77
/>
88
<div
9-
class="sc-bczRLJ kWkDUg"
9+
class="sc-bczRLJ iBDygX"
1010
data-orientation="horizontal"
1111
data-rac=""
1212
>
@@ -82,7 +82,7 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
8282
data-react-aria-hidden="true"
8383
/>
8484
<div
85-
class="sc-bczRLJ kTnZrf"
85+
class="sc-bczRLJ feXGds"
8686
data-orientation="horizontal"
8787
data-rac=""
8888
>
@@ -158,7 +158,7 @@ exports[`Tabs component button-bar styling renders small size 1`] = `
158158
data-react-aria-hidden="true"
159159
/>
160160
<div
161-
class="sc-bczRLJ kFnuyo"
161+
class="sc-bczRLJ kAIoyP"
162162
data-orientation="horizontal"
163163
data-rac=""
164164
>

‎src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
1313
>
1414
<button
1515
aria-pressed={true}
16-
className="sc-dkzDqf ivRDBW"
16+
className="sc-dkzDqf kCUTAu"
1717
data-button-id="red"
1818
data-rac=""
1919
data-react-aria-pressable={true}
@@ -39,7 +39,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
3939
</button>
4040
<button
4141
aria-pressed={false}
42-
className="sc-dkzDqf ivRDBW"
42+
className="sc-dkzDqf kCUTAu"
4343
data-button-id="green"
4444
data-rac=""
4545
data-react-aria-pressable={true}
@@ -64,7 +64,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
6464
</button>
6565
<button
6666
aria-pressed={false}
67-
className="sc-dkzDqf ivRDBW"
67+
className="sc-dkzDqf kCUTAu"
6868
data-button-id="blue"
6969
data-rac=""
7070
data-react-aria-pressable={true}
@@ -89,7 +89,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
8989
</button>
9090
<button
9191
aria-pressed={false}
92-
className="sc-dkzDqf ivRDBW"
92+
className="sc-dkzDqf kCUTAu"
9393
data-button-id="yellow"
9494
data-rac=""
9595
data-react-aria-pressable={true}
@@ -114,7 +114,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
114114
</button>
115115
<button
116116
aria-pressed={false}
117-
className="sc-dkzDqf ivRDBW"
117+
className="sc-dkzDqf kCUTAu"
118118
data-button-id="orange"
119119
data-rac=""
120120
data-react-aria-pressable={true}
@@ -153,7 +153,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
153153
>
154154
<button
155155
aria-checked={true}
156-
className="sc-dkzDqf ivRDBW"
156+
className="sc-dkzDqf kCUTAu"
157157
data-button-id="red"
158158
data-rac=""
159159
data-react-aria-pressable={true}
@@ -180,7 +180,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
180180
</button>
181181
<button
182182
aria-checked={false}
183-
className="sc-dkzDqf ivRDBW"
183+
className="sc-dkzDqf kCUTAu"
184184
data-button-id="green"
185185
data-rac=""
186186
data-react-aria-pressable={true}
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
206206
</button>
207207
<button
208208
aria-checked={false}
209-
className="sc-dkzDqf ivRDBW"
209+
className="sc-dkzDqf kCUTAu"
210210
data-button-id="blue"
211211
data-rac=""
212212
data-react-aria-pressable={true}
@@ -232,7 +232,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
232232
</button>
233233
<button
234234
aria-checked={false}
235-
className="sc-dkzDqf ivRDBW"
235+
className="sc-dkzDqf kCUTAu"
236236
data-button-id="yellow"
237237
data-rac=""
238238
data-react-aria-pressable={true}
@@ -258,7 +258,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
258258
</button>
259259
<button
260260
aria-checked={false}
261-
className="sc-dkzDqf ivRDBW"
261+
className="sc-dkzDqf kCUTAu"
262262
data-button-id="orange"
263263
data-rac=""
264264
data-react-aria-pressable={true}
@@ -298,7 +298,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
298298
>
299299
<button
300300
aria-checked={true}
301-
className="sc-dkzDqf ivRDBW"
301+
className="sc-dkzDqf kCUTAu"
302302
data-button-id="red"
303303
data-rac=""
304304
data-react-aria-pressable={true}
@@ -325,7 +325,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
325325
</button>
326326
<button
327327
aria-checked={false}
328-
className="sc-dkzDqf ivRDBW"
328+
className="sc-dkzDqf kCUTAu"
329329
data-button-id="green"
330330
data-rac=""
331331
data-react-aria-pressable={true}
@@ -351,7 +351,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
351351
</button>
352352
<button
353353
aria-checked={false}
354-
className="sc-dkzDqf ivRDBW"
354+
className="sc-dkzDqf kCUTAu"
355355
data-button-id="blue"
356356
data-rac=""
357357
data-react-aria-pressable={true}
@@ -377,7 +377,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
377377
</button>
378378
<button
379379
aria-checked={false}
380-
className="sc-dkzDqf ivRDBW"
380+
className="sc-dkzDqf kCUTAu"
381381
data-button-id="yellow"
382382
data-rac=""
383383
data-react-aria-pressable={true}
@@ -403,7 +403,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
403403
</button>
404404
<button
405405
aria-checked={false}
406-
className="sc-dkzDqf ivRDBW"
406+
className="sc-dkzDqf kCUTAu"
407407
data-button-id="orange"
408408
data-rac=""
409409
data-react-aria-pressable={true}

0 commit comments

Comments
 (0)