fix: change the naming of status indicator classes to follow BEM (#2204)

* changing the BEM to the status indicator changing the BEM to the status indicator and adding link css * BEM change to the css classes and adding testing storyshots [ci visual] BEM change to the css classes and adding testing storyshots * updating the BEM and test cases [ci visual] updating the BEM and test cases [ci visual] * some minor changes * [ci visual] Co-authored-by: InnaAtanasova <i.atanasova@sap.com>
SAP · Mar 22, 2021 · 94f3bb1 · 94f3bb1
1 parent 0f488df
commit 94f3bb1
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 92 deletions.
diff --git a/src/status-indicator.scss b/src/status-indicator.scss
@@ -22,6 +22,8 @@ $color-states: (
   $fd-status-indicator-default-color-stroke-width: 0.25 !default;
   $fd-status-indicator-default-color-fill: transparent !default;
   $fd-status-indicator-default-color: var(--sapContent_LabelColor) !default;
+  $fd-status-indicator-default-font-size: var(--sapFontSmallSize, 0.75rem);
+  $fd-status-indicator-default-margin: 0.375rem !default;
 
   font-family: var(--sapFontFamily);
   border-color: var(--sapContent_ForegroundBorderColor);
@@ -33,40 +35,50 @@ $color-states: (
   flex-direction: column;
   align-items: center;
 
-  &:focus {
-    outline: 1px dotted #000;
-    outline-offset: 1px;
+  @include fd-focus() {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    outline-offset: var(--sapContent_FocusWidth);
   }
 
   @include fd-reset();
 
-  &--htext {
+  &--horizontal-label {
     @include fd-reset();
 
     flex-direction: unset;
   }
 
+  &--link {
+    cursor: pointer;
+  }
+
+  &__label {
+    font-size: $fd-status-indicator-default-font-size;
+    margin: $fd-status-indicator-default-margin;
+
+    // sizes
+    @each $set-name, $size-set in $fd-status-indicator-sizes {
+      &--#{$set-name} {
+        font-size: map-get($size-set, 'font-size');
+        margin: map-get($size-set, 'margin');
+      }
+    }
+  }
+
   @each $set-name, $color-set in $color-states {
     &--#{$set-name} {
       fill: map_get($color-set, "color");
-    }
-
-    &--#{$set-name}__text {
       color: map_get($color-set, "color");
     }
   }
 
   // sizes
   @each $set-name, $size-set in $fd-status-indicator-sizes {
     &--#{$set-name} {
-      @include fd-reset-spacing();
-
-      width: map-get($size-set, 'width');
-      height: map-get($size-set, 'height');
-    }
-    &--#{$set-name}__text {
-      font-size: map-get($size-set, 'font-size');
-      margin: map-get($size-set, 'margin');
+      .#{$block}__svg {
+        width: map-get($size-set, 'width');
+        height: map-get($size-set, 'height');
+      }
     }
   }
 }
