From 28b083b87bcfcce26e1cc4e8621110b802a804fd Mon Sep 17 00:00:00 2001
From: laylaleeal <63257116+laylaleeal@users.noreply.github.com>
Date: Thu, 27 Jul 2023 11:00:22 -0700
Subject: [PATCH] Docs: Switch iOS mobile doc clean up (#3104)
---
docs/markdown/android/switch.md | 24 ++++++----
docs/markdown/ios/switch.md | 81 ++++++++++++++++++++++-----------
2 files changed, 68 insertions(+), 37 deletions(-)
diff --git a/docs/markdown/android/switch.md b/docs/markdown/android/switch.md
index 056bba874e..6685db00e6 100644
--- a/docs/markdown/android/switch.md
+++ b/docs/markdown/android/switch.md
@@ -4,7 +4,7 @@ description: Use Switch for single-cell options that can be turned on and off on
fullwidth: true
---
-
+
## Usage guidelines
@@ -24,13 +24,13 @@ fullwidth: true
-
+
Use a label and subtext to give Switch context when possible.
-
+
Truncate label text. Instead, allow it to wrap to form another line.
@@ -38,13 +38,13 @@ fullwidth: true
-
+
Communicate why a switch is disabled and how to enable it if possible.
-
+
Use checkboxes or radio buttons to replace the functionality of a switch. If the functionality is a binary on or off, use Switch instead.
@@ -55,11 +55,6 @@ fullwidth: true
Switches should have [Labels](https://gestalt.pinterest.systems/web/label) that can be read by screen readers, and that can be tapped to make it easier for users to select and deselect.
People use Apple and Android’s accessibility features, such as VoiceOver and TalkBack to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple and Android’s accessibility documentation for more information:
-
- [Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/)
- [Accessible development on iOS](https://developer.apple.com/accessibility/ios/)
-
-
[Accessible design on Android](https://material.io/design/usability/accessibility.html#understanding-accessibility)
[Accessible development on Android](https://developer.android.com/guide/topics/ui/accessibility)
@@ -148,3 +143,12 @@ Subtext sits below the Switch label and aligns in the direction of the label.
- Don’t use “you,” “your,” or “my” to describe an action. Instead of “turn on your notifications,” say “turn on notifications.”
+
+## Related
+
+- [RadioGroup](https://gestalt.pinterest.systems/web/radiogroup)
+ Use when presenting a user with a list of choices for which there can only be one selection.
+- [Checkbox](https://gestalt.pinterest.systems/ios/checkbox)
+ Used when presenting a user with a list of choices for which there can be multiple selections.
+- [Fieldset](https://gestalt.pinterest.systems/web/fieldset)
+ Used to group a list of related Switches with a legend that describes the list.
diff --git a/docs/markdown/ios/switch.md b/docs/markdown/ios/switch.md
index 319b55672e..ad44130856 100644
--- a/docs/markdown/ios/switch.md
+++ b/docs/markdown/ios/switch.md
@@ -1,10 +1,10 @@
---
title: Switch
-description: Use Switch for single-cell options that can be turned on and off only. If you have a cell with multiple options that can activated, consider using [Checkbox](https://gestalt.pinterest.systems/ios/checkbox).
+description: Use Switch for single-cell options that can be turned on and off only. If you have a cell with multiple options that can be activated, consider using [Checkbox](https://gestalt.pinterest.systems/ios/checkbox).
fullwidth: true
---
-
+
## Usage guidelines
@@ -24,13 +24,13 @@ fullwidth: true
-
+
Use a label and subtext to give Switch context when possible.
-
+
Truncate label text. Instead, allow it to wrap to form another line.
@@ -38,13 +38,13 @@ fullwidth: true
-
+
Communicate why a switch is disabled and how to enable it if possible.
-
+
Use checkboxes or radio buttons to replace the functionality of a switch. If the functionality is a binary on or off, use Switch instead.
@@ -53,36 +53,21 @@ fullwidth: true
## Accessibility
Switches should have [Labels](https://gestalt.pinterest.systems/web/label) that can be read by screen readers, and that can be tapped to make it easier for users to select and deselect.
-People use Apple and Android’s accessibility features, such as VoiceOver and TalkBack to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple and Android’s accessibility documentation for more information:
+People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. SeeApple’s Human Interface Guidelines and API documentation about accessibility for iOS:
[Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/)
[Accessible development on iOS](https://developer.apple.com/accessibility/ios/)
-
-
- [Accessible design on Android](https://material.io/design/usability/accessibility.html#understanding-accessibility)
- [Accessible development on Android](https://developer.ios.com/guide/topics/ui/accessibility)
-
-## Writing
+## Design tokens
-
-
-
- - Be clear and brief with Switch labels so they can be easily understood.
- - When possible, use verbs to clarify the action. Something like “set…” or “show…”.
- - If possible, be clear whether the setting is activated or deactivated.
- - Use sentence case for labels.
-
+
-
-
- - Use vague language out of context, like “turn on” or “turn off” repeating the state of the switch is redundant and can clutter the interface.
- - Don’t use “you,” “your,” or “my” to describe an action. Instead of “turn on your notifications,” say “turn on notifications.”
-
-
+## Anatomy
+
+
## Variants
@@ -119,6 +104,48 @@ People use Apple and Android’s accessibility features, such as VoiceOver and T
+### With label
+
+1. **Label left**
+Label sits to the left of the switch
+1. **Label right**
+Label sits to the right of the switch
+
+
+
+
+ **Label left**
+
+
+
+
+ **Label right**
+
+
+
+### With subtext
+Subtext sits below the Switch label and aligns in the direction of the label.
+
+
+
+## Writing
+
+
+
+
+ - Be clear and brief with Switch labels so they can be easily understood.
+ - When possible, use verbs to clarify the action. Something like “set…” or “show…”.
+ - If possible, be clear whether the setting is activated or deactivated.
+ - Use sentence case for labels.
+
+
+
+
+ - Use vague language out of context, like “turn on” or “turn off” repeating the state of the switch is redundant and can clutter the interface.
+ - Don’t use “you,” “your,” or “my” to describe an action. Instead of “turn on your notifications,” say “turn on notifications.”
+
+
+
## Related
- [RadioGroup](https://gestalt.pinterest.systems/web/radiogroup)