feat(inputs): add positive intent to input compoennts to accomodate f…

…orm validation components (#857)
chanzuckerberg · Oct 1, 2024 · 6cfec93 · 6cfec93
1 parent fb106d9
commit 6cfec93
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 105 deletions.
diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       Search by label
     </label>
     <div
-      class="MuiFormControl-root MuiTextField-root css-18ogam2-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1p7z5as-MuiFormControl-root-MuiTextField-root"
     >
       <div
         class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
@@ -141,7 +141,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ane0rk-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-1o2qh3k-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -556,7 +556,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ane0rk-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-1o2qh3k-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -982,7 +982,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       <div
         aria-hidden="false"
         aria-label="Search Input"
-        class="MuiFormControl-root MuiTextField-root css-109jzs5-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-1vdkloj-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div

diff --git a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-l94e07-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yszhd5-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"

diff --git a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Dropdown /> Default story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-l94e07-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yszhd5-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -48,7 +48,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
 exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-l94e07-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yszhd5-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"

diff --git a/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx b/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx
@@ -17,7 +17,7 @@ export default {
     },
     intent: {
       control: { type: "radio" },
-      options: ["default", "negative", "notice"],
+      options: ["default", "negative", "notice", "positive"],
     },
     label: {
       control: { type: "text" },

diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
@@ -14,7 +14,7 @@ import {
 import { SDSPalette, fontBodyXs, fontBodyXxs } from "../styles";
 
 export interface CheckboxExtraProps extends CommonThemeProps {
-  intent?: "default" | "negative" | "notice";
+  intent?: "default" | "negative" | "notice" | "positive";
   disabled?: boolean;
 }
 
@@ -30,6 +30,7 @@ export const StyledCheckbox = styled(RawCheckbox)`
       default: "base",
       negative: "negative",
       notice: "notice",
+      positive: "positive",
     };
 
     const checkboxColor = intentToColor[intent] as keyof SDSPalette;

diff --git a/packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx
@@ -19,7 +19,7 @@ export default {
       control: {
         type: "radio",
       },
-      options: ["default", "negative", "notice"],
+      options: ["default", "negative", "notice", "positive"],
     },
     label: {
       control: {

diff --git a/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
 <div>
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-rcu14g-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-gwrvk1-MuiButtonBase-root-MuiButton-root"
     data-testid="InputDropdown"
     label="Label"
     tabindex="0"

diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts
@@ -25,12 +25,14 @@ const doNotForwardProps = [
   "sdsStyle",
 ];
 
+type IntentType = "negative" | "notice" | "positive";
+
 export interface InputDropdownProps
   extends CommonThemeProps,
     Omit<ButtonProps, (typeof doNotForwardProps)[number]> {
   children?: ReactNode;
   disabled?: boolean;
-  intent?: "default" | "negative" | "notice";
+  intent?: "default" | IntentType;
   label: ReactNode;
   onClick: (event: React.MouseEvent<HTMLElement>) => void;
   state?: "default" | "open";
@@ -278,27 +280,14 @@ const isOpen = (props: InputDropdownProps): SerializedStyles => {
   `;
 };
 
-const notice = (props: InputDropdownProps): SerializedStyles => {
-  const borders = getBorders(props);
-
-  return css`
-    border: ${borders?.notice?.default};
-
-    &:hover {
-      border: ${borders?.base?.hover};
-    }
-
-    &:active {
-      border: ${borders?.base?.pressed};
-    }
-  `;
-};
-
-const negative = (props: InputDropdownProps): SerializedStyles => {
+const applyIntentColor = (
+  props: InputDropdownProps,
+  intent: IntentType
+): SerializedStyles => {
   const borders = getBorders(props);
 
   return css`
-    border: ${borders?.negative?.default};
+    border: ${borders?.[intent]?.default};
 
     &:hover {
       border: ${borders?.base?.hover};
@@ -367,8 +356,15 @@ export const StyledInputDropdown = styled(
       ${sdsStyle === "square" && square(props)}
       ${sdsStyle === "rounded" && rounded(props)}
       ${value && userInput(props)}
-      ${intent === "notice" && sdsStyle !== "minimal" && notice(props)}
-      ${intent === "negative" && sdsStyle !== "minimal" && negative(props)}
+      ${intent === "notice" &&
+      sdsStyle !== "minimal" &&
+      applyIntentColor(props, "notice")}
+      ${intent === "negative" &&
+      sdsStyle !== "minimal" &&
+      applyIntentColor(props, "negative")}
+      ${intent === "positive" &&
+      sdsStyle !== "minimal" &&
+      applyIntentColor(props, "positive")}
       ${state === "open" && isOpen(props)}
       ${disabled && isDisabled(props)}
     `;
@@ -461,8 +457,8 @@ export const MinimalDetails = styled("div", {
       ${
         shouldTruncateMinimalDetails &&
         `overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;`
+          text-overflow: ellipsis;
+          white-space: nowrap;`
       }
     `;
   }}

diff --git a/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx b/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx
@@ -14,7 +14,7 @@ export default {
     },
     intent: {
       control: { type: "radio" },
-      options: ["default", "negative", "notice"],
+      options: ["default", "negative", "notice", "positive"],
     },
     label: {
       control: { type: "text" },

diff --git a/packages/components/src/core/InputRadio/style.ts b/packages/components/src/core/InputRadio/style.ts
@@ -16,7 +16,7 @@ import {
 } from "src/core/styles";
 
 export interface RadioExtraProps extends CommonThemeProps {
-  intent?: "default" | "negative" | "notice";
+  intent?: "default" | "negative" | "notice" | "positive";
   disabled?: boolean;
 }
 
@@ -33,6 +33,7 @@ export const StyledRadioButton = styled(RawRadio)`
       default: "base",
       negative: "negative",
       notice: "notice",
+      positive: "positive",
     };
 
     const radioColor = intentToColor[intent] as keyof SDSPalette;

diff --git a/packages/components/src/core/InputSearch/__storybook__/index.stories.tsx b/packages/components/src/core/InputSearch/__storybook__/index.stories.tsx
@@ -15,7 +15,7 @@ export default {
     },
     intent: {
       control: { type: "radio" },
-      options: ["default", "negative", "notice"],
+      options: ["default", "negative", "notice", "positive"],
     },
     label: {
       control: { type: "text" },

diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
@@ -18,9 +18,10 @@ import {
   getSpaces,
 } from "src/core/styles";
 
+type IntentType = "negative" | "notice" | "positive";
 export interface InputSearchExtraProps extends CommonThemeProps {
   disabled?: boolean;
-  intent?: "default" | "negative" | "notice";
+  intent?: IntentType | "default";
   sdsStyle?: "rounded" | "square";
   value?: string;
 }
@@ -43,40 +44,15 @@ const rounded = (props: InputSearchExtraProps): SerializedStyles => {
   `;
 };
 
-const error = (props: InputSearchExtraProps): SerializedStyles => {
+const applyIntentColor = (
+  props: InputSearchExtraProps,
+  intent: IntentType
+): SerializedStyles => {
   const semanticColors = getSemanticColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: 1px solid ${semanticColors?.negative?.border};
-    }
-
-    .${outlinedInputClasses.root}:hover
-      .${outlinedInputClasses.notchedOutline} {
-      border: 1px solid ${semanticColors?.base?.borderHover};
-    }
-
-    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
-      .${outlinedInputClasses.notchedOutline} {
-        border: 1px solid ${semanticColors?.base?.borderHover};
-      }
-
-      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
-        cursor: default;
-        svg {
-          color: ${semanticColors?.base?.iconPrimaryHover};
-        }
-      }
-    }
-  `;
-};
-
-const warning = (props: InputSearchExtraProps): SerializedStyles => {
-  const semanticColors = getSemanticColors(props);
-
-  return css`
-    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: 1px solid ${semanticColors?.notice?.border};
+      border: 1px solid ${semanticColors?.[intent]?.border};
     }
 
     .${outlinedInputClasses.root}:hover
@@ -247,8 +223,9 @@ export const StyledSearchBase = styled(TextField, {
       }
 
       ${sdsStyle === "rounded" && rounded(props)}
-      ${intent === "negative" && error(props)}
-      ${intent === "notice" && warning(props)}
+      ${intent === "negative" && applyIntentColor(props, "negative")}
+      ${intent === "notice" && applyIntentColor(props, "notice")}
+      ${intent === "positive" && applyIntentColor(props, "positive")}
       ${disabled && disabledStyled(props)}
     `;
   }}

diff --git a/packages/components/src/core/InputText/__storybook__/index.stories.tsx b/packages/components/src/core/InputText/__storybook__/index.stories.tsx
@@ -18,7 +18,7 @@ export default {
     },
     intent: {
       control: { type: "radio" },
-      options: ["default", "negative", "notice"],
+      options: ["default", "negative", "notice", "positive"],
     },
     label: {
       control: { type: "text" },

diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
@@ -17,51 +17,26 @@ import {
 } from "src/core/styles";
 import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 
+type IntentType = "negative" | "notice" | "positive";
 export interface InputTextExtraProps extends CommonThemeProps {
   disabled?: boolean;
-  intent?: "default" | "negative" | "notice";
+  intent?: "default" | IntentType;
   sdsType?: "textField" | "textArea";
   hideLabel?: boolean;
 }
 
 const sdsPropNames = ["sdsStyle", "sdsType", "intent", "hideLabel"];
 
-const negative = (props: InputTextExtraProps): SerializedStyles => {
+const applyIntentColor = (
+  props: InputTextExtraProps,
+  intent: IntentType
+): SerializedStyles => {
   const borders = getBorders(props);
   const semanticColors = getSemanticColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.negative?.default};
-    }
-
-    .${outlinedInputClasses.root}:hover
-      .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.base?.hover};
-    }
-
-    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
-      .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.base?.hover};
-      }
-
-      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
-        cursor: default;
-        svg {
-          color: ${semanticColors?.base?.iconPrimary};
-        }
-      }
-    }
-  `;
-};
-
-const notice = (props: InputTextExtraProps): SerializedStyles => {
-  const borders = getBorders(props);
-  const semanticColors = getSemanticColors(props);
-
-  return css`
-    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.notice?.default};
+      border: ${borders?.[intent]?.default};
     }
 
     .${outlinedInputClasses.root}:hover
@@ -186,8 +161,9 @@ export const StyledInputBase = styled(TextField, {
       }
 
       ${sdsType === "textArea" && textArea(props)}
-      ${intent === "negative" && negative(props)}
-      ${intent === "notice" && notice(props)}
+      ${intent === "negative" && applyIntentColor(props, "negative")}
+      ${intent === "notice" && applyIntentColor(props, "notice")}
+      ${intent === "positive" && applyIntentColor(props, "positive")}
       ${disabled && disabledStyled(props)}
     `;
   }}