diff --git a/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot b/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot
@@ -29,6 +29,7 @@ exports[`Storyshots Components/Status Indicator Fill values 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box5-24"
@@ -171,6 +172,7 @@ exports[`Storyshots Components/Status Indicator Fill values 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box6-24"
@@ -313,6 +315,7 @@ exports[`Storyshots Components/Status Indicator Fill values 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box7-24"
@@ -462,6 +465,7 @@ exports[`Storyshots Components/Status Indicator Sizes 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box1-24"
@@ -604,6 +608,7 @@ exports[`Storyshots Components/Status Indicator Sizes 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box2-24"
@@ -746,6 +751,7 @@ exports[`Storyshots Components/Status Indicator Sizes 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box3-24"
@@ -888,6 +894,7 @@ exports[`Storyshots Components/Status Indicator Sizes 1`] = `
 
 
       <svg
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box4-24"
@@ -1028,7 +1035,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
       aria-label="Euro Status Indicator Angled filling at 270 degree"
       aria-roledescription="Status Indicator"
       aria-valuetext="80%"
-      class="fd-status-indicator fd-status-indicator--positive"
+      class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1037,7 +1044,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
 
 
       <svg
-        class="fd-status-indicator--xl"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box36-24"
@@ -1197,7 +1204,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
       aria-label="Euro Status Indicator Angled filling at 40 degree"
       aria-roledescription="Status Indicator"
       aria-valuetext="50%"
-      class="fd-status-indicator fd-status-indicator--critical"
+      class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1206,7 +1213,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
 
 
       <svg
-        class="fd-status-indicator--xl"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box37-24"
@@ -1366,7 +1373,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
       aria-label="Euro Status Indicator Angled filling at 98 degree"
       aria-roledescription="Status Indicator"
       aria-valuetext="50%"
-      class="fd-status-indicator fd-status-indicator--positive"
+      class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1375,7 +1382,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
 
 
       <svg
-        class="fd-status-indicator--xl"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box38-24"
@@ -1535,7 +1542,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
       aria-label="Euro Status Indicator Angled filling at 140 degree"
       aria-roledescription="Status Indicator"
       aria-valuetext="40%"
-      class="fd-status-indicator fd-status-indicator--negative"
+      class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1544,7 +1551,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi
 
 
       <svg
-        class="fd-status-indicator--xl"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box39-24"
@@ -1715,7 +1722,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
       aria-label="Euro Status Indicator With Labelled On Top"
       aria-roledescription="Status Indicator"
       aria-valuetext="100%"
-      class="fd-status-indicator fd-status-indicator--critical"
+      class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1724,14 +1731,14 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <span
-        class="fd-status-indicator--lg__text fd-status-indicator--critical__text"
+        class="fd-status-indicator__label fd-status-indicator__label--lg"
       >
         100%
       </span>
 
 
       <svg
-        class="fd-status-indicator--lg"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box9-24"
@@ -1865,7 +1872,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
       aria-label="Euro Status Indicator With Labelled On Bottom"
       aria-roledescription="Status Indicator"
       aria-valuetext="100%"
-      class="fd-status-indicator fd-status-indicator--positive "
+      class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -1874,7 +1881,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <svg
-        class="fd-status-indicator--lg"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box10-24"
@@ -1987,7 +1994,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <span
-        class="fd-status-indicator--lg__text fd-status-indicator--positive__text"
+        class="fd-status-indicator__label fd-status-indicator__label--lg"
       >
         100%
       </span>
@@ -2015,7 +2022,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
       aria-label="Euro Status Indicator With Labelled On Left"
       aria-roledescription="Status Indicator"
       aria-valuetext="100%"
-      class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--htext "
+      class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--horizontal-label fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -2024,15 +2031,15 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <span
-        class="fd-status-indicator--lg__text fd-status-indicator--critical__text"
+        class="fd-status-indicator__label fd-status-indicator__label--lg"
       >
         100%
       </span>
 
 
       <svg
-        class="fd-status-indicator--lg"
-        data-sap-ui="__shape0-__box21-24"
+        __shape0-__box21-24"=""
+        class="fd-status-indicator__svg"
         height="100%"
         id="__shape0__box12-24"
         preserveAspectRatio="xMidYMid meet"
@@ -2165,7 +2172,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
       aria-label="Euro Status Indicator With Labelled On Right"
       aria-roledescription="Status Indicator"
       aria-valuetext="100%"
-      class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--htext"
+      class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--horizontal-label fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -2174,7 +2181,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <svg
-        class="fd-status-indicator--lg"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box101-24"
@@ -2287,7 +2294,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`]
 
 
       <span
-        class="fd-status-indicator--lg__text fd-status-indicator--positive__text"
+        class="fd-status-indicator__label fd-status-indicator__label--lg"
       >
         100%
       </span>
@@ -2323,7 +2330,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil
       aria-label="Euro status indicator animated left to right filling "
       aria-roledescription="Status Indicator"
       aria-valuetext="80%"
-      class="fd-status-indicator fd-status-indicator--negative"
+      class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -2332,7 +2339,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil
 
 
       <svg
-        class="fd-status-indicator--lg"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box32-24"
         height="100%"
         id="__shape0__box32a-24"
@@ -2491,7 +2498,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil
       aria-label="Euro status indicator animated bottom up filling"
       aria-roledescription="Status Indicator"
       aria-valuetext="80%"
-      class="fd-status-indicator fd-status-indicator--negative"
+      class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg"
       focusable="true"
       role="progressbar"
       tabindex="0"
@@ -2500,7 +2507,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil
 
 
       <svg
-        class="fd-status-indicator--lg"
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box33-24"
@@ -2663,19 +2670,19 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Radial fil
 
 
     <div
-      aria-label="Euro Status Indicator Radial clock wise filling"
+      aria-label="Euro Status Indicator Radial clockwise filling"
       aria-roledescription="Status Indicator"
       aria-valuetext="30%"
-      class="fd-status-indicator fd-status-indicator--negative"
+      class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
-      title="30% radial filling with clock wise"
+      title="30% radial filling with clockwise"
     >
 
 
       <svg
-        class="fd-status-indicator--xl "
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box34-24"
@@ -2829,19 +2836,19 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Radial fil
 
 
     <div
-      aria-label="Euro Status Indicator Radial clock wise filling"
+      aria-label="Euro Status Indicator Radial clockwise filling"
       aria-roledescription="Status Indicator"
       aria-valuetext="30%"
-      class="fd-status-indicator fd-status-indicator--negative"
+      class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl"
       focusable="true"
       role="progressbar"
       tabindex="0"
-      title="30% radial filling with counter clock wise"
+      title="30% radial filling with counterclockwise"
     >
 
 
       <svg
-        class="fd-status-indicator--xl "
+        class="fd-status-indicator__svg"
         data-sap-ui="__shape0-__box21-24"
         height="100%"
         id="__shape0__box35-24"