fix: define correct large size of circular #progress

dnbexperience · May 20, 2019 · e9e6853 · e9e6853
1 parent 274f13a
commit e9e6853
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 25 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js
@@ -29,7 +29,7 @@ class Example extends PureComponent {
           `}
         </ComponentBox>
         <ComponentBox
-          caption="Progress with random progress value to show the the transition"
+          caption="Progress with random progress value to show the transition"
           noFragments={false}
         >
           {/* @jsx */ `

diff --git a/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap b/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap
@@ -101,6 +101,18 @@ exports[`Progress scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+.dnb-progress__circular--small {
+  width: 1rem;
+  height: 1rem; }
+
+.dnb-progress__circular--large {
+  width: 3.5rem;
+  height: 3.5rem; }
+
+.dnb-progress__circular--huge {
+  width: 20rem;
+  height: 20rem; }
+
 .dnb-progress__circular__line {
   animation-duration: 2s; }
 
@@ -183,15 +195,6 @@ exports[`Progress scss have to match snapshot 1`] = `
     width: 2rem;
     height: 2rem;
     transform: rotate(-90deg); }
-    .dnb-progress__circular--small {
-      width: 1rem;
-      height: 1rem; }
-    .dnb-progress__circular--large {
-      width: 4rem;
-      height: 4rem; }
-    .dnb-progress__circular--huge {
-      width: 20rem;
-      height: 20rem; }
     .dnb-progress__circular svg {
       position: absolute;
       width: 100%;

diff --git a/...t-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png b/...t-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png
diff --git a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
@@ -20,21 +20,6 @@
     width: 2rem;
     height: 2rem;
 
-    &--small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &--large {
-      width: 4rem;
-      height: 4rem;
-    }
-
-    &--huge {
-      width: 20rem;
-      height: 20rem;
-    }
-
     // since SVG is starting 90deg from top
     transform: rotate(-90deg);
 

diff --git a/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss b/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
@@ -16,6 +16,19 @@
 .dnb-progress {
   // circular variant
   &__circular {
+    &--small {
+      width: 1rem;
+      height: 1rem;
+    }
+    &--large {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+    &--huge {
+      width: 20rem;
+      height: 20rem;
+    }
+
     &__line {
       animation-duration: 2s;
     }