fix(mobile): Update mobile documentation on various components (#4399)

Author: Alexis Córdova

Diff for: RELEASENOTES.general.md

@@ -1,6 +1,10 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.13.1 - August 26, 2020
+
+- Added proper font-size change to mobile demos on the site
+
 ## 2.13.0 - August 20, 2020
 
 - Added opacity override for placeholder text in inputs for Firefox browser

Diff for: ui/components/buttons/RELEASENOTES.md

@@ -8,7 +8,8 @@
 
 ### Fixed
 
-- Added `background` shorthand and set to `initial` to recreated existing behavior that relied on the shorthand to apply initial values to unspecified values.
+- Added `background` shorthand and set to `initial` to recreate existing behavior that relied on the shorthand to apply initial values to unspecified values.
+- Fixed issue where mobile text size wasn't accurately sized.
 
 ## 2.13.0
 

Diff for: ui/components/checkbox-button-group/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.1
+
+### Fixed
+
+- Fixed issue where mobile text size wasn't accurately sized.
+
 ## 2.11.5
 
 ### Added

Diff for: ui/components/form-element/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.1
+
+### Changed
+
+- Removed Mobile example under Stacked Alignment and Horizontal Alignment examples, as they did not conform to the specification.
+
 ## 2.13.0
 
 ### Changed

Diff for: ui/components/form-element/docs.mdx

@@ -422,21 +422,6 @@ When you want the form elements inside of your record form to be stacked. Each `
   </CodeView>
 </Example>
 
-<MobileNotice
-  docsLink="#Mobile"
-  header="Mobile context changes"
-  elementName="form elements within a record form with stacked alignment"
-/>
-
-<CodeView frameOnly>
-  <RecordDetail
-    snapshot={Snapshot.ObjectFieldTypes}
-    isViewMode
-    hasInlineEdit
-    direction="stacked"
-  />
-</CodeView>
-
 ##### Horizontal Alignment
 
 By adding the class `slds-form-element_horizontal` to every `slds-form-element`, your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space.
@@ -452,21 +437,6 @@ By adding the class `slds-form-element_horizontal` to every `slds-form-element`,
   </CodeView>
 </Example>
 
-<MobileNotice
-  docsLink="#Mobile"
-  header="Mobile context changes"
-  elementName="form elements within a record form with horizontal alignment"
-/>
-
-<CodeView frameOnly>
-  <RecordDetail
-    snapshot={Snapshot.ObjectFieldTypesHorizontal}
-    isViewMode
-    hasInlineEdit
-    direction="horizontal"
-  />
-</CodeView>
-
 #### Edit Mode
 
 When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:

Diff for: ui/components/input/docs.mdx

@@ -36,6 +36,8 @@ on the icon, assistive technology reads out the content of the tooltip. If the t
 
 In some cases, the read-only field state is swapped and has no `<input>`. This is called `static` in the examples. In that case, don’t use a `<label>`. This provides better accessibility for screen readers and keyboard navigators. Instead, use a `<span>` with the `.slds-form-element__label` class. Instead of an `<input>`, use the `.slds-form-element__static` class inside the `.slds-form-element__control` wrapper.
 
+### Mobile
+
 <MobileBlurb patternSpecificText="inputs will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor" />
 
 <CodeView frameOnly>{InputExamples.default}</CodeView>

Diff for: ui/components/menus/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.1
+
+### Changed
+
+- Removed Mobile examples as they did not conform to the specification.
+
 ## 2.11.7
 
 ### Added

Diff for: ui/components/menus/docs.mdx

@@ -8,7 +8,6 @@ import * as DropdownHeight from '../menus/dropdown-height/example';
 import { Submenu } from '../menus/submenu/example';
 import { DoctypeIcon } from '../icons/doctype/example';
 import { getDisplayElementById } from '../../shared/helpers';
-import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
 
 <div className="doc lead">
   A Menu offers a list of actions or functions that a user can access.
@@ -43,14 +42,6 @@ The main thing that distinguishes menus from other popover blocks is keyboard na
 - Esc key closes the menu and moves focus back to the menu trigger
 - Any character key moves focus to the next menu item that starts with that character, if applicable
 
-### Mobile
-
-<MobileBlurb patternSpecificText="menus will have an increased button size to accommodate tapping with a finger instead of the more precise mouse cursor as well as larger text size" />
-
-<CodeView frameOnly frameStyles={{ height: '14rem' }}>
-  <IconLeft hasLeftIcon />
-</CodeView>
-
 ## Base
 
 <Example title="Menu Base">

Diff for: ui/components/modals/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.1
+
+### Fixed
+
+- Fixed issue where mobile text size wasn't accurately sized.
+
 ## 2.13.0
 
 ### Added

Diff for: ui/components/popovers/RELEASENOTES.md

@@ -3,6 +3,13 @@
 # Popovers Release Notes
 
 <!-- ## [Unreleased] -->
+
+## 2.13.1
+
+### Changed
+
+- Removed Mobile examples as they did not conform to the specification.
+
 ## 2.12.0
 
 ### Fixed

Diff for: ui/components/popovers/docs.mdx

@@ -12,7 +12,6 @@ import * as FeatureExamples from './feature/example';
 import * as PreviewPanelExamples from './panels/example';
 import * as PromptExamples from './prompt/example';
 import { getDisplayElementById } from '../../shared/helpers';
-import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
 
 <div className="doc lead">
   A popover is a non-modal dialog. The component should be paired with a
@@ -50,14 +49,6 @@ Panel Popovers can be shown on mouse hover but for keyboard or screen reader use
   - If no Heading element is present, use the `aria-label` attribute and set the value to be a meaningful title of the `dialog`
 - The `dialog` should be described where possible. This can be achieved by applying the `aria-describedby` attribute to the `dialog` element and set the value to be the id of the Popover body
 
-### Mobile
-
-<MobileBlurb patternSpecificText="popovers will have increased close button size to accommodate tapping with a finger instead of the more precise mouse cursor" />
-
-<CodeView frameOnly>
-  {getDisplayElementById(NubbinExamples.states, 'bottom')}
-</CodeView>
-
 ## Base
 
 <CodeView>{PopoverExamples.default}</CodeView>
@@ -290,14 +281,6 @@ Panel Popovers can be shown on mouse hover but for keyboard or screen reader use
 
 <CodeView>{PromptExamples.default}</CodeView>
 
-<MobileNotice
-  docsLink="#Mobile"
-  header="Mobile context changes"
-  elementName="prompts"
-/>
-
-<CodeView frameOnly>{PromptExamples.default}</CodeView>
-
 #### Positioned top left
 
 <CodeView demoStyles="height: 250px;">

Diff for: ui/components/radio-button-group/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.1
+
+### Fixed
+
+- Fixed issue where mobile text size wasn't accurately sized.
+
 ## 2.13.0
 
 ### Changed

Diff for: ui/touch-demo.scss

@@ -5,6 +5,10 @@
 @import 'init';
 @import 'dependencies/touch';
 
+body {
+  font-size: $font-size-5;
+}
+
 // Framework
 @import 'components/touch';
 @import 'utilities/touch';