Skip to content

Commit

Permalink
feat: toggle updates (#1466)
Browse files Browse the repository at this point in the history 
* Update toggle component to match design specs
  • Loading branch information
Saad M authored Jun 6, 2019
1 parent df99d9f commit 3e18dc5
Show file tree
Hide file tree
Showing 27 changed files with 391 additions and 68 deletions.
2 changes: 1 addition & 1 deletion .stylelintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ rules:
selector-pseudo-class-no-unknown: true

## General / Sheet
no-duplicate-selectors: true
# no-duplicate-selectors: true
no-empty-source: true
no-extra-semicolons: true

Expand Down
2 changes: 1 addition & 1 deletion docs/_data/sidebars/left-navigation-sidebar.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ entries:
url: /components/token.html
output: web

- title: Toggle
- title: Toggle / Switch
url: /components/toggle.html
output: web

Expand Down
126 changes: 106 additions & 20 deletions docs/pages/components/toggle.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,120 @@
---
title: Toggle
title: Toggle / Switch
id: toggle
keywords: toggle
keywords: toggle, swtich
sidebar: left-navigation-sidebar
toc: false
permalink: components/toggle.html
folder: components
---

The toggle component is used to activate or deactivate an element. Uses a visual metaphor that is know to the user with visible differences between on and off state.
The toggle/switch is meant to resemble a physical switch and allow a user to turn a setting “on” or “off”. It should be used to switch between two states/modes: active or inactive.
{: .docs-intro}

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".
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”.

<br>

## Toggle Sizes
## Toggle with Label on top
To clarify the meaning of the toggle, use a label above it (ex. Live).

The toggle can be set to 4 sizes: `--xs`, `--s`, normal and `--l`. When used with forms, it is recommended to use the small size so that form components will be consistent.
{% capture default %}
<div class="fd-form__set">
<div class="fd-form__item">
<label class="fd-form__label" for="y21YO391">Live:</label>
<label>
<span class="fd-toggle">
<input type="checkbox" name="" value="" id="y21YO391">
<span class="fd-toggle__switch" role="presentation"></span>
</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 fd-form__item--check">
<label class="fd-form__label" for="y21YO3911">
<span class="fd-toggle fd-form__control">
<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).

{% capture default %}
<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="y21YO3911">
<span class="fd-toggle fd-form__control">
<input type="checkbox" name="" value="" id="y21YO3911">
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Off
</label>
</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 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
{% capture default %}
<label>
<span class="fd-toggle fd-toggle--compact">
<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 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 fd-form__item--check">
Expand All @@ -41,16 +137,6 @@ The toggle can be set to 4 sizes: `--xs`, `--s`, normal and `--l`. When used wit
</label>
</div>

<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="P3D2k380h">
<span class="fd-toggle fd-form__control">
<input type="checkbox" name="" value="" id="P3D2k380h">
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Default Toggle
</label>
</div>

<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="V2bRj442g">
<span class="fd-toggle fd-toggle--l fd-form__control">
Expand All @@ -74,7 +160,7 @@ The toggle can be set to the disable state and still indicate the state of the t
{% capture toggle-disabled %}
<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="ImBw4551">
<span class="fd-toggle fd-toggle--xs fd-form__control">
<span class="fd-toggle fd-toggle--compact fd-form__control">
<input type="checkbox" name="" value="" id="ImBw4551c" disabled>
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Expand All @@ -84,7 +170,7 @@ The toggle can be set to the disable state and still indicate the state of the t

<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="ImBw4551">
<span class="fd-toggle fd-toggle--s fd-form__control">
<span class="fd-toggle fd-toggle--compact fd-form__control">
<input type="checkbox" name="" value="" id="ImBw4551c" disabled checked>
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Expand All @@ -105,7 +191,7 @@ The toggle can be set to the disable state and still indicate the state of the t
<div class="fd-form__item fd-form__item--check">
<label class="fd-form__label" for="V2bRj442f">
<span class="fd-toggle fd-toggle--l fd-form__control">
<input type="checkbox" name="" value="" id="V2bRj442f" disabled>
<input type="checkbox" name="" value="" id="V2bRj442f" disabled checked>
<span class="fd-toggle__switch" role="presentation"></span>
</span>
Large Toggle
Expand Down
Loading

0 comments on commit 3e18dc5

Please sign in to comment.