Skip to content

Commit

Permalink
fix: update the line-height of the Object Status (#795)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Mar 23, 2020
1 parent b4cb271 commit e2514ea
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 23 deletions.
18 changes: 9 additions & 9 deletions docs/pages/components/object-status.md
View file
Expand Up @@ -44,8 +44,8 @@ Object Status can display the semantic status of an object: negative (class: `fd
<span class="fd-object-status fd-object-status--negative">Negative</span>
<span class="fd-object-status fd-object-status--critical">Critical</span>
<span class="fd-object-status fd-object-status--positive">Positive</span>
<span class="fd-object-status fd-object-status--informative">informative</span>
<span class="fd-object-status">Default</span>
<span class="fd-object-status fd-object-status--informative">Informative</span>
<span class="fd-object-status">Neutral</span>
{% endcapture %}
{% include display-component.html component=badge %}

Expand All @@ -57,7 +57,7 @@ Object Status can display the semantic status of an object: negative (class: `fd
<span class="fd-object-status fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status sap-icon--to-be-reviewed">Default</span>
<span class="fd-object-status sap-icon--to-be-reviewed">Neutral</span>

<br><br>

Expand All @@ -67,7 +67,7 @@ Object Status can display the semantic status of an object: negative (class: `fd
<span class="fd-object-status fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status sap-icon--to-be-reviewed">Default</span>
<span class="fd-object-status sap-icon--to-be-reviewed">Neutral</span>
</div>
{% endcapture %}
{% include display-component.html component=badge %}
Expand All @@ -94,7 +94,7 @@ If the object status is used as a link, a hover effect is shown on non-touch dev
If the object status is shown using a combination of icon and text, there is no hover effect for the icon.
If Object Status has to be clicked/tabbed by the user add the `fd-object-status--link` modifier class.
{% capture badge %}
<a href="#" class="fd-object-status fd-object-status--link">Default</a>
<a href="#" class="fd-object-status fd-object-status--link">Neutral</a>
<a href="#" class="fd-object-status fd-object-status--negative fd-object-status--link">Negative</a>
<a href="#" class="fd-object-status fd-object-status--positive fd-object-status--link">Positive</a>
<span role="button" class="fd-object-status fd-object-status--critical fd-object-status--link sap-icon--status-critical">Critical</span>
Expand Down Expand Up @@ -128,7 +128,7 @@ Inverted Object Status is achieved by adding the `fd-object-status--inverted` mo

<br><br>

<span class="fd-object-status fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--inverted">Inverted Neutral</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
Expand Down Expand Up @@ -158,7 +158,7 @@ Inverted Object Status is achieved by adding the `fd-object-status--inverted` mo

<br><br>

<span class="fd-object-status fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--inverted">Inverted Neutral</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
Expand Down Expand Up @@ -211,7 +211,7 @@ For Object Status in Large Design use the `fd-object-status--large` modifier cla
<span class="fd-object-status fd-object-status--large fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--large fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--large fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status fd-object-status--large sap-icon--to-be-reviewed">Default</span>
<span class="fd-object-status fd-object-status--large sap-icon--to-be-reviewed">Neutral</span>

<br><br>

Expand All @@ -232,7 +232,7 @@ For Object Status in Large Design use the `fd-object-status--large` modifier cla
<span class="fd-object-status fd-object-status--large fd-object-status--inverted sap-icon--to-be-reviewed"></span>

<br><br>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted">Inverted Neutral</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--positive sap-icon--status-positive">Positive</span>
Expand Down
31 changes: 17 additions & 14 deletions src/object-status.scss
View file
Expand Up @@ -111,17 +111,16 @@ $color-accents: (
font-family: $fd-object-status-text-font-family;
font-size: $fd-object-status-text-font-size;
color: $fd-object-status-text-neutral;
display: inline-block;
max-width: 100%;
word-break: break-word;
line-height: 1.4;
display: inline-flex;
align-items: center;
line-height: 1;

&::before {
font-size: $fd-object-status-icon-font-size;
padding-right: $fd-object-status-icon-padding;
color: $fd-object-status-icon-neutral;
position: relative;
top: 0.125rem;
}

&:visited,
Expand All @@ -138,6 +137,7 @@ $color-accents: (

// ICON ONLY MODE
&:empty {
justify-content: center;
padding-right: 0;
padding-left: 0;

Expand All @@ -163,9 +163,15 @@ $color-accents: (

// CLICKABLE OBJECT STATUS
&--link {
display: inline-block;
text-decoration: none;
cursor: pointer;

&::before {
position: relative;
top: 0.125rem;
}

&:hover {
text-decoration: underline;

Expand Down Expand Up @@ -236,7 +242,6 @@ $color-accents: (
&::before {
font-size: $fd-object-status-inverted-icon-font-size;
padding-right: $fd-object-status-inverted-icon-spacing;
top: 0.0625rem;
}

@include fd-rtl() {
Expand All @@ -253,11 +258,6 @@ $color-accents: (
min-width: $fd-object-status-inverted-min-width;
max-width: 100%;
padding: $fd-object-status-inverted-padding-empty;
text-align: center;

&::before {
top: 0;
}
}

// TEXT AND BACKGROUND COLOR FOR INVERTED OBJECT STATUS STATES
Expand Down Expand Up @@ -307,18 +307,21 @@ $color-accents: (
height: $fd-object-status-min-height-large-inverted-empty;
min-width: $fd-object-status-min-width-large-inverted-empty;
padding: $fd-object-status-padding-large-inverted-empty;

&::before {
top: -0.125rem;
}
}
}

// CLICKABLE INVERTED OBJECT STATUS
&.#{$block}--link {
text-decoration: none;
display: inline-flex;
align-items: center;
cursor: pointer;

&::before {
position: initial;
top: initial;
}

&:hover,
&:active,
&:visited {
Expand Down
Binary file modified test/visual-regression-tests/reference_images/FS_object-status_0_backstop_0_.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...visual-regression-tests/reference_images/FS_object-status_1_backstop__n1_0_.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...visual-regression-tests/reference_images/FS_object-status_2_backstop__n2_0_.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e2514ea

Please sign in to comment.