add flex to input examples so they copy correctly (#4397)

aws-amplify · Sep 6, 2023 · f3903bf · f3903bf
1 parent e274c3e
commit f3903bf
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 91 deletions.
diff --git a/docs/src/pages/[platform]/components/input/examples/DefaultInputExample.tsx b/docs/src/pages/[platform]/components/input/examples/DefaultInputExample.tsx
@@ -1,8 +1,8 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 export const DefaultInputExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="first_name">First Name:</Label>
     <Input id="first_name" name="first_name" />
-  </>
+  </Flex>
 );
diff --git a/docs/src/pages/[platform]/components/input/examples/DefaultRequiredInputExample.tsx b/docs/src/pages/[platform]/components/input/examples/DefaultRequiredInputExample.tsx
@@ -3,8 +3,10 @@ import { Button, Flex, Input, Label } from '@aws-amplify/ui-react';
 export const DefaultRequiredInputExample = () => {
   return (
     <Flex as="form" direction="column" width="20rem">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" isRequired />
+      <Flex direction="column" gap="small">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" isRequired />
+      </Flex>
       <Button type="submit">Submit</Button>
     </Flex>
   );

diff --git a/docs/src/pages/[platform]/components/input/examples/InputEventHandlersExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputEventHandlersExample.tsx
@@ -1,7 +1,7 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 export const InputEventHandlersExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="events">Event handlers</Label>
     <Input
       id="events"
@@ -12,5 +12,5 @@ export const InputEventHandlersExample = () => (
       onPaste={(e) => console.info('onPaste fired:', e.currentTarget.value)}
       onCut={(e) => console.info('onCut fired:', e.currentTarget.value)}
     />
-  </>
+  </Flex>
 );
diff --git a/docs/src/pages/[platform]/components/input/examples/InputSizeExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputSizeExample.tsx
@@ -3,12 +3,20 @@ import { Flex, Input, Label } from '@aws-amplify/ui-react';
 export const InputSizeExample = () => {
   return (
     <Flex direction="column">
-      <Label htmlFor="small">Small</Label>
-      <Input id="small" size="small" width="50%" />
-      <Label htmlFor="default">Default</Label>
-      <Input id="default" width="75%" />
-      <Label htmlFor="large">Large</Label>
-      <Input id="large" size="large" width="100%" />
+      <Flex direction="column" gap="small">
+        <Label htmlFor="small">Small</Label>
+        <Input id="small" size="small" width="50%" />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="default">Default</Label>
+        <Input id="default" width="75%" />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="large">Large</Label>
+        <Input id="large" size="large" width="100%" />
+      </Flex>
     </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/input/examples/InputStatesExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputStatesExample.tsx
@@ -2,11 +2,15 @@ import { Flex, Input, Label } from '@aws-amplify/ui-react';
 
 export const InputStatesExample = () => {
   return (
-    <Flex direction="column" gap="1rem">
-      <Label htmlFor="disabled">Disabled</Label>
-      <Input id="disabled" defaultValue="Disabled" isDisabled />
-      <Label htmlFor="readonly">Readonly</Label>
-      <Input id="readonly" defaultValue="You can't edit me!" isReadOnly />
+    <Flex direction="column">
+      <Flex direction="column" gap="small">
+        <Label htmlFor="disabled">Disabled</Label>
+        <Input id="disabled" defaultValue="Disabled" isDisabled />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Label htmlFor="readonly">Readonly</Label>
+        <Input id="readonly" defaultValue="You can't edit me!" isReadOnly />
+      </Flex>
     </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/input/examples/InputStylePropsExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputStylePropsExample.tsx
@@ -1,30 +1,35 @@
-import { Text, Input, Label, useTheme } from '@aws-amplify/ui-react';
+import { Text, Input, Label, useTheme, Flex } from '@aws-amplify/ui-react';
 
 export const InputStylePropsExample = () => {
   const { tokens } = useTheme();
   return (
-    <>
-      <Label htmlFor="name">
-        <Text
+    <Flex direction="column">
+      <Flex direction="column" gap="small">
+        <Label htmlFor="name">
+          <Text
+            fontWeight={tokens.fontWeights.bold}
+            fontSize={tokens.fontSizes.xl}
+          >
+            Name:
+          </Text>
+        </Label>
+        <Input
+          id="name"
           fontWeight={tokens.fontWeights.bold}
           fontSize={tokens.fontSizes.xl}
-        >
-          Name:
-        </Text>
-      </Label>
-      <Input
-        id="name"
-        fontWeight={tokens.fontWeights.bold}
-        fontSize={tokens.fontSizes.xl}
-        padding="xl"
-        border={`1px solid ${tokens.colors.brand.primary[60]}`}
-      />
-      <Label htmlFor="special">Special Field</Label>
-      <Input
-        id="special"
-        backgroundColor="brand.primary.10"
-        border={`1px solid ${tokens.colors.brand.primary[60]}`}
-      />
-    </>
+          padding="xl"
+          border={`1px solid ${tokens.colors.brand.primary[60]}`}
+        />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="special">Special Field</Label>
+        <Input
+          id="special"
+          backgroundColor="brand.primary.10"
+          border={`1px solid ${tokens.colors.brand.primary[60]}`}
+        />
+      </Flex>
+    </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/input/examples/InputThemeExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputThemeExample.tsx
@@ -1,4 +1,10 @@
-import { Input, Label, ThemeProvider, Theme } from '@aws-amplify/ui-react';
+import {
+  Flex,
+  Input,
+  Label,
+  ThemeProvider,
+  Theme,
+} from '@aws-amplify/ui-react';
 
 const theme: Theme = {
   name: 'input-theme',
@@ -16,7 +22,9 @@ const theme: Theme = {
 
 export const InputThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
-    <Label htmlFor="name">Name</Label>
-    <Input id="name" />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="name">Name</Label>
+      <Input id="name" />
+    </Flex>
   </ThemeProvider>
 );
diff --git a/docs/src/pages/[platform]/components/input/examples/InputValidationErrorExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputValidationErrorExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 export const InputValidationErrorExample = () => {
   const [hasError, setHasError] = React.useState(true);
@@ -10,9 +10,9 @@ export const InputValidationErrorExample = () => {
   };
 
   return (
-    <>
+    <Flex direction="column" gap="small">
       <Label htmlFor="username">Username</Label>
       <Input id="username" hasError={hasError} onChange={validateUsername} />
-    </>
+    </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/input/examples/InputVariationExample.tsx b/docs/src/pages/[platform]/components/input/examples/InputVariationExample.tsx
@@ -1,12 +1,16 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Flex, Input, Label } from '@aws-amplify/ui-react';
 
 export const InputVariationExample = () => {
   return (
-    <>
-      <Label htmlFor="Default">Default</Label>
-      <Input id="default" />
-      <Label htmlFor="Quiet">Default</Label>
-      <Input id="quiet" variation="quiet" />
-    </>
+    <Flex direction="column">
+      <Flex direction="column" gap="small">
+        <Label htmlFor="Default">Default</Label>
+        <Input id="default" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Label htmlFor="Quiet">Default</Label>
+        <Input id="quiet" variation="quiet" />
+      </Flex>
+    </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/input/examples/RequiredInputExample.tsx b/docs/src/pages/[platform]/components/input/examples/RequiredInputExample.tsx
@@ -3,14 +3,16 @@ import { Button, Flex, Text, Input, Label } from '@aws-amplify/ui-react';
 export const RequiredInputExample = () => {
   return (
     <Flex as="form" direction="column" width="100%">
-      <Label htmlFor="email">
-        Email
-        <Text as="span" fontSize="small" color="font.error">
-          {' '}
-          (required)
-        </Text>
-      </Label>
-      <Input id="email" name="email" type="email" isRequired={true} />
+      <Flex direction="column" gap="small">
+        <Label htmlFor="email">
+          Email
+          <Text as="span" fontSize="small" color="font.error">
+            {' '}
+            (required)
+          </Text>
+        </Label>
+        <Input id="email" name="email" type="email" isRequired={true} />
+      </Flex>
       <Button type="submit">Submit</Button>
     </Flex>
   );

diff --git a/docs/src/pages/[platform]/components/input/react.mdx b/docs/src/pages/[platform]/components/input/react.mdx
@@ -1,4 +1,4 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 import { InputDemo } from './demo';
 import {
@@ -138,38 +138,46 @@ Input provides several event handlers: `onSelect`, `onInput`, `onChange`, `onCop
 ### Input Types
 Input primitive comes styled for text input only (type `text`, `date`, `number`, etc). For text component combining Input and Label, see [TextField](textfield). For other input types, see [TextAreaField](textareafield), [CheckBoxField](checkboxfield), and [SelectField](selectfield).
   <Example>
-    <Label htmlFor="departing">Enter departing date ✈️</Label>
-    <Input
-      id="departing"
-      type="date"
-    />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="departing">Enter departing date ✈️</Label>
+      <Input
+        id="departing"
+        type="date"
+      />
+    </Flex>
     <ExampleCode>
 
     ```jsx
-    <Label htmlFor="departing">Enter departing date ✈️</Label>
-    <Input
-      id="departing"
-      type="date"
-    />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="departing">Enter departing date ✈️</Label>
+      <Input
+        id="departing"
+        type="date"
+      />
+    </Flex>
     ```
 
     </ExampleCode>
 
   </Example>
   <Example>
-    <Label htmlFor="quantity">Enter quantity needed: </Label>
-    <Input
-      id="quantity"
-      type="number"
-    />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="quantity">Enter quantity needed: </Label>
+      <Input
+        id="quantity"
+        type="number"
+      />
+    </Flex>
     <ExampleCode>
 
     ```jsx
-    <Label htmlFor="quantity">Enter quantity needed: </Label>
-    <Input
-      id="quantity"
-      type="number"
-    />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="quantity">Enter quantity needed: </Label>
+      <Input
+        id="quantity"
+        type="number"
+      />
+    </Flex>
     ```
 
     </ExampleCode>
@@ -217,8 +225,10 @@ To override styling on a specific Input, you can use a class selector or style p
 _Using a class selector:_
 
 <Example>
-  <Label htmlFor="custom-input">Square field</Label>
-  <Input className="custom-input-class" id="custom-input" />
+  <Flex direction="column" gap="small">
+    <Label htmlFor="custom-input">Square field</Label>
+    <Input className="custom-input-class" id="custom-input" />
+  </Flex>
   <ExampleCode>
     ```css
     /* styles.css */

diff --git a/docs/src/pages/[platform]/components/label/examples/AccessibilityExample.tsx b/docs/src/pages/[platform]/components/label/examples/AccessibilityExample.tsx
@@ -1,8 +1,8 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Flex, Input, Label } from '@aws-amplify/ui-react';
 
 export const AccessibilityExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="departure">Departure date</Label>
     <Input id="departure" type="date" />
-  </>
+  </Flex>
 );
diff --git a/docs/src/pages/[platform]/components/label/examples/DefaultLabelExample.tsx b/docs/src/pages/[platform]/components/label/examples/DefaultLabelExample.tsx
@@ -1,8 +1,8 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Flex, Input, Label } from '@aws-amplify/ui-react';
 
 export const DefaultLabelExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="first_name">First Name:</Label>
     <Input id="first_name" name="first_name" />
-  </>
+  </Flex>
 );