diff --git a/docs/storybook/1-components/Text/TextScreen.js b/docs/storybook/1-components/Text/TextScreen.js index d33d46a9..f507f115 100644 --- a/docs/storybook/1-components/Text/TextScreen.js +++ b/docs/storybook/1-components/Text/TextScreen.js @@ -37,7 +37,12 @@ const TextScreen = () => ( + Overrides the text that is read by a screen reader when the user interacts with the + element. (This is implemented using aria-label.) + + } /> ( The values of this attribute are expressed in degrees of importance. When regions are specified as polite (recommended), updates take low priority. When regions are specified as assertive, assistive technologies will interrupt and - immediately notify the user. (This is implemented using 'aria-live'.) + immediately notify the user. (This is implemented using aria-live.) } /> @@ -78,7 +83,7 @@ const TextScreen = () => ( When true, indicates that the view is an accessibility element (i.e., focusable) and groups its child content. By default, all the touchable elements and elements with accessibilityRole of button and{' '} - link are accessible. (This is implemented using 'tabindex'.) + link are accessible. (This is implemented using tabindex.) } /> @@ -86,9 +91,12 @@ const TextScreen = () => ( -only supports other and raw text (strings) as children.`} + description={ + + Child content. Nested text components will inherit the styles of their parents (only + backgroundColor is inherited from non-Text parents). + + } example={{ render: () => }} @@ -103,7 +111,7 @@ only supports other and raw text (strings) as children.`} , A value of no-hide-descendants will hide the element and its children from - assistive technologies. (This is implemented using 'aria-hidden'.) + assistive technologies. (This is implemented using aria-hidden.) ]} /> diff --git a/docs/storybook/1-components/Text/examples/PropChildren.js b/docs/storybook/1-components/Text/examples/PropChildren.js index 4e388eb3..0a9a9cc6 100644 --- a/docs/storybook/1-components/Text/examples/PropChildren.js +++ b/docs/storybook/1-components/Text/examples/PropChildren.js @@ -38,6 +38,7 @@ const TextChildrenExample = () => ( (is inherited + {'\n'} (and accumulated (and also applies to the background) ) diff --git a/docs/storybook/ui-explorer/AppText.js b/docs/storybook/ui-explorer/AppText.js index 16db6673..74db8275 100644 --- a/docs/storybook/ui-explorer/AppText.js +++ b/docs/storybook/ui-explorer/AppText.js @@ -19,9 +19,7 @@ export default AppText; const styles = StyleSheet.create({ baseText: { - fontFamily: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' + - '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts + fontSize: '1rem', lineHeight: '1.3125em' }, link: { diff --git a/docs/storybook/ui-explorer/Code.js b/docs/storybook/ui-explorer/Code.js index d861a455..e7582893 100644 --- a/docs/storybook/ui-explorer/Code.js +++ b/docs/storybook/ui-explorer/Code.js @@ -11,6 +11,7 @@ export default Code; const styles = StyleSheet.create({ code: { fontFamily: 'monospace, monospace', + fontSize: '1rem', lineHeight: '1.3125em', whiteSpace: 'pre' } diff --git a/docs/storybook/ui-explorer/DocItem.js b/docs/storybook/ui-explorer/DocItem.js index c3cf9904..915d981d 100644 --- a/docs/storybook/ui-explorer/DocItem.js +++ b/docs/storybook/ui-explorer/DocItem.js @@ -13,11 +13,13 @@ const Divider = () => ; const createDescription = description => { const nodeList = React.Children.toArray(description); + let content; if (nodeList.length === 1) { - return {nodeList}; + content = {nodeList}; } else { - return insertBetween(() => , nodeList); + content = insertBetween(() => , nodeList); } + return {content}; }; const DocItem = ({ description, example = {}, name, typeInfo, label }) => ( @@ -55,6 +57,7 @@ const PropText = ({ label, name, typeInfo }) => ( const styles = StyleSheet.create({ code: { fontFamily: 'monospace, monospace', + fontSize: '1rem', lineHeight: '1.3125em' }, example: { @@ -63,13 +66,20 @@ const styles = StyleSheet.create({ title: { fontSize: '1rem' }, + text: { + alignItems: 'stretch', + display: 'flex', + flexDirection: 'column', + fontSize: '1rem', + lineHeight: '1.3125em' + }, label: { backgroundColor: '#ddd', - color: '#555', borderRadius: '1rem', + color: '#555', + marginRight: '0.5rem', paddingVertical: '0.125rem', - paddingHorizontal: '0.5rem', - marginRight: '0.5rem' + paddingHorizontal: '0.5rem' }, propName: { fontWeight: 'bold' diff --git a/docs/storybook/ui-explorer/UIExplorer.js b/docs/storybook/ui-explorer/UIExplorer.js index aa26e491..4f267b53 100644 --- a/docs/storybook/ui-explorer/UIExplorer.js +++ b/docs/storybook/ui-explorer/UIExplorer.js @@ -59,6 +59,7 @@ const styles = StyleSheet.create({ }, link: { color: '#1B95E0', + fontSize: '1rem', marginTop: 'calc(0.5 * 1.3125rem)', textDecorationLine: 'underline' }