style(buttonicon): add onFocus highlight border (#319)

chanzuckerberg · Feb 21, 2023 · b54990a · b54990a
1 parent 390fe98
commit b54990a
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
           >