fix: use display: inline-block on Button

bylapidist · Aug 28, 2022 · 725dc74 · 725dc74
1 parent c65cf85
commit 725dc74
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 29 deletions.
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -4,10 +4,7 @@ exports[`it works 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -70,10 +67,7 @@ exports[`it works with anchor 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -137,10 +131,7 @@ exports[`it works with icon 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -219,10 +210,7 @@ exports[`it works with loading 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -362,10 +350,7 @@ exports[`it works with size large 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -429,10 +414,7 @@ exports[`it works with size medium 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;
@@ -496,10 +478,7 @@ exports[`it works with size small 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   font-size: 1rem;
   font-weight: 500;

diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
@@ -92,7 +92,7 @@ const buttonVariants = ({
 };
 
 const buttonBaseStyles: Styles = {
-    display: 'inline-flex',
+    display: 'inline-block',
     position: 'relative',
     borderWidth: '1',
     boxShadow: '1',