feat(react): Add colorTheme prop to Button (#4305)

* add test workflow * Add colorTheme to Button (#4266) Co-authored-by: Caleb Pollman <cpollman@amazon.com> * chore(docs): Update docs for Button colorTheme update (#4270) * fix(ui): fix overlay colorTheme for Button (#4342) * chore: Remove test workflow for Button feature branch PRs * Create healthy-moles-smash.md --------- Co-authored-by: Heather Buchel <buchel@amazon.com> Co-authored-by: Caleb Pollman <cpollman@amazon.com>
aws-amplify · Aug 15, 2023 · 00c7abc · 00c7abc
1 parent 67a972b
commit 00c7abc
Show file tree

Hide file tree

Showing 20 changed files with 3,018 additions and 278 deletions.
diff --git a/.changeset/healthy-moles-smash.md b/.changeset/healthy-moles-smash.md
@@ -0,0 +1,12 @@
+---
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+feat(react): Add `colorTheme` prop to Button
+
+The Button React primitive now accepts the `colorTheme` prop which allows for more color variants. Usage:
+```
+<Button colorTheme="error">Button text</Button>
+```
diff --git a/docs/src/pages/[platform]/components/button/demo.tsx b/docs/src/pages/[platform]/components/button/demo.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   ButtonSizes,
   ButtonVariations,
+  ButtonColorTheme,
   ButtonProps,
   Flex,
   SwitchField,
@@ -22,6 +23,9 @@ const propsToCode = (props) => {
     (props.variation
       ? `\n  variation=${JSON.stringify(props.variation)}`
       : '') +
+    (props.colorTheme
+      ? `\n  colorTheme=${JSON.stringify(props.colorTheme)}`
+      : '') +
     (props.size ? `\n  size=${JSON.stringify(props.size)}` : '') +
     `
   loadingText=${JSON.stringify(props.loadingText)}
@@ -41,15 +45,34 @@ const PropControls = (props) => {
         id="variation"
         label="Variation"
         value={props.variation}
-        onChange={(event) =>
-          props.setVariation(event.target.value as ButtonVariations)
-        }
+        onChange={(event) => {
+          event.target.value !== ''
+            ? props.setVariation(event.target.value as ButtonVariations)
+            : props.setVariation(undefined);
+        }}
       >
         <option value="">Default</option>
         <option value="primary">Primary</option>
         <option value="link">Link</option>
+      </SelectField>
+
+      <SelectField
+        name="colorTheme"
+        id="colorTheme"
+        label="ColorTheme"
+        value={props.colorTheme}
+        onChange={(event) => {
+          event.target.value !== ''
+            ? props.setColorTheme(event.target.value as ButtonColorTheme)
+            : props.setColorTheme(undefined);
+        }}
+      >
+        <option value="">Default</option>
+        <option value="error">Error</option>
+        <option value="info">Info</option>
         <option value="warning">Warning</option>
-        <option value="destructive">Destructive</option>
+        <option value="success">Success</option>
+        <option value="overlay">Overlay</option>
       </SelectField>
 
       <SelectField
@@ -115,6 +138,7 @@ export const ButtonDemo = () => {
   const [loadingText, setLoadingText] = React.useState('');
   const [ariaLabel, setAriaLabel] = React.useState<string>('');
   const [variation, setVariation] = React.useState<ButtonVariations>();
+  const [colorTheme, setColorTheme] = React.useState<ButtonColorTheme>();
   const [size, setSize] = React.useState<ButtonSizes>();
 
   const props = {
@@ -123,6 +147,7 @@ export const ButtonDemo = () => {
     fullWidth,
     loadingText,
     ariaLabel,
+    colorTheme,
     variation,
     size,
   };
@@ -134,8 +159,10 @@ export const ButtonDemo = () => {
     setLoadingText,
     setAriaLabel,
     setVariation,
+    setColorTheme,
     setSize,
   };
+
   return (
     <Demo
       code={propsToCode(props)}
@@ -146,6 +173,7 @@ export const ButtonDemo = () => {
         isLoading={loading}
         loadingText={loadingText}
         variation={variation}
+        colorTheme={colorTheme}
         size={size}
         onClick={() => alert('hello')}
         ariaLabel={ariaLabel}

diff --git a/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx b/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx
@@ -13,6 +13,14 @@ const theme: Theme = {
       button: {
         // this will affect the font weight of all button variants
         fontWeight: { value: '{fontWeights.extrabold}' },
+
+        outlined: {
+          info: {
+            borderColor: '{colors.purple.60}',
+            color: '{colors.purple.90}',
+          },
+        },
+
         // style the primary variation
         primary: {
           backgroundColor: { value: '{colors.blue.60}' },
@@ -25,6 +33,23 @@ const theme: Theme = {
           _active: {
             backgroundColor: { value: '{colors.blue.90}' },
           },
+          _disabled: {
+            backgroundColor: { value: 'transparent' },
+            borderColor: { value: '{colors.neutral.30}' },
+          },
+          error: {
+            backgroundColor: { value: '{colors.pink.10}' },
+            color: { value: '{colors.red.80}' },
+            _hover: {
+              backgroundColor: { value: '#a51b34' },
+            },
+            _focus: {
+              backgroundColor: { value: '#9a0c26' },
+            },
+            _active: {
+              backgroundColor: { value: '#9a0c26' },
+            },
+          },
         },
       },
     },
@@ -35,6 +60,13 @@ export const ButtonThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
     <Flex direction="row">
       <Button variation="primary">Primary</Button>
+      <Button variation="primary" colorTheme="error">
+        Primary error
+      </Button>
+      <Button variation="primary" isDisabled={true}>
+        Primary (disabled)
+      </Button>
+      <Button colorTheme="info">Default info</Button>
     </Flex>
   </ThemeProvider>
 );
diff --git a/docs/src/pages/[platform]/components/button/react.mdx b/docs/src/pages/[platform]/components/button/react.mdx
@@ -79,24 +79,86 @@ Use the `size` prop to change the Button size. Available options are `small`, `l
 Use the `variation` prop to change the Button variation. Available options are `primary`, `link`, `menu`, `warning`, `destructive` and none (default).
 
 <Example>
-  <View>
+  <Flex>
+    <Button>Default</Button>
     <Button variation="primary">Primary</Button>
     <Button variation="link">Link</Button>
-    <Button variation="menu">Menu</Button>
-    <Button variation="warning">Warning</Button>
-    <Button variation="destructive">Destructive</Button>
-    <Button>Default</Button>
-  </View>
+
+  </Flex>
 
 <ExampleCode>
 
 ```jsx
+<Button>Default</Button>
 <Button variation="primary">Primary</Button>
 <Button variation="link">Link</Button>
-<Button variation="menu">Menu</Button>
-<Button variation="warning">Warning</Button>
-<Button variation="destructive">Destructive</Button>
+```
+
+</ExampleCode>
+</Example>
+
+### Color themes
+
+Use the `colorTheme` prop to change the Button's color theme. Available options are `error`, `info`, `warning`, `success`, and `overlay`.
+
+<Example>
+  <Flex>
+    <Button>Default</Button>
+    <Button colorTheme="success">Success</Button>
+    <Button colorTheme="warning">Warning</Button>
+    <Button colorTheme="error">Error</Button>
+    <Button colorTheme="warning">Info</Button>
+    <Button colorTheme="overlay">Overlay</Button>
+  </Flex>
+
+<ExampleCode>
+
+```jsx
 <Button>Default</Button>
+<Button colorTheme="success">Success</Button>
+<Button colorTheme="warning">Warning</Button>
+<Button colorTheme="error">Error</Button>
+<Button colorTheme="warning">Info</Button>
+<Button colorTheme="overlay">Overlay</Button>
+```
+
+</ExampleCode>
+</Example>
+
+The `colorTheme` prop can be combined with `variation` to provide more Button options.
+
+<Example>
+  <Flex>
+    <Button variation="primary" colorTheme="success">Success</Button>
+    <Button variation="primary" colorTheme="error">error</Button>
+    <Button variation="primary" colorTheme="warning">Warning</Button>
+    <Button variation="primary" colorTheme="info">Info</Button>
+    <Button variation="primary" colorTheme="overlay">Overlay</Button>
+  </Flex>
+  <Flex>
+    <Button variation="link" colorTheme="success">Success</Button>
+    <Button variation="link" colorTheme="error">error</Button>
+    <Button variation="link" colorTheme="warning">Warning</Button>
+    <Button variation="link" colorTheme="info">Info</Button>
+    <Button variation="link" colorTheme="overlay">Overlay</Button>
+  </Flex>
+
+<ExampleCode>
+
+```jsx
+// Primary variation with color themes
+<Button variation="primary" colorTheme="success">Success</Button>
+<Button variation="primary" colorTheme="error">error</Button>
+<Button variation="primary" colorTheme="warning">Warning</Button>
+<Button variation="primary" colorTheme="info">Info</Button>
+<Button variation="primary" colorTheme="overlay">Overlay</Button>
+
+// Link variation with color themes
+<Button variation="link" colorTheme="success">Success</Button>
+<Button variation="link" colorTheme="error">error</Button>
+<Button variation="link" colorTheme="warning">Warning</Button>
+<Button variation="link" colorTheme="info">Info</Button>
+<Button variation="link" colorTheme="overlay">Overlay</Button>
 ```
 
 </ExampleCode>