fix(core-spinner): use full width given a medium and lower view

Fixes the resizing of the child component when inline='true' and a mobile view port
telus · Aug 15, 2019 · dbaa31e · dbaa31e
1 parent 4a32978
commit dbaa31e
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 13 deletions.
diff --git a/packages/Spinner/Spinner.jsx b/packages/Spinner/Spinner.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { position } from '@tds/shared-styles'
+import { media } from '@tds/core-responsive'
 
 import { deprecate, warn } from '../../shared/utils/warn'
 import safeRest from '../../shared/utils/safeRest'
@@ -12,7 +13,12 @@ const zindexModalBackdrop = 1400
 
 const SpinnerContainer = styled.div(({ inline, fullScreen }) => ({
   ...position.relative,
-  ...(inline && { display: 'inline-block' }),
+  ...(inline && {
+    display: 'block',
+    ...media.from('md').css({
+      display: 'inline-block',
+    }),
+  }),
   ...(fullScreen && position.centerVertically),
 }))
 

diff --git a/packages/Spinner/__tests__/__snapshots__/Spinner.spec.jsx.snap b/packages/Spinner/__tests__/__snapshots__/Spinner.spec.jsx.snap
@@ -60,7 +60,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -74,6 +74,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <Spinner__SpinnerContainer
     aria-live="assertive"
     data-testid="container"
@@ -536,7 +542,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -550,6 +556,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <StyledComponent
     aria-live="assertive"
     data-testid="container"
@@ -1005,7 +1017,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -1019,6 +1031,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <div
     aria-live="assertive"
     className="c0"
@@ -2920,7 +2938,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -2934,6 +2952,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <Spinner__SpinnerContainer
     aria-live="assertive"
     data-testid="container"
@@ -3278,7 +3302,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -3292,6 +3316,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <StyledComponent
     aria-live="assertive"
     data-testid="container"
@@ -3629,7 +3659,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -3643,6 +3673,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <div
     aria-live="assertive"
     className="c0"
@@ -3955,7 +3991,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -3969,6 +4005,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <Spinner__SpinnerContainer
     aria-live="assertive"
     data-testid="container"
@@ -4313,7 +4355,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -4327,6 +4369,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <StyledComponent
     aria-live="assertive"
     data-testid="container"
@@ -4664,7 +4712,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c4 {
@@ -4678,6 +4726,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <div
     aria-live="assertive"
     className="c0"
@@ -5014,7 +5068,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -5028,6 +5082,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <Spinner__SpinnerContainer
     aria-live="assertive"
     data-testid="container"
@@ -5490,7 +5550,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -5504,6 +5564,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <StyledComponent
     aria-live="assertive"
     data-testid="container"
@@ -5959,7 +6025,7 @@ Array [
 
 .c0 {
   position: relative;
-  display: inline-block;
+  display: block;
 }
 
 .c6 {
@@ -5973,6 +6039,12 @@ Array [
   opacity: 0.06;
 }
 
+@media (min-width:768px) {
+  .c0 {
+    display: inline-block;
+  }
+}
+
 <div
     aria-live="assertive"
     className="c0"

diff --git a/packages/Spinner/package.json b/packages/Spinner/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@tds/core-colours": "^2.1.0",
+    "@tds/core-responsive": "^1.3.0",
     "@tds/core-text": "^2.0.2",
     "@tds/shared-styles": "^1.4.2",
     "prop-types": "^15.5.10"