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: toggle follow fiori3 #492

Merged
merged 11 commits into from Jan 17, 2020
+589 −586
Merged

feat: toggle follow fiori3 #492

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5009fc7
Adjust Toggle to fiori3
JKMarkowski Dec 4, 2019
f939456
Add tests screens reference
JKMarkowski Dec 5, 2019
7e19e12
Fix RTL mode on IE
JKMarkowski Dec 6, 2019
27f7639
Add margins to toggle labels
JKMarkowski Dec 6, 2019
34929b5
Update tests
JKMarkowski Dec 6, 2019
7ecf825
Change docs
JKMarkowski Dec 6, 2019
22db22d
PR naming changes
JKMarkowski Dec 30, 2019
f741c54
Change naming, make label self-contained, change test naming
JKMarkowski Jan 6, 2020
cb3b331
Update Reference Images
JKMarkowski Jan 6, 2020
7ad509d
Add focus/keyboard support, reset elements
JKMarkowski Jan 15, 2020
f43b06b
Add content-box to components
JKMarkowski Jan 16, 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
274 changes: 128 additions & 146 deletions docs/pages/components/toggle.md
View file
Open in desktop
Expand Up @@ -14,189 +14,171 @@ The toggle/switch is meant to resemble a physical switch and allow a user to tur
It is recommended to always display the toggle with a label above it as well as the label of the selected state. For example, the label above would be Active, the toggle state would be “on” and the selected state label displayed to the right of the toggle would be “Yes”.


## Toggle with Label on top
To clarify the meaning of the toggle, use a label above it (ex. Live).
## Toggle with Labels on Sides
This is basic usage of toggle

{% capture default %}
<div class="fd-form-group">
<div class="fd-form-item">
<label class="fd-form-label" for="y21YO391">Live:</label>
<label class="fd-form-label fd-form-label--toggle">
<span class="fd-toggle">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="y21YO391">
<span class="fd-toggle__switch" role="presentation"></span>
<label class="fd-form-label">Toggle with label</label>
Copy link
Contributor

Choose a reason for hiding this comment

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

shouldn't you only use the switch label?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Labels are not stricly connected to switch. So I don't think so

<label class="fd-switch__label">
<span class="fd-switch">
<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__text--on">on</span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__text--off">off</span>
</div>
</div>
</span>
</label>
</div>
<div class="fd-form-item">
<label class="fd-form-label">Compact Toggle with label</label>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--compact">
<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__text--on">on</span>
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__text--off">off</span>
</div>
</div>
</span>
</label>
</div>
</div>
{% endcapture %}
{% include display-component.html component=default %}

## Toggle with label on the side
When the value of the toggle requires translation, it is suggested to display the text value (ex. On/Off) outside and to the right of of the toggle to allow for longer translations. (ex. French translation of “On” is “Allumez”)

{% capture default %}
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="y21YO3911">
<span class="fd-toggle">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="y21YO3911">
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Allumez
</label>
</div>

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


To clarify the current state, display the text value to the right of the toggle (ex. On or Off).
## Toggle without Labels on Sides
When there is no need to put any label on toggle sides, it's mandatory to add `fd-switch--no-text` modifier.

{% capture default %}
<div class="fd-form-group">
<div class="fd-form-item">
<label class="fd-form-label">Toggle without label</label>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--no-text">
<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__handle" role="presentation"></span>
</div>
</div>
</span>
</label>
</div>
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="y21YO3911">
<span class="fd-toggle">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="y21YO3911">
<span class="fd-toggle__switch" role="presentation"></span>
<label class="fd-form-label">Compact Toggle without label</label>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--no-text fd-switch--compact">
<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__handle" role="presentation"></span>
</div>
</div>
</span>
Off
</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.

## Symantic Toggle
`fd-toggle--semantic` modifier renders semnatic colors and icons inside the toggle switch

{% capture default %}
<label>
<span class="fd-toggle fd-toggle--semantic">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="Enrat404">
<span class="fd-toggle__switch" role="presentation">
<span class="fd-toggle__semantic--off sap-icon--decline"></span>
<span class="fd-toggle__semantic--on sap-icon--accept"></span>
</span>
</span>
</label>
{% endcapture %}
{% include display-component.html component=default %}


