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

feat: add internal label to switch component #777

Merged
merged 4 commits into from
Mar 17, 2020
Merged

feat: add internal label to switch component #777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3962ba4
Adapt text to switch
JKMarkowski Mar 13, 2020
5d8abb6
Add reference image
JKMarkowski Mar 13, 2020
75d2b1d
Add one test, cleanup styles
JKMarkowski Mar 13, 2020
66930d9
Fix semantic compact focus
JKMarkowski Mar 13, 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
89 changes: 81 additions & 8 deletions docs/pages/components/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,79 @@ The Switch is meant to resemble a physical switch and allow a user to turn a set
{% endcapture %}
{% include display-component.html component=default %}

## Switch with Text

{% capture default %}
<div class="fd-form-group">
<div class="fd-form-item">
<label class="fd-form-label">With Off Text</label>
<label class="fd-switch__label">
<span class="fd-switch__text">Off</span>
<span class="fd-switch">
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21Y677251">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__handle" role="presentation"></span>
</div>
</div>
</span>
</label>
</div>
<div class="fd-form-item">
<label class="fd-form-label">With On Text</label>
<label class="fd-switch__label">
<span class="fd-switch__text">On</span>
<span class="fd-switch">
<input class="fd-switch__input" checked type="checkbox" name="" value="" id="y21653431">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__handle" role="presentation"></span>
</div>
</div>
</span>
</label>
</div>
<div class="fd-form-item">
<label class="fd-form-label">With Positive</label>
<label class="fd-switch__label">
<span class="fd-switch__text">
<span class="fd-object-status fd-object-status--positive">Positive</span>
</span>
<span class="fd-switch fd-switch--semantic">
<input class="fd-switch__input" checked type="checkbox" name="" value="" id="y21653431">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
</label>
</div>
<div class="fd-form-item">
<label class="fd-form-label">With Negative</label>
<label class="fd-switch__label">
<span class="fd-switch__text">
<span class="fd-object-status fd-object-status--negative">Negative</span>
</span>
<span class="fd-switch fd-switch--semantic">
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21653431">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
</label>
</div>
</div>

{% endcapture %}
{% include display-component.html component=default %}

> **Note:** Use a checkbox instead:
> - If it is not clear if the control is showing a state or action.
> - If there are more than two options.
Expand All @@ -61,9 +134,9 @@ The Switch is meant to resemble a physical switch and allow a user to turn a set
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21YO3251">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Expand All @@ -76,9 +149,9 @@ The Switch is meant to resemble a physical switch and allow a user to turn a set
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21YO3431">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Expand All @@ -97,9 +170,9 @@ The Switch is meant to resemble a physical switch and allow a user to turn a set
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21YO3911">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Expand All @@ -109,9 +182,9 @@ The Switch is meant to resemble a physical switch and allow a user to turn a set
<input class="fd-switch__input" type="checkbox" name="" value="" id="y21YO3911">
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
<span class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__icon--on fd-switch__icon sap-icon--accept"></span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Expand Down
105 changes: 36 additions & 69 deletions src/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,16 @@ $block: #{$fd-namespace}-switch;
$fd-switch-track-no-label-compact-width: 2.375rem;
$fd-switch-track-no-label-compact-height: 1rem;

$fd-switch-track-compact-offset: 0.8125rem;
$fd-switch-track-offset: 1.1875rem;
$fd-switch-track-semantic-offset: 1.9375rem;
$fd-switch-track-border-offset: 0.0625rem;

@include fd-reset();

cursor: pointer;
display: inline-block;
position: relative;
padding: $fd-switch-container-padding-y 0;
overflow: hidden;

Expand All @@ -60,6 +66,7 @@ $block: #{$fd-namespace}-switch;
overflow: initial;
display: flex;
align-items: center;
cursor: pointer;
padding: 0;

&.is-disabled {
Expand All @@ -71,7 +78,6 @@ $block: #{$fd-namespace}-switch;
@include fd-reset();

background-color: var(--sapButton_Track_Background);
position: relative;
box-sizing: content-box;
width: $fd-switch-track-no-label-width;
height: $fd-switch-track-no-label-height;
Expand All @@ -88,47 +94,35 @@ $block: #{$fd-namespace}-switch;
justify-content: center;
align-items: center;
top: 50%;
transform: translateY(-50%);
left: calc(1.8125rem - 100%);
transform: translate(-$fd-switch-track-offset, -50%);
transition: $fd-switch-transition;
min-width: 4.25rem;
right: 0;
}

&__text {
@include fd-reset();
@include fd-form-label();

font-size: var(--sapFontSmallSize);
line-height: 1.375rem;
display: block;
width: $fd-switch-label-width;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}

&__icon {
@include fd-reset();

width: $fd-switch-label-width;
min-width: $fd-switch-label-width;
font-size: 0.75rem;
line-height: 1.375rem;
text-align: center;

&--off {
color: var(--sapNegativeElementColor);
margin: 0 0.125rem 0 0;
}

&--on {
color: var(--sapPositiveElementColor);
}
}

&__icon,
&__text {
&--on {
margin: 0 0 0 0.125rem;
}

&--off {
margin: 0 0.125rem 0 0;
}
}

