Skip to content

Commit

Permalink
fix: add border to the selected state in borderless design and fix ou…
Browse files Browse the repository at this point in the history 
…tline-offset issue in IE11 (#823)

* fix: add border to the selected state in borderless design

* fix: fix missing ouline offset for List item in IE11
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Mar 31, 2020
1 parent 8adfc53 commit a3d018d
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 40 deletions.
72 changes: 36 additions & 36 deletions docs/pages/components/list.md
View file
Expand Up @@ -15,33 +15,33 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture standard-list %}
<ul class="fd-list">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
</li>
</ul>
<br />

<h4>Compact Size</h4>
<ul class="fd-list fd-list--compact">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
</li>
</ul>
Expand All @@ -53,19 +53,19 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture secondary-data %}
<ul class="fd-list">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 1</span>
<span class="fd-list__secondary fd-has-color-status-1">Positive</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary fd-has-color-status-3">Negative</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary fd-has-color-status-1">Positive</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary fd-has-color-status-3">Negative</span>
</li>
Expand All @@ -78,34 +78,34 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture list-with-icons %}
<ul class="fd-list">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__icon sap-icon--cart"></span>
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__icon sap-icon--wrench"></span>
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__icon sap-icon--lightbulb"></span>
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__icon sap-icon--history"></span>
<span class="fd-list__title">List item 4</span>
</li>
</ul>
<br /><br />
<ul class="fd-list">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 1</span>
<span class="fd-list__icon sap-icon--navigation-right-arrow"></span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__icon sap-icon--navigation-right-arrow"></span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__icon sap-icon--navigation-right-arrow"></span>
</li>
Expand All @@ -118,28 +118,28 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture list-with-group-header %}
<ul class="fd-list">
<li class="fd-list__group-header">
<li tabindex="0" class="fd-list__group-header">
Group Header 1
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__group-header">
<li tabindex="0" class="fd-list__group-header">
Group Header 2
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 5</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 6</span>
</li>
</ul>
Expand All @@ -151,19 +151,19 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture list-with-footer %}
<ul class="fd-list">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
</li>
<li class="fd-list__footer">
<li tabindex="0" class="fd-list__footer">
Footer text
</li>
</ul>
Expand All @@ -175,16 +175,16 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo

{% capture list-without-borders %}
<ul class="fd-list fd-list--no-border">
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item">
<li tabindex="0" class="fd-list__item">
<span class="fd-list__title">List item 4</span>
</li>
</ul>
Expand Down
31 changes: 27 additions & 4 deletions src/list.scss
View file
Expand Up @@ -11,6 +11,24 @@
.fd-list+(__item, __label, _input, __title, __message, __footer)+(--no-wrap)
*/

@mixin fake-list-outline($outlineColor: var(--sapContent_FocusColor)) {
&:focus,
&.is-focus {
outline: none;

&::before {
content: '';
position: absolute;
display: block;
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) $outlineColor;
top: 0.1875rem;
left: 0.1875rem;
right: 0.1875rem;
bottom: 0.1875rem;
}
}
}

$block: #{$fd-namespace}-list;

.#{$block} {
Expand Down Expand Up @@ -40,12 +58,13 @@ $block: #{$fd-namespace}-list;
&__item {
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
background: var(--sapList_Background);
position: relative;

@include fd-hover() {
background: var(--sapList_Hover_Background);
}

@include fd-fiori-focus();
@include fake-list-outline();

@include fd-selected() {
background: var(--sapList_SelectionBackgroundColor);
Expand All @@ -63,9 +82,7 @@ $block: #{$fd-namespace}-list;
background: var(--sapList_Active_Background);
}

@include fd-fiori-focus() {
outline-color: var(--sapContent_ContrastFocusColor);
}
@include fake-list-outline(var(--sapContent_ContrastFocusColor));

.#{$block}__title,
.#{$block}__secondary,
Expand Down Expand Up @@ -219,6 +236,12 @@ $block: #{$fd-namespace}-list;
.#{$block}__group-header {
border-bottom: 0;
}

.#{$block}__item {
@include fd-selected() {
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
}
}
}

&--has-message {
Expand Down
Binary file modified test/visual-regression-tests/reference_images/FS_list_6_backstop__n6_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 a3d018d

Please sign in to comment.