-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Polish the checkbox, update switch documentation (#8588)
* Polish the checkbox, update switch documentation The switch has a long history. Before I go into details, here's what this PR does: - It replaces Pending Review, Stick to Front Page, Allow Comments, and Allow Pingbacks from using Switches to using Checkboxes. - It tweaks the design of the checkbox to have a significantly more visible checked state, and a new more visual focus state. - It tweaks the documentation for when to use a switch instead of a checkbox. The Switch is born from mobile, which is increasingly the device of choice for people and long term might become the only choice. It's bigger and more tappable, and implies by its nature that it's a boolean choice. It also has qualities that the checkbox does not embody: - Like its wall lightswitch counterpart, it’s something you flip and the effect is instant. There used to be darkness, now there’s light. - It has only a single purpose, and that purpose is boolean. For example you wouldn’t use switches to select multiple categories. However Allow Comments and the three other aforementioned toggles that use switches in master, do not have an instant effect, they require you to hit "Save" before the toggle option is stored. Given the above reasoning, a checkbox is a better choice in those situations. The toggle is still a good choice in situations where immediate visual feedback is given, like when a dropcap is applied, or when you toggle image croppping for gallery items. In those situations, the pairing of the boolean nature and the larger touch target makes the switch feel more substantial. With this PR I'm trying to take into account all the past discussions on the topic, and I know there have been many. Lay your thoughts on me. * docs: Tidy up FormToggle docs * Removed unused variables and withInstanceId. Thanks for the feedback, @paulwilde. * Try a fix for the legitimate failing e2e test. Not sure if this is kosher, as the ID will change if additional checkboxes are added. * Fix e2e test really.
- Loading branch information
Showing
10 changed files
with
80 additions
and
58 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 |
---|---|---|
@@ -1,4 +1,3 @@ | ||
.components-checkbox-control__input[type="checkbox"] { | ||
margin-top: 0; | ||
margin-right: 6px; | ||
} |
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
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 |
---|---|---|
@@ -1,27 +1,27 @@ | ||
.editor-post-taxonomies__hierarchical-terms-choice { | ||
margin-bottom: 5px; | ||
margin-bottom: 8px; | ||
} | ||
|
||
.editor-post-taxonomies__hierarchical-terms-input[type="checkbox"] { | ||
margin-top: 0; | ||
} | ||
|
||
.editor-post-taxonomies__hierarchical-terms-subchoices { | ||
margin-top: 5px; | ||
margin-top: 8px; | ||
margin-left: $panel-padding; | ||
} | ||
|
||
.components-button.editor-post-taxonomies__hierarchical-terms-submit, | ||
.components-button.editor-post-taxonomies__hierarchical-terms-add { | ||
margin-top: 10px; | ||
margin-top: 12px; | ||
} | ||
|
||
.editor-post-taxonomies__hierarchical-terms-label { | ||
display: inline-block; | ||
margin-top: 10px; | ||
margin-top: 12px; | ||
} | ||
|
||
.editor-post-taxonomies__hierarchical-terms-input { | ||
margin-top: 5px; | ||
margin-top: 8px; | ||
width: 100%; | ||
} |
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