feat: improve Spinner styles (#1214)

* fix: set Text default element to p tag * feat: improve Spinner styles
bylapidist · Sep 29, 2022 · e275927 · e275927
1 parent 30768c3
commit e275927
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 63 deletions.
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -418,6 +418,8 @@ exports[`it works with loading 1`] = `
   display: -ms-flexbox;
   display: flex;
   position: relative;
+  border-radius: 0.6rem;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -427,11 +429,11 @@ exports[`it works with loading 1`] = `
 
 .c5 {
   border-style: solid;
-  border-radius: 0.3rem;
+  border-radius: 0.6rem;
   border-width: 1px;
   width: 100%;
   height: 0.75rem;
-  background-color: white;
+  background-color: #fafafa;
   border-color: #d4d4d4;
 }
 
@@ -440,7 +442,7 @@ exports[`it works with loading 1`] = `
   top: -1px;
   left: 0;
   border-radius: 0.6rem;
-  width: 0.75rem;
+  width: 1.5rem;
   height: 0.75rem;
   background-color: #d4d4d4;
 }
@@ -454,12 +456,12 @@ exports[`it works with loading 1`] = `
   left: -50%;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
+  animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
 }
 
 <button

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -25,7 +25,6 @@ export interface ButtonProps {
     readonly kind: ButtonKind;
     readonly theme: Theme;
     readonly variant?: ButtonSize;
-    readonly ghost?: boolean;
     readonly loading?: boolean;
     readonly icon?: IconProp;
 }

diff --git a/src/components/list/__snapshots__/List.spec.tsx.snap b/src/components/list/__snapshots__/List.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`it works with elements 1`] = `
   list-style-position: inside;
 }
 
-<div
+<p
   class="c0"
 >
   <ul
@@ -35,7 +35,7 @@ exports[`it works with elements 1`] = `
       </p>
     </li>
   </ul>
-</div>
+</p>
 `;
 
 exports[`it works with ordered 1`] = `
@@ -52,7 +52,7 @@ exports[`it works with ordered 1`] = `
   list-style-position: inside;
 }
 
-<div
+<p
   class="c0"
 >
   <ol
@@ -69,7 +69,7 @@ exports[`it works with ordered 1`] = `
       world
     </li>
   </ol>
-</div>
+</p>
 `;
 
 exports[`it works with strings 1`] = `
@@ -86,7 +86,7 @@ exports[`it works with strings 1`] = `
   list-style-position: inside;
 }
 
-<div
+<p
   class="c0"
 >
   <ul
@@ -103,7 +103,7 @@ exports[`it works with strings 1`] = `
       world
     </li>
   </ul>
-</div>
+</p>
 `;
 
 exports[`it works with unordered 1`] = `
@@ -120,7 +120,7 @@ exports[`it works with unordered 1`] = `
   list-style-position: inside;
 }
 
-<div
+<p
   class="c0"
 >
   <ul
@@ -137,5 +137,5 @@ exports[`it works with unordered 1`] = `
       world
     </li>
   </ul>
-</div>
+</p>
 `;
diff --git a/src/components/panel/__snapshots__/Panel.spec.tsx.snap b/src/components/panel/__snapshots__/Panel.spec.tsx.snap
@@ -54,6 +54,8 @@ exports[`it works loading 1`] = `
   display: -ms-flexbox;
   display: flex;
   position: relative;
+  border-radius: 0.6rem;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -63,11 +65,11 @@ exports[`it works loading 1`] = `
 
 .c3 {
   border-style: solid;
-  border-radius: 0.3rem;
+  border-radius: 0.6rem;
   border-width: 1px;
   width: 100%;
   height: 0.75rem;
-  background-color: white;
+  background-color: #fafafa;
   border-color: #d4d4d4;
 }
 
@@ -76,7 +78,7 @@ exports[`it works loading 1`] = `
   top: -1px;
   left: 0;
   border-radius: 0.6rem;
-  width: 0.75rem;
+  width: 1.5rem;
   height: 0.75rem;
   background-color: #d4d4d4;
 }
@@ -90,12 +92,12 @@ exports[`it works loading 1`] = `
   left: -50%;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
+  animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
 }
 
 <div

diff --git a/src/components/spinner/__snapshots__/Spinner.spec.tsx.snap b/src/components/spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -8,6 +8,8 @@ exports[`it works 1`] = `
   display: -ms-flexbox;
   display: flex;
   position: relative;