## Compact Mode
`fd-toggle--compact` modifier can be used to render the compact size of the toggle
## Semantic Toggle
`fd-switch--semantic` modifier renders semnatic colors and icons inside the toggle switch
{% capture default %}
<label>
<span class="fd-toggle fd-toggle--compact">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="y21YO391">
<span class="fd-toggle__switch" role="presentation"></span>
</span>
</label>

<label>
<span class="fd-toggle fd-toggle--compact fd-toggle--semantic">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="Enrat404">
<span class="fd-toggle__switch" role="presentation">
<span class="fd-toggle__semantic--off sap-icon--decline"></span>
<span class="fd-toggle__semantic--on sap-icon--accept"></span>
</span>
</span>
</label>
{% endcapture %}
{% include display-component.html component=default %}


## Other Size Options

In addition to `default` and `--compact`, the toggle can be set to 3 sizes: `--xs`, `--s` and `--l`. When used with forms, it is recommended to use the small size so that form components will be consistent.

> Node: `--semantic` modifier is currently not supported by these optional sizes

{% capture default %}
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="ImBw4551a">
<span class="fd-toggle fd-toggle--xs">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="ImBw4551a">
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Extra Small Toggle
</label>
</div>

<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="ImBw4551b">
<span class="fd-toggle fd-toggle--s">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="ImBw4551b" checked>
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Small Toggle
</label>
</div>

<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="V2bRj442g">
<span class="fd-toggle fd-toggle--l">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="V2bRj442g" checked>
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Large Toggle
</label>
<div class="fd-form-group">
<div class="fd-form-item">
<label class="fd-form-label">Semantic Toggle</label>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--semantic">
<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__handle" role="presentation"></span>
<span class="fd-switch__text 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">Semantic Compact Toggle</label>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--semantic fd-switch--compact">
<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__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
</label>
</div>
</div>

{% endcapture %}

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

<br/>

## Disabled state
## Rtl

The toggle can be set to the disable state and still indicate the state of the toggle. To do this, add the `disabled` parameter to the input element.

{% capture toggle-disabled %}
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="ImBw4551">
<span class="fd-toggle fd-toggle--compact">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="ImBw4551c" disabled>
<span class="fd-toggle__switch" role="presentation"></span>
{% capture default %}
<div dir="rtl">
<label class="fd-switch__label">
<span class="fd-switch fd-switch--semantic" >
<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__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Extra Small Toggle
</label>
</div>

<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="ImBw4551">
<span class="fd-toggle fd-toggle--compact">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="ImBw4551c" disabled checked>
<span class="fd-toggle__switch" role="presentation"></span>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--semantic fd-switch--compact" >
<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__handle" role="presentation"></span>
<span class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>
</div>
</div>
</span>
Small Toggle
</label>
</div>

<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="P3D2k380d">
<span class="fd-toggle">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="P3D2k380d" disabled>
<span class="fd-toggle__switch" role="presentation"></span>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--no-text fd-switch--compact" >
<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__handle" role="presentation"></span>
</div>
</div>
</span>
Default Toggle
</label>
</div>

<div class="fd-form-item">
<label class="fd-form-label fd-form-label--toggle" for="V2bRj442f">
<span class="fd-toggle fd-toggle--l">
<input class="fd-toggle__input" type="checkbox" name="" value="" id="V2bRj442f" disabled checked>
<span class="fd-toggle__switch" role="presentation"></span>
<label class="fd-switch__label">
<span class="fd-switch fd-switch--no-text" >
<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__handle" role="presentation"></span>
</div>
</div>
</span>
Large Toggle
</label>
</div>
{% endcapture %}

{% include display-component.html component=toggle-disabled %}
{% include display-component.html component=default %}
6 changes: 0 additions & 6 deletions src/form-label.scss
View file
Open in desktop
Expand Up @@ -46,10 +46,4 @@ $block: #{$fd-namespace}-form-label;
top: 0;
}
}

&--toggle {
overflow: initial;
margin-top: 5px;
margin-bottom: 5px;
}
}
2 changes: 1 addition & 1 deletion src/fundamental-styles.scss
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@
@import "./tree";
@import "./tabs";
@import "./time";
@import "./toggle";
@import "switch";
@import "./token";
@import "./input-group";
@import "./shellbar";
Expand Down