Skip to content

Commit 89cd6a1

Browse files
joebuonoJoe Buono
joebuono
and
Joe Buono
authored
Docs update: View (#1924)
* update view description * updating examples * tidying up examples * responded to pr feedback * view renders a div by default * update icon in accessibility example * update View description * updated description to include style props * revised View description Co-authored-by: Joe Buono <[email protected]>
1 parent e9240b2 commit 89cd6a1

File tree

10 files changed

+125
-58
lines changed

10 files changed

+125
-58
lines changed

‎docs/src/data/links.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const baseComponents: ComponentNavItem[] = [
1111
{
1212
href: '/components/view',
1313
label: 'View',
14-
body: `View is a container that contains stuff. View is the most abstract component on top of which all other components live.`,
14+
body: `View is the foundational component for Amplify UI primitives. While View renders a <div> by default, it can render any HTML element and supports styling via props.`,
1515
platforms: ['react'],
1616
},
1717
{

‎docs/src/pages/[platform]/components/view/examples/AccessibilityExample.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { View } from '@aws-amplify/ui-react';
2+
import { MdAccessibility } from 'react-icons/md';
3+
4+
export const AccessibilityExample = () => {
5+
return (
6+
<View
7+
ariaLabel="So accessible!"
8+
role="button"
9+
onClick={() => alert('Hooray for accessbility!')}
10+
>
11+
<MdAccessibility />
12+
</View>
13+
);
14+
};

‎docs/src/pages/[platform]/components/view/examples/CustomAttributesExample.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { View } from '@aws-amplify/ui-react';
2+
3+
export const CustomAttributesExample = () => {
4+
return <View as="progress" data-progress-bar max="100" value="75" />;
5+
};

‎docs/src/pages/[platform]/components/view/examples/DefaultViewExample.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { View } from '@aws-amplify/ui-react';
2+
3+
export const DefaultViewExample = () => {
4+
return <View>Nice view! 🏔</View>;
5+
};

‎docs/src/pages/[platform]/components/view/examples/DisabledStateExample.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { View } from '@aws-amplify/ui-react';
2+
3+
export const DisabledStateExample = () => {
4+
return (
5+
<View
6+
as="button"
7+
isDisabled={true}
8+
onClick={() => alert("This won't fire 🚫")}
9+
>
10+
You cannot click me!
11+
</View>
12+
);
13+
};

‎docs/src/pages/[platform]/components/view/examples/SetRenderedHTML.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { View } from '@aws-amplify/ui-react';
2+
3+
export const SetRenderedHTML = () => {
4+
return <View as="section">I am a section</View>;
5+
};

‎docs/src/pages/[platform]/components/view/examples/StylePropsExample.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { View, useTheme } from '@aws-amplify/ui-react';
2+
3+
export const StylePropsExample = () => {
4+
const { tokens } = useTheme();
5+
6+
return (
7+
<View
8+
backgroundColor={tokens.colors.green[20]}
9+
borderRadius={tokens.radii.large}
10+
fontSize={tokens.fontSizes.xxxxl}
11+
textAlign="center"
12+
>
13+
🌲🌲🌲 🏕 🌲🌲🌲
14+
</View>
15+
);
16+
};

‎docs/src/pages/[platform]/components/view/examples/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { AccessibilityExample } from './AccessibilityExample';
2+
export { CustomAttributesExample } from './CustomAttributesExample';
3+
export { DefaultViewExample } from './DefaultViewExample';
4+
export { DisabledStateExample } from './DisabledStateExample';
5+
export { SetRenderedHTML } from './SetRenderedHTML';
6+
export { StylePropsExample } from './StylePropsExample';

‎docs/src/pages/[platform]/components/view/index.page.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: View
33
metaTitle: View
4-
metaDescription: View is the container component on top of which all other components live.
4+
description: View is the foundational component for Amplify UI primitives. While View renders a <div> by default, it can render any HTML element and supports styling via props.
5+
metaDescription: View is the foundational component for Amplify UI primitives. While View renders a <div> by default, it can render any HTML element and supports styling via props.
56
reactSource: packages/react/src/primitives/View/View.tsx
67
supportedFrameworks: react
78
---

‎docs/src/pages/[platform]/components/view/react.mdx‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,85 @@
11
import { View } from '@aws-amplify/ui-react';
22
import { ViewDemo } from './demo';
3-
import { Example } from '@/components/Example';
4-
5-
View is a container that contains stuff. View is the most abstract component on top of which all other components live.
3+
import { Example, ExampleCode } from '@/components/Example';
4+
import {
5+
AccessibilityExample,
6+
CustomAttributesExample,
7+
DefaultViewExample,
8+
DisabledStateExample,
9+
SetRenderedHTML,
10+
StylePropsExample,
11+
} from './examples';
612

713
## Demo
814

915
<ViewDemo />
1016

1117
## Usage
1218

13-
Import the View component and styles.
19+
Import the View component.
1420

15-
```jsx
16-
import { View } from '@aws-amplify/ui-react';
17-
import '@aws-amplify/ui-react/styles.css';
21+
<Example>
22+
<DefaultViewExample />
23+
<ExampleCode>
24+
```jsx file=./examples/DefaultViewExample.tsx
1825

19-
<View>Nice view! 🏔</View>;
2026
```
21-
22-
<Example>
23-
<View>Nice view! 🏔</View>
27+
</ExampleCode>
2428
</Example>
2529

2630
### Set rendered HTML element
2731

28-
Change the HTML element rendered by View with the `as` property.
32+
To change the HTML element rendered by the View, use the `as` prop. View renders a `<div>` by default.
33+
34+
<Example>
35+
<SetRenderedHTML />
36+
<ExampleCode>
37+
```jsx file=./examples/SetRenderedHTML.tsx
2938

30-
```jsx
31-
<View as="section">I'm a Section</View>
3239
```
3340

34-
<Example>
35-
<View as="section">I'm a Section</View>
41+
</ExampleCode>
3642
</Example>
3743

3844
### Disabled state
3945

40-
```jsx
41-
<View as="button" isDisabled={true} onClick={() => alert("This won't fire 🚫")}>
42-
You can't click me!
43-
</View>
44-
```
46+
To mark a View as disabled, pass the `isDisabled` prop.
4547

4648
<Example>
47-
<View
48-
as="button"
49-
isDisabled={true}
50-
onClick={() => alert("This won't fire 🚫")}
51-
>
52-
You can't click me!
53-
</View>
49+
<DisabledStateExample />
50+
<ExampleCode>
51+
```jsx file=./examples/DisabledStateExample.tsx
52+
53+
```
54+
55+
</ExampleCode>
5456
</Example>
5557

5658
### Accessibility
5759

58-
Setting an `aria-label` attribute and `role` for an icon button
60+
The example below demonstrates setting an `aria-label` attribute and `role` for an icon button.
61+
62+
<Example>
63+
<AccessibilityExample />
64+
<ExampleCode>
65+
```jsx file=./examples/AccessibilityExample.tsx
5966

60-
```jsx
61-
<View ariaLabel="To the moon!" role="button" onClick={() => alert('👋 hello')}>
62-
🚀
63-
</View>
6467
```
6568

66-
<Example>
67-
<View
68-
ariaLabel="To the moon!"
69-
role="button"
70-
onClick={() => alert('👋 hello')}
71-
>
72-
🚀
73-
</View>
69+
</ExampleCode>
7470
</Example>
7571

76-
### Custom attributes
72+
### Standard HTML attributes
7773

78-
Pass any attribute to the underlying HTML element.
79-
80-
```jsx
81-
<View as="progress" data-progress-bar max="100" value="50" />
82-
```
74+
View will accept any of the standard HTML attributes that its underlying HTML element accepts.
8375

8476
<Example>
85-
<View
86-
as="progress"
87-
data-progress-bar
88-
max="100"
89-
value="50"
90-
style={{ all: 'revert' }}
91-
/>
77+
<CustomAttributesExample />
78+
<ExampleCode>
79+
```jsx file=./examples/CustomAttributesExample.tsx
80+
81+
```
82+
</ExampleCode>
9283
</Example>
9384

9485
## CSS Styling
@@ -110,9 +101,12 @@ _Using a class selector:_
110101
```
111102

112103
```jsx
104+
import { View } from '@aws-amplify/ui-react';
113105
import './styles.css';
114106

115-
<View className="mountain-view">🏔</View>;
107+
export const ClassNameExample = () => {
108+
return <View className="mountain-view">🏔</View>;
109+
};
116110
```
117111

118112
<Example>
@@ -121,4 +115,12 @@ import './styles.css';
121115

122116
_Using style props:_
123117

124-
(Example needed)
118+
<Example>
119+
<StylePropsExample />
120+
<ExampleCode>
121+
```jsx file=./examples/StylePropsExample.tsx
122+
123+
```
124+
125+
</ExampleCode>
126+
</Example>

0 commit comments

Comments
 (0)