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: add border to the selected state in borderless design and fix outline-offset issue in IE11 #823

Merged
merged 2 commits into from
Mar 31, 2020
Merged

fix: add border to the selected state in borderless design and fix outline-offset issue in IE11 #823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e9d166
fix: add border to the selected state in borderless design
InnaAtanasova Mar 30, 2020
5646fbd
fix: fix missing ouline offset for List item in IE11
InnaAtanasova Mar 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
72 changes: 36 additions & 36 deletions docs/pages/components/list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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;
}
}
}
Comment on lines +14 to +30
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution, it can be used always, when there are no pseudo elements.


$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
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.