-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(switch & checkbox): add guidelines about
readonly state
Also - Add guidelines for correctly labeling boolean fields - Use better labels in the default examples of switch and checkbox
- Loading branch information
Showing
15 changed files
with
746 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { Component, h, State } from '@stencil/core'; | ||
| /** | ||
| * Customizing the visualization of the `readonly` state | ||
| * It is possible and recommended that you enhance the visualization of a `boolean` field | ||
| * in a `readonly` state. | ||
| * | ||
| * Because depending on the context, the default UI of the `readonly` state may not always | ||
| * provide the best way of _visualizing information_, potentially leading to | ||
| * confusion and negatively affecting the end-users' experience. | ||
| * | ||
| * :::important | ||
| * Before reading the documentations below, make sure read | ||
| * 1. our guides about the difference between | ||
| * [Disabled vs. Readonly](/#/DesignGuidelines/disabled-vs-readonly.md/) in our components. | ||
| * 2. our guidelines about [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/). | ||
| * ::: | ||
| * | ||
| * Using the readonly-related optional props of `readonlyTrueLabel`, and `readonlyFalseLabel`, | ||
| * you can override the `label` and customize it accordingly. | ||
| * Additionally, by using the `readonlyTrueIcon` and `readonlyFalseIcon` props, | ||
| * you can override the default icons and their colors. | ||
| */ | ||
| @Component({ | ||
| tag: 'limel-example-checkbox-readonly', | ||
| shadow: true, | ||
| }) | ||
| export class CheckboxReadonlyExample { | ||
| @State() | ||
| private readonly = true; | ||
|
|
||
| @State() | ||
| private value = true; | ||
|
|
||
| @State() | ||
| private disabled = false; | ||
|
|
||
| @State() | ||
| private invalid = false; | ||
|
|
||
| @State() | ||
| private required = false; | ||
|
|
||
| public render() { | ||
| return [ | ||
| <limel-checkbox | ||
| disabled={this.disabled} | ||
| label="Subscribe to email newsletters" | ||
| readonlyTrueIcon="news" | ||
| readonlyFalseIcon={{ | ||
| name: 'cancel_subscription', | ||
| color: 'rgb(var(--color-orange-default))', | ||
| }} | ||
| readonlyTrueLabel="Is subscribed to receive newsletters" | ||
| readonlyFalseLabel="Is unsubscribed from newsletters" | ||
| helperText={this.invalid ? 'Something is wrong' : ''} | ||
| id="1" | ||
| checked={this.value} | ||
| required={this.required} | ||
| invalid={this.invalid} | ||
| readonly={this.readonly} | ||
| />, | ||
| <limel-example-controls> | ||
| <limel-checkbox | ||
| checked={this.readonly} | ||
| label="Readonly" | ||
| onChange={this.setReadonly} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.disabled} | ||
| label="Disabled" | ||
| onChange={this.setDisabled} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.invalid} | ||
| label="Invalid" | ||
| onChange={this.setInvalid} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.value} | ||
| label="Checked" | ||
| onChange={this.setChecked} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.required} | ||
| label="Required" | ||
| onChange={this.setRequired} | ||
| /> | ||
| </limel-example-controls>, | ||
| <limel-example-value label="Checked" value={this.value} />, | ||
| ]; | ||
| } | ||
|
|
||
| private setReadonly = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.readonly = event.detail; | ||
| }; | ||
|
|
||
| private setChecked = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.value = event.detail; | ||
| }; | ||
|
|
||
| private setDisabled = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.disabled = event.detail; | ||
| }; | ||
|
|
||
| private setInvalid = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.invalid = event.detail; | ||
| }; | ||
|
|
||
| private setRequired = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.required = event.detail; | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { Component, h, State } from '@stencil/core'; | ||
| /** | ||
| * Customizing the visualization of the `readonly` state | ||
| * It is possible and recommended that you enhance the visualization of a `boolean` field | ||
| * in a `readonly` state. | ||
| * | ||
| * Because depending on the context, the default UI of the `readonly` state may not always | ||
| * provide the best way of _visualizing information_, potentially leading to | ||
| * confusion and negatively affecting the end-users' experience. | ||
| * | ||
| * :::important | ||
| * Before reading the documentations below, make sure read | ||
| * 1. our guides about the difference between | ||
| * [Disabled vs. Readonly](/#/DesignGuidelines/disabled-vs-readonly.md/) in our components. | ||
| * 2. our guidelines about [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/). | ||
| * ::: | ||
| * | ||
| * Using the readonly-related optional props of `readonlyTrueLabel`, and `readonlyFalseLabel`, | ||
| * you can override the `label` and customize it accordingly. | ||
| * Additionally, by using the `readonlyTrueIcon` and `readonlyFalseIcon` props, | ||
| * you can override the default icons and their colors. | ||
| */ | ||
|
|
||
| @Component({ | ||
| shadow: true, | ||
| tag: 'limel-example-switch-readonly', | ||
| }) | ||
| export class SwitchReadonlyExample { | ||
| @State() | ||
| private readonly = true; | ||
|
|
||
| @State() | ||
| private value = true; | ||
|
|
||
| @State() | ||
| private disabled = false; | ||
|
|
||
| @State() | ||
| private invalid = false; | ||
|
|
||
| public render() { | ||
| return [ | ||
| <limel-switch | ||
| label="Subscribe to email newsletters" | ||
| readonlyTrueIcon="news" | ||
| readonlyFalseIcon={{ | ||
| name: 'cancel_subscription', | ||
| color: 'rgb(var(--color-orange-default))', | ||
| }} | ||
| readonlyTrueLabel="Is subscribed to receive newsletters" | ||
| readonlyFalseLabel="Is unsubscribed from newsletters" | ||
| helperText={this.invalid ? 'Something is wrong' : ''} | ||
| value={this.value} | ||
| disabled={this.disabled} | ||
| readonly={this.readonly} | ||
| invalid={this.invalid} | ||
| />, | ||
| <limel-example-controls> | ||
| <limel-checkbox | ||
| checked={this.readonly} | ||
| label="Readonly" | ||
| onChange={this.setReadonly} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.disabled} | ||
| label="Disabled" | ||
| onChange={this.setDisabled} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.invalid} | ||
| label="Invalid" | ||
| onChange={this.setInvalid} | ||
| /> | ||
| <limel-checkbox | ||
| checked={this.value} | ||
| label="Selected" | ||
| onChange={this.setSelected} | ||
| /> | ||
| </limel-example-controls>, | ||
| <limel-example-value value={this.value} />, | ||
| ]; | ||
| } | ||
|
|
||
| private setReadonly = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.readonly = event.detail; | ||
| }; | ||
|
|
||
| private setSelected = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.value = event.detail; | ||
| }; | ||
|
|
||
| private setDisabled = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.disabled = event.detail; | ||
| }; | ||
|
|
||
| private setInvalid = (event: CustomEvent<boolean>) => { | ||
| event.stopPropagation(); | ||
| this.invalid = event.detail; | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
src/design-guidelines/boolean/examples/audition-form-readonly.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { Component, h } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'limel-example-audition-form-readonly', | ||
| shadow: true, | ||
| styleUrl: 'switch-vs-checkbox.scss', | ||
| }) | ||
| export class AuditionFormReadonlyExample { | ||
| public render() { | ||
| return ( | ||
| <div class="do-dont-container"> | ||
| <div class="do"> | ||
| <limel-header | ||
| icon="ok" | ||
| heading="Example of using boolean fields in a report" | ||
| subheading="With well elaborated choices, in readonly mode" | ||
| /> | ||
| <div class="container"> | ||
| <h4>Gender inclusive workplace audition summary</h4> | ||
| <p> | ||
| The audited company have taken proper measures to… | ||
| </p> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Respect and call staff by their choice of pronouns" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| label="Allow any dress codes that represent their gender identity" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Have gender-neutral toilets" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Stop gender discrimination in the recruitment" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| label="Have a protocol for sexual harassment in workplace" | ||
| /> | ||
| <p> ···</p> | ||
| </div> | ||
| </div> | ||
| <div class="do-not"> | ||
| <limel-header | ||
| icon="brake_warning" | ||
| heading="Example of using boolean fields in a report" | ||
| subheading="Same form but with abstract choices, in readonly mode" | ||
| /> | ||
| <div class="container"> | ||
| <h4>Gender inclusive workplace audition summary</h4> | ||
| <p> | ||
| The audited company have taken proper measures to… | ||
| </p> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Normalize sharing of pronouns" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| label="Dress codes that represent gender identity" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Gender-neutral toilets" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| checked={true} | ||
| label="Discrimination in the recruitment" | ||
| /> | ||
| <limel-checkbox | ||
| readonly={true} | ||
| label="Protocol for sexual harassment" | ||
| /> | ||
| <p> ···</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.