&__handle {
Expand Down Expand Up @@ -172,14 +166,14 @@ $block: #{$fd-namespace}-switch;
position: absolute;
display: block;
outline-offset: -0.0625rem;
outline-width: var(--sapContent_FocusWidth);
outline-color: var(--sapContent_FocusColor);
outline-style: var(--sapContent_FocusStyle);
border-width: var(--sapContent_FocusWidth);
border-color: var(--sapContent_FocusColor);
border-style: var(--sapContent_FocusStyle);
content: '';
top: -$fd-switch-container-padding-y;
bottom: -$fd-switch-container-padding-y;
left: -0.0625rem;
right: -0.0625rem;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

Expand All @@ -193,14 +187,12 @@ $block: #{$fd-namespace}-switch;
}

.#{$block}__track {
left: 0.0625rem;
right: 1rem;
transform: translate($fd-switch-track-border-offset, -50%);
}
}

@include fd-rtl() {
.#{$block}__icon,
.#{$block}__text {
.#{$block}__icon {
&--on {
margin: 0 0.125rem 0 0;
}
Expand All @@ -211,13 +203,12 @@ $block: #{$fd-namespace}-switch;
}

.#{$block}__track {
right: calc(0.625rem - 100%);
transform: translate($fd-switch-track-offset, -50%);
}

.#{$block}__input:checked + .#{$block}__wrapper {
.#{$block}__track {
right: 0.0625rem;
left: 0;
transform: translate(-$fd-switch-track-border-offset, -50%);
}
}
}
Expand Down Expand Up @@ -256,23 +247,13 @@ $block: #{$fd-namespace}-switch;
}

.#{$block}__track {
left: calc(1.438rem - 100%);
transform: translate(-$fd-switch-track-compact-offset, -50%);
min-width: 3.125rem;
}

.#{$block}__input:focus + .#{$block}__wrapper {
&::before {
top: -0.3125rem;
bottom: -0.3125rem;
}
}

@include fd-rtl() {
.#{$block}__input:checked + .#{$block}__wrapper {
.#{$block}__track {
right: 0.0625rem;
left: 0;
}
.#{$block}__track {
transform: translate($fd-switch-track-compact-offset, -50%);
}
}
}
Expand All @@ -285,6 +266,10 @@ $block: #{$fd-namespace}-switch;
background-color: var(--sapErrorBackground);
}

.#{$block}__track {
transform: translate(-$fd-switch-track-semantic-offset, -50%);
}

.#{$block}__handle {
background-color: $fd-switch-inactive-handle-background;
border-color: $fd-switch-error-border-color;
Expand All @@ -295,8 +280,7 @@ $block: #{$fd-namespace}-switch;
border-color: $fd-switch-success-border-color;

.#{$block}__track {
right: -2rem;
left: -0.1875rem;
transform: translate(-$fd-switch-track-border-offset, -50%);
}

.#{$block}__handle {
Expand All @@ -312,21 +296,6 @@ $block: #{$fd-namespace}-switch;
width: $fd-switch-size-compact-x;
height: $fd-switch-size-compact-y;
}

.#{$block}__input:focus + .#{$block}__wrapper {
&::before {
top: -$fd-switch-container-compact-padding-y;
bottom: -$fd-switch-container-compact-padding-y;
}
}

@include fd-rtl() {
.#{$block}__input:checked + .#{$block}__wrapper {
.#{$block}__track {
left: calc(1.3125rem - 100%);
}
}
}
}

@include fd-hover() {
Expand All @@ -348,14 +317,12 @@ $block: #{$fd-namespace}-switch;

@include fd-rtl() {
.#{$block}__track {
left: -0.1875rem;
right: -2rem;
transform: translate($fd-switch-track-semantic-offset, -50%);
}

.#{$block}__input:checked + .#{$block}__wrapper {
.#{$block}__track {
left: calc(1.688rem - 100%);
right: -0.1875rem;
transform: translate($fd-switch-track-border-offset, -50%);
}
}
}
Expand Down
9 changes: 0 additions & 9 deletions test/templates/switch/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ switch:
{%- if m == 'semantic' -%}
{%- set semantic = 'true' -%}
{%- endif -%}
{%- if m == 'no-text' -%}
{%- set noLabel = 'true' -%}
{%- endif -%}
{%- endfor -%}
{%- if semantic == 'true' -%}
{%- set noLabel = 'true' -%}
Expand All @@ -25,16 +22,10 @@ switch:
<input class="fd-switch__input" type="checkbox" name="" value="" id="{{ _id }}"{{ ' disabled' if state.disabled }}{{ ' checked' if state.checked }}>
<div class="fd-switch__wrapper">
<div class="fd-switch__track">
{%- if noLabel =='false' -%}
<span class="fd-switch__text fd-switch__text--on">on</span>
{%- endif -%}
{%- if semantic =='true' -%}
<span class="fd-switch__text fd-switch__icon--on sap-icon--accept"></span>
{%- endif -%}
<span class="fd-switch__handle" role="presentation"></span>
{%- if noLabel =='false' -%}
<span class="fd-switch__text fd-switch__text--off">off</span>
{%- endif -%}
{%- if semantic =='true' -%}
<span class="fd-switch__text fd-switch__icon--off sap-icon--decline"></span>
{%- endif -%}
Expand Down