Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Mar 22, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7d9fe5
changing the BEM to the status indicator
Lokanathan-k Mar 18, 2021
ad15286
BEM change to the css classes and adding testing storyshots [ci visual]
Lokanathan-k Mar 19, 2021
73f61be
updating the BEM and test cases [ci visual]
Lokanathan-k Mar 19, 2021
4415369
some minor changes
InnaAtanasova Mar 22, 2021
819d615
[ci visual]
InnaAtanasova Mar 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions src/status-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Lokanathan-k marked this conversation as resolved.
Show resolved Hide resolved
}

&--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');
}
}
}
}
73 changes: 40 additions & 33 deletions stories/status-indicator/__snapshots__/status-indicator.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading