feat(help-text): add success and warning variants (#2654)

* feat: add success and warning variants * docs: add variants * chore: update docs * chore: feedback from nick * chore: feedback from kelsey
twilio-labs · Sep 7, 2022 · c65d698 · c65d698
1 parent 280c872
commit c65d698
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 19 deletions.
diff --git a/.changeset/olive-peas-end.md b/.changeset/olive-peas-end.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/help-text': minor
+'@twilio-paste/core': minor
+---
+
+[Help text] add success and warning variants
diff --git a/packages/paste-core/components/help-text/src/HelpText.tsx b/packages/paste-core/components/help-text/src/HelpText.tsx
@@ -5,12 +5,16 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import type {TextColor} from '@twilio-paste/style-props';
 import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon';
+import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon';
+import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon';
 
 export const HelpTextVariants = {
   DEFAULT: 'default',
   ERROR: 'error',
   ERROR_INVERSE: 'error_inverse',
   INVERSE: 'inverse',
+  SUCCESS: 'success',
+  WARNING: 'warning',
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -52,6 +56,22 @@ const VariantOptions: VariantOptionsProps = {
       </Box>
     ),
   },
+  [HelpTextVariants.SUCCESS]: {
+    textColor: 'colorTextSuccess',
+    icon: (
+      <Box flexShrink={0}>
+        <SuccessIcon color="colorTextIconSuccess" decorative size="sizeIcon20" />
+      </Box>
+    ),
+  },
+  [HelpTextVariants.WARNING]: {
+    textColor: 'colorTextWarning',
+    icon: (
+      <Box flexShrink={0}>
+        <WarningIcon color="colorTextWarning" decorative size="sizeIcon20" />
+      </Box>
+    ),
+  },
 };
 
 const HelpText = React.forwardRef<HTMLDivElement, HelpTextProps>(
@@ -81,11 +101,9 @@ const HelpText = React.forwardRef<HTMLDivElement, HelpTextProps>(
 
 HelpText.displayName = 'HelpText';
 
-if (process.env.NODE_ENV === 'development') {
-  HelpText.propTypes = {
-    marginTop: PropTypes.oneOf(['space0']),
-    element: PropTypes.string,
-  };
-}
+HelpText.propTypes = {
+  marginTop: PropTypes.oneOf(['space0']),
+  element: PropTypes.string,
+};
 
 export {HelpText};
diff --git a/packages/paste-core/components/help-text/stories/input.stories.tsx b/packages/paste-core/components/help-text/stories/input.stories.tsx
@@ -19,6 +19,8 @@ export const Default = (): React.ReactNode => {
     <>
       <HelpText>Please enter a valid email.</HelpText>
       <HelpText variant="error">Please enter a valid email.</HelpText>
+      <HelpText variant="success">Email successfully validated.</HelpText>
+      <HelpText variant="warning">Please enter a valid email.</HelpText>
       <Box maxWidth="size20">
         <HelpText variant="error">Please enter a valid email.</HelpText>
       </Box>
@@ -27,7 +29,7 @@ export const Default = (): React.ReactNode => {
 };
 
 Default.story = {
-  name: 'default',
+  name: 'Default',
 };
 
 export const Inverse = (): React.ReactNode => {
@@ -40,7 +42,7 @@ export const Inverse = (): React.ReactNode => {
 };
 
 Inverse.story = {
-  name: 'inverse',
+  name: 'Inverse',
 };
 
 export const Customized: Story = (_args, {parameters: {isTestEnvironment}}) => {
@@ -53,6 +55,8 @@ export const Customized: Story = (_args, {parameters: {isTestEnvironment}}) => {
           <Card>
             <HelpText>Please enter a valid phone number.</HelpText>
             <HelpText variant="error">Please enter a valid phone number.</HelpText>
+            <HelpText variant="success">Please enter a valid phone number.</HelpText>
+            <HelpText variant="warning">Please enter a valid phone number.</HelpText>
           </Card>
         </Box>
         <Box>
@@ -65,12 +69,18 @@ export const Customized: Story = (_args, {parameters: {isTestEnvironment}}) => {
                 HELP_TEXT: {
                   color: 'colorTextSuccess',
                   fontWeight: 'fontWeightBold',
-                  variants: {error: {color: 'colorTextWarningStrong'}},
+                  variants: {
+                    error: {color: 'colorTextWarningStrong'},
+                    success: {color: 'colorTextLinkStrong'},
+                    warning: {color: 'colorTextErrorStronger'},
+                  },
                 },
               }}
             >
               <HelpText>Please enter a valid phone number.</HelpText>
               <HelpText variant="error">Please enter a valid phone number.</HelpText>
+              <HelpText variant="success">Please enter a valid phone number.</HelpText>
+              <HelpText variant="warning">Please enter a valid phone number.</HelpText>
             </CustomizationProvider>
           </Card>
         </Box>
@@ -84,14 +94,24 @@ export const Customized: Story = (_args, {parameters: {isTestEnvironment}}) => {
                 foo: {
                   color: 'colorTextSuccess',
                   fontWeight: 'fontWeightBold',
-                  variants: {error: {color: 'colorTextWarningStrong'}},
+                  variants: {
+                    error: {color: 'colorTextWarningStrong'},
+                    success: {color: 'colorTextLinkStrong'},
+                    warning: {color: 'colorTextErrorStronger'},
+                  },
                 },
               }}
             >
               <HelpText element="foo">Please enter a valid phone number.</HelpText>
               <HelpText element="foo" variant="error">
                 Please enter a valid phone number.
               </HelpText>
+              <HelpText element="foo" variant="success">
+                Please enter a valid phone number.
+              </HelpText>
+              <HelpText element="foo" variant="warning">
+                Please enter a valid phone number.
+              </HelpText>
             </CustomizationProvider>
           </Card>
         </Box>

diff --git a/packages/paste-website/src/pages/components/help-text/index.mdx b/packages/paste-website/src/pages/components/help-text/index.mdx
@@ -91,7 +91,9 @@ export const pageQuery = graphql`
 
 ### About Help Text
 
-Text that's placed below the field to help users prevent an error and describe what makes the form field successful.
+Help Text is placed below a form field to help users prevent an error and describe what makes the form field successful. It’s also used in compact UI situations to communicate feedback on specific page elements, like in a <Anchor href="/components/chat-log">Chat Log</Anchor>.
+
+If you’re highlighting important information, especially if it’s unrelated to an interactive element or a user action, consider using a <Anchor href="/components/callout">Callout</Anchor> or <Anchor href="/components/alert">Alert</Anchor> instead.
 
 ### Accessibility
 
@@ -127,7 +129,7 @@ Text that's placed below the field to help users prevent an error and describe w
 </>`}
 </LivePreview>
 
-### HelpText with Select
+### Help Text with Select
 
 <LivePreview scope={{Select, Option, HelpText, Label}} language="jsx">
   {`<>
@@ -151,7 +153,7 @@ Text that's placed below the field to help users prevent an error and describe w
 </>`}
 </LivePreview>
 
-## States
+## Variants
 
 ### Default Help Text
 
@@ -187,6 +189,38 @@ Error text should:
 </>`}
 </LivePreview>
 
+### Warning Help Text
+
+Warning Help Text can be used to:
+
+- Preemptively warn a user before an action is taken that may result in an undesired effect (e.g., “You have entered an external email. Use your work email address.”).
+- Help a user avoid a potential issue.
+
+Warning Help Text should provide actionable feedback to help a user take corrective action, if possible.
+
+<LivePreview scope={{Input, Label, HelpText}} language="jsx">
+  {`<>
+  <Label htmlFor="email_warning_example">Email address</Label>
+  <Input aria-describedby="email_warning_help_text" id="email_warning_example" defaultValue="paste@abc.com" name="email_warning_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} />
+  <HelpText id="email_warning_help_text" variant="warning">You have entered an external email. Use your work email address.</HelpText>
+</>`}
+</LivePreview>
+
+### Success Help Text
+
+Success Help Text should be used to:
+
+- Confirm an action has completed.
+- Inform a user that a process has started or is in progress (e.g., “Valid work email address.”).
+
+<LivePreview scope={{Input, Label, HelpText}} language="jsx">
+  {`<>
+  <Label htmlFor="email_success_example">Email address</Label>
+  <Input aria-describedby="email_success_help_text" id="email_success_example" defaultValue="paste@twilio.com" name="email_success_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} />
+  <HelpText id="email_success_help_text" variant="success">Valid work email address.</HelpText>
+</>`}
+</LivePreview>
+
 ## When to use Help Text
 
 Use Help Text when users might need additional information to fill out a form field.
@@ -372,12 +406,12 @@ const Component = () => (
 
 All the [valid HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) (role, aria-\*, type, and so on) are supported including the following props:
 
-| Prop       | Type                                           | Description                                                                               | Default     |
-| ---------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
-| children?  | `ReactNode`                                    |                                                                                           | null        |
-| marginTop? | 'space0'                                       | Sets the top margin on the `div` element.                                                 | 'space30'   |
-| variant?   | 'default', 'error', 'error_inverse', 'inverse' | Changes the render state.                                                                 | 'default'   |
-| element?   | `string`                                       | Overrides the default element name to apply unique styles with the Customization Provider | 'HELP_TEXT' |
+| Prop       | Type                                                                 | Description                                                                               | Default     |
+| ---------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
+| children?  | `ReactNode`                                                          |                                                                                           | null        |
+| marginTop? | 'space0'                                                             | Sets the top margin on the `div` element.                                                 | 'space30'   |
+| variant?   | 'default', 'error', 'error_inverse', 'inverse', 'warning', 'success' | Changes the render state.                                                                 | 'default'   |
+| element?   | `string`                                                             | Overrides the default element name to apply unique styles with the Customization Provider | 'HELP_TEXT' |
 
 <ChangelogRevealer>
   <Changelog />