+  border-radius: 0.6rem;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -17,11 +19,11 @@ exports[`it works 1`] = `
 
 .c1 {
   border-style: solid;
-  border-radius: 0.3rem;
+  border-radius: 0.6rem;
   border-width: 1px;
   width: 100%;
   height: 0.75rem;
-  background-color: white;
+  background-color: #fafafa;
   border-color: #d4d4d4;
 }
 
@@ -30,7 +32,7 @@ exports[`it works 1`] = `
   top: -1px;
   left: 0;
   border-radius: 0.6rem;
-  width: 0.75rem;
+  width: 1.5rem;
   height: 0.75rem;
   background-color: #d4d4d4;
 }
@@ -44,12 +46,12 @@ exports[`it works 1`] = `
   left: -50%;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
+  animation-timing-function: cubic-bezier(0.68,-0.9,0.32,1.9);
 }
 
 <div

diff --git a/src/components/spinner/animations/index.tsx b/src/components/spinner/animations/index.tsx
@@ -22,9 +22,9 @@ const pingPongAnimation = css`
     transform: translateX(50%);
     left: -50%;
     animation-iteration-count: infinite;
-    animation-duration: 0.4s;
+    animation-duration: 0.6s;
     animation-direction: alternate;
-    animation-timing-function: ease-in-out;
+    animation-timing-function: cubic-bezier(0.68, -0.9, 0.32, 1.9);
 `;
 
 export const pingPong = (): FlattenInterpolation<

diff --git a/src/components/spinner/styles.ts b/src/components/spinner/styles.ts
@@ -5,28 +5,29 @@ export const spinnerBoxStyles = (): Styles => ({
     position: 'relative',
     width: 'full',
     overflow: 'hidden',
-    alignItems: 'center'
+    alignItems: 'center',
+    borderRadius: '3',
+    boxShadow: '1'
 });
 
 export const spinnerInnerStyles = (): Styles => ({
     width: 'full',
     sizeHeight: '3',
     backgroundColor: {
-        group: 'base',
-        shade: 'light'
+        group: 'grey',
+        shade: 'lightest'
     },
     borderWidth: 'px',
     borderStyle: 'solid',
     borderColor: {
         group: 'grey',
         shade: 'light'
     },
-    borderRadius: '2'
+    borderRadius: '3'
 });
 
 export const spinnerPingPongStyles = (): Styles => ({
-    content: '',
-    sizeWidth: '3',
+    sizeWidth: '6',
     sizeHeight: '3',
     backgroundColor: {
         group: 'grey',

diff --git a/src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap b/src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap
@@ -56,10 +56,10 @@ exports[`it works 1`] = `
 <div
   class="c0"
 >
-  <div
+  <p
     class="c1"
   >
-    <div
+    <p
       class="c2"
     >
       <svg
@@ -77,9 +77,9 @@ exports[`it works 1`] = `
           fill="currentColor"
         />
       </svg>
-    </div>
+    </p>
     I am a status message
-  </div>
+  </p>
 </div>
 `;
 
@@ -139,10 +139,10 @@ exports[`it works with different variants 1`] = `
 <div
   class="c0"
 >
-  <div
+  <p
     class="c1"
   >
-    <div
+    <p
       class="c2"
     >
       <svg
@@ -160,9 +160,9 @@ exports[`it works with different variants 1`] = `
           fill="currentColor"
         />
       </svg>
-    </div>
+    </p>
     I am a status message
-  </div>
+  </p>
 </div>
 `;
 
@@ -222,10 +222,10 @@ exports[`it works with different variants 2`] = `
 <div
   class="c0"
 >
-  <div
+  <p
     class="c1"
   >
-    <div
+    <p
       class="c2"
     >
       <svg
@@ -243,9 +243,9 @@ exports[`it works with different variants 2`] = `
           fill="currentColor"
         />
       </svg>
-    </div>
+    </p>
     I am a status message
-  </div>
+  </p>
 </div>
 `;
 
@@ -305,10 +305,10 @@ exports[`it works with different variants 3`] = `
 <div
   class="c0"
 >
-  <div
+  <p
     class="c1"
   >
-    <div
+    <p
       class="c2"
     >
       <svg
@@ -326,9 +326,9 @@ exports[`it works with different variants 3`] = `
           fill="currentColor"
         />
       </svg>
-    </div>
+    </p>
     I am a status message
-  </div>
+  </p>
 </div>
 `;
 
@@ -388,10 +388,10 @@ exports[`it works with different variants 4`] = `
 <div
   class="c0"
 >
-  <div
+  <p
     class="c1"
   >
-    <div
+    <p
       class="c2"
     >
       <svg
@@ -409,8 +409,8 @@ exports[`it works with different variants 4`] = `
           fill="currentColor"
         />
       </svg>
-    </div>
+    </p>
     I am a status message
-  </div>
+  </p>
 </div>
 `;