Merge pull request #2033 from Shopify/mobile-keyboard-accessories-docs

Add mobile keyboard accessories docs

UNRELEASED.md

@@ -8,3 +8,4 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Added iOS and Android examples for the TextField component ([#1893](https://github.com/Shopify/polaris-react/pull/1893))
 - Added documentation for the iOS and Android select component ([#2041](https://github.com/Shopify/polaris-react/pull/2041))
+- Added documentation for the iOS and Android keyboard accessories component ([#2033](https://github.com/Shopify/polaris-react/pull/2033))

src/components/KeyboardAccessories/README.md

@@ -0,0 +1,78 @@
+---
+name: Keyboard accessories
+category: Forms
+platforms:
+  - android
+  - ios
+keywords:
+  - keyboard
+  - soft
+  - virtual
+  - ios
+  - android
+---
+
+# Keyboard accessories
+
+On iOS and Android, software keyboards appear on the screen when typing. Keyboard accessories allows additional content and actions based on what merchants are doing. For example, when the merchant is updating a description and needs controls for bolding, italicizing, and underlining.
+
+---
+
+## Best practices
+
+Keyboard accessories should:
+
+- Have a maximum height of:
+  - 44pt on iOS
+  - 48dp on Android
+- Include a horizontally swipeable interaction if there is a lot of content or a large number of actions you need to make available to merchants
+  - Provide an easy hint or introduction to make the merchant aware of the swipe interaction
+- Make actions grouped and expandable if possible, in order to reduce visual noise and complexity for the merchant
+
+---
+
+## Examples
+
+### Keyboard accessories with actions
+
+<!-- example-for: ios, android -->
+
+Use the action accessories to add actions that are relevant to what the merchant is entering on the screen.
+
+<!-- content-for: android -->
+
+![Keyboard accessory with actions](components/KeyboardAccessories/android/toolbar.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Keyboard accessory with actions](components/KeyboardAccessories/ios/toolbar.png)
+
+<!-- /content-for -->
+
+### Keyboard accessories with text field
+
+<!-- example-for: ios, android -->
+
+Use to make message entry easier in messaging and chat-based products.
+
+<!-- content-for: android -->
+
+![Keyboard accessory with text field](components/KeyboardAccessories/android/text-field.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Keyboard accessory with text field](components/KeyboardAccessories/ios/text-field.png)
+
+<!-- /content-for -->
+
+---
+
+## Related components
+
+- To make more actions visible in keyboard accessories, use [the icon component](/components/images-and-icons/icon) for action labels
+- To group actions within keyboard accessories, use [the button group component](/components/actions/button-group)
+- For chat-based interfaces, use [the text field component](/components/forms/text-field) in keyboard accessories