From b54990a8765a7c55678b4c0fc60080a203739696 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 21 Feb 2023 17:03:17 -0500
Subject: [PATCH] style(buttonicon): add onFocus highlight border (#319)
---
.../Banner/__snapshots__/banner.test.tsx.snap | 8 ++---
.../__snapshots__/index.test.tsx.snap | 2 +-
src/core/ButtonIcon/style.ts | 5 +++
.../__snapshots__/index.test.tsx.snap | 4 +--
.../Dialog/__snapshots__/index.test.tsx.snap | 8 ++---
.../__snapshots__/index.test.tsx.snap | 34 +++++++++----------
.../__snapshots__/index.test.tsx.snap | 6 ++--
7 files changed, 36 insertions(+), 31 deletions(-)
diff --git a/src/core/Banner/__snapshots__/banner.test.tsx.snap b/src/core/Banner/__snapshots__/banner.test.tsx.snap
index 4a0e36e30..9c22fda8b 100644
--- a/src/core/Banner/__snapshots__/banner.test.tsx.snap
+++ b/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
</div>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -97,7 +97,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
</div>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-quxuam-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-18h951f-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -152,7 +152,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
</div>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -208,7 +208,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
</div>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap b/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
index b714b37aa..bf33c7e34 100644
--- a/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
+++ b/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`<ButtonIcon /> Test story renders snapshot 1`] = `
<button
aria-label="dotsHorizontal"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-w1by74-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-4l34x5-MuiButtonBase-root-MuiIconButton-root"
data-testid="iconButton"
tabindex="0"
type="button"
diff --git a/src/core/ButtonIcon/style.ts b/src/core/ButtonIcon/style.ts
index 3cabc6afd..93f60bf2b 100644
--- a/src/core/ButtonIcon/style.ts
+++ b/src/core/ButtonIcon/style.ts
@@ -172,6 +172,11 @@ export const StyledButtonIcon = styled(IconButton, {
})`
padding: 0;
+ :focus {
+ outline: 5px auto Highlight;
+ outline: 5px auto -webkit-focus-ring-color;
+ }
+
${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
props: ButtonIconExtraProps<ButtonIconSize>
) => {
diff --git a/src/core/CellHeader/__snapshots__/index.test.tsx.snap b/src/core/CellHeader/__snapshots__/index.test.tsx.snap
index b3bfb5cdd..f826ff0c1 100644
--- a/src/core/CellHeader/__snapshots__/index.test.tsx.snap
+++ b/src/core/CellHeader/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<CellHeader /> Ascending story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from ascending to descending"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-xhp77i-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-8uz3p0-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -62,7 +62,7 @@ exports[`<CellHeader /> Test story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from descending to ascending"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1c9gy53-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-uq52cw-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/core/Dialog/__snapshots__/index.test.tsx.snap b/src/core/Dialog/__snapshots__/index.test.tsx.snap
index 56ea62c2f..cd334e9c3 100644
--- a/src/core/Dialog/__snapshots__/index.test.tsx.snap
+++ b/src/core/Dialog/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f83sro-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1pznqzi-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -88,7 +88,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-100qpau-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-11j1e9v-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -168,7 +168,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-dw2tn7-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1y75vf0-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -248,7 +248,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
>
<button
aria-label="Close"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-dw2tn7-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1y75vf0-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/core/Pagination/__snapshots__/index.test.tsx.snap b/src/core/Pagination/__snapshots__/index.test.tsx.snap
index 75d7727d9..23d5e30ef 100644
--- a/src/core/Pagination/__snapshots__/index.test.tsx.snap
+++ b/src/core/Pagination/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
tabindex="0"
type="button"
@@ -65,7 +65,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
@@ -99,7 +99,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-gqnerr-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-2pawhs-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
disabled=""
tabindex="-1"
@@ -151,7 +151,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
@@ -185,7 +185,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
tabindex="0"
type="button"
@@ -219,7 +219,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Go to a page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1p588kw-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1mowwm2-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -272,7 +272,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
@@ -306,7 +306,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
tabindex="0"
type="button"
@@ -360,7 +360,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Go to a page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1p588kw-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1mowwm2-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -393,7 +393,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
@@ -427,7 +427,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
tabindex="0"
type="button"
@@ -461,7 +461,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Go to a page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1p588kw-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1mowwm2-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -504,7 +504,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Go to a page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1p588kw-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1mowwm2-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -537,7 +537,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
@@ -571,7 +571,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Previous page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="first"
tabindex="0"
type="button"
@@ -605,7 +605,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Go to a page"
- class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-yjj55h-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-5wqsi6-MuiButtonBase-root-MuiIconButton-root"
disabled=""
tabindex="-1"
type="button"
@@ -656,7 +656,7 @@ exports[`<Pagination /> Test story renders snapshot 1`] = `
>
<button
aria-label="Next page"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-lriot2-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-16k5j8f-MuiButtonBase-root-MuiIconButton-root"
data-order="last"
tabindex="0"
type="button"
diff --git a/src/core/TableHeader/__snapshots__/index.test.tsx.snap b/src/core/TableHeader/__snapshots__/index.test.tsx.snap
index d7b024502..233ea0103 100644
--- a/src/core/TableHeader/__snapshots__/index.test.tsx.snap
+++ b/src/core/TableHeader/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<TableHeader /> Test story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from descending to ascending"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1c9gy53-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-uq52cw-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -55,7 +55,7 @@ exports[`<TableHeader /> Test story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from descending to ascending"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-xhp77i-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-8uz3p0-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -90,7 +90,7 @@ exports[`<TableHeader /> Test story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from descending to ascending"
- class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-xhp77i-MuiButtonBase-root-MuiIconButton-root"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-8uz3p0-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>