From fb106d9ac397db46330cdc6319386508aec7111f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:29:01 -0400
Subject: [PATCH 1/6] chore(release): Merge prod into main (#848)

* chore(release): publish

 - @czi-sds/components@21.1.0
 - @czi-sds/data-viz@0.10.1

* chore(release): publish

 - @czi-sds/components@21.2.0

---------

Co-authored-by: masoudmanson <masoudmanson@users.noreply.github.com>
Co-authored-by: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
---
 packages/components/CHANGELOG.md | 10 ++++++++++
 packages/components/package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index bae50edc5..b9419a305 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [21.2.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.1.0...@czi-sds/components@21.2.0) (2024-09-18)
+
+### Bug Fixes
+
+- **ButtonIcon:** add sdsStyle to doNotForwardProps ([#847](https://github.com/chanzuckerberg/sci-components/issues/847)) ([a29ce17](https://github.com/chanzuckerberg/sci-components/commit/a29ce17707f084768a0f267a10ef53002ac78c0e))
+
+### Features
+
+- **DropdownMenu:** Adds `titleElement` to `DropdownMenu` ([#840](https://github.com/chanzuckerberg/sci-components/issues/840)) ([f96cb8d](https://github.com/chanzuckerberg/sci-components/commit/f96cb8d3dbef928c24272580fb32323a963a4299))
+
 # [21.1.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@21.0.0...@czi-sds/components@21.1.0) (2024-09-07)
 
 ### Bug Fixes
diff --git a/packages/components/package.json b/packages/components/package.json
index 477d871f7..fe07c58cb 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "21.1.0",
+  "version": "21.2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",

From 6cfec93ddcd879493ba384df02c6856a7b5085c2 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Mon, 30 Sep 2024 21:22:31 -0400
Subject: [PATCH 2/6] feat(inputs): add positive intent to input compoennts to
 accomodate form validation components (#857)

---
 .../__snapshots__/index.test.tsx.snap         |  8 ++--
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../__storybook__/index.stories.tsx           |  2 +-
 .../src/core/InputCheckbox/styles.ts          |  3 +-
 .../__storybook__/index.stories.tsx           |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../src/core/InputDropdown/style.ts           | 42 ++++++++----------
 .../__storybook__/index.stories.tsx           |  2 +-
 .../components/src/core/InputRadio/style.ts   |  3 +-
 .../__storybook__/index.stories.tsx           |  2 +-
 .../components/src/core/InputSearch/style.ts  | 43 +++++-------------
 .../InputText/__storybook__/index.stories.tsx |  2 +-
 .../components/src/core/InputText/style.ts    | 44 +++++--------------
 14 files changed, 56 insertions(+), 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
index 37a945228..3134aae34 100644
--- 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
index 5b6239db0..001e928e3 100644
--- 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
index 15552781c..0222ec890 100644
--- 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
index ffdf72c99..e1cdfe531 100644
--- 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
index 5c94ff89f..e292cea94 100644
--- 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
index 502bdc200..aa57d21d6 100644
--- 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
index 9587b0f68..cef897403 100644
--- 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
index 77769fafa..f049ea415 100644
--- 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
index a11f1012e..4fcd75839 100644
--- 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
index 6b8df7a10..d93fe0323 100644
--- 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
index 27b533348..9f9362c80 100644
--- 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
index 0ecb79ca8..8b2c42504 100644
--- 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
index 9dc087064..1680bdd01 100644
--- 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
index af1b8ab9b..8eeab6d30 100644
--- 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)}
     `;
   }}

From 40afdc67d5cdc0e80b9e19828268e0b779b0cd75 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 1 Oct 2024 09:14:27 -0400
Subject: [PATCH 3/6] feat(borders): adds new border variables to support thick
 and extraThick intent borders (#856)

Refactors Notification component to use border variables instead of hardcoded 5px border left
---
 .../styles-dictionary/css/variables.css       | 100 +++++++++++-------
 .../design-tokens/borders.json                |  68 ++++++++++--
 .../styles-dictionary/scss/_variables.scss    |  44 ++++++--
 .../components/src/core/Notification/style.ts |   6 +-
 .../src/core/styles/common/SDSAppTheme.ts     |  44 ++++++--
 .../src/core/styles/common/types.ts           |   2 +
 6 files changed, 194 insertions(+), 70 deletions(-)

diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index adde0bef3..2cae6e088 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -12,15 +12,27 @@
     --sds-border-base-hover: 1px dashed #000000;
     --sds-border-base-pressed: 1px dashed #000000;
     --sds-border-base-table: 1px solid #c3c3c3;
-    --sds-border-beta-default: 1px solid #8b54e2;
-    --sds-border-info-default: 1px solid #1a6cef;
+    --sds-border-beta-default: 1px solid #6526b5;
+    --sds-border-beta-extra-thick: 4px solid #6526b5;
+    --sds-border-beta-thick: 2px solid #6526b5;
+    --sds-border-info-default: 1px solid #0041b9;
+    --sds-border-info-extra-thick: 4px solid #0041b9;
+    --sds-border-info-thick: 2px solid #0041b9;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #db2131;
+    --sds-border-negative-default: 1px solid #980013;
+    --sds-border-negative-extra-thick: 4px solid #980013;
+    --sds-border-negative-thick: 2px solid #980013;
     --sds-border-neutral-default: 1px solid #969696;
+    --sds-border-neutral-extra-thick: 4px solid #969696;
+    --sds-border-neutral-thick: 2px solid #969696;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #da9900;
-    --sds-border-positive-default: 1px solid #238444;
+    --sds-border-notice-default: 1px solid #b77800;
+    --sds-border-notice-extra-thick: 4px solid #b77800;
+    --sds-border-notice-thick: 2px solid #b77800;
+    --sds-border-positive-default: 1px solid #105b2b;
+    --sds-border-positive-extra-thick: 4px solid #105b2b;
+    --sds-border-positive-thick: 2px solid #105b2b;
     --sds-color-primitive-blue-100: #e2eeff;
     --sds-color-primitive-blue-200: #cce1ff;
     --sds-color-primitive-blue-300: #9dc6ff;
@@ -182,9 +194,10 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-color: black;
     --sds-font-font-family-body: "Inter", sans-serif;
@@ -218,13 +231,13 @@
     --sds-font-body-l-600-letter-spacing: 0px;
     --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
     --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxxs-600-text-transform: uppercase;
     --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxs-600-text-transform: uppercase;
     --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
     --sds-font-caps-xxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxs-600-text-transform: uppercase;
     --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-header-xxxs-600-letter-spacing: 0.1px;
     --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
@@ -297,15 +310,27 @@
     --sds-border-base-hover: 1px dashed #ffffff;
     --sds-border-base-pressed: 1px dashed #ffffff;
     --sds-border-base-table: 1px solid #696969;
-    --sds-border-beta-default: 1px solid #cebef8;
-    --sds-border-info-default: 1px solid #a2c9ff;
+    --sds-border-beta-default: 1px solid #e4dcfc;
+    --sds-border-beta-extra-thick: 4px solid #e4dcfc;
+    --sds-border-beta-thick: 2px solid #e4dcfc;
+    --sds-border-info-default: 1px solid #cde3ff;
+    --sds-border-info-extra-thick: 4px solid #cde3ff;
+    --sds-border-info-thick: 2px solid #cde3ff;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #FF9385;
+    --sds-border-negative-default: 1px solid #ffbdb3;
+    --sds-border-negative-extra-thick: 4px solid #ffbdb3;
+    --sds-border-negative-thick: 2px solid #ffbdb3;
     --sds-border-neutral-default: 1px solid #aaaaaa;
+    --sds-border-neutral-extra-thick: 4px solid #aaaaaa;
+    --sds-border-neutral-thick: 2px solid #aaaaaa;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #cf8e00;
-    --sds-border-positive-default: 1px solid #85d898;
+    --sds-border-notice-default: 1px solid #efad00;
+    --sds-border-notice-extra-thick: 4px solid #efad00;
+    --sds-border-notice-thick: 2px solid #efad00;
+    --sds-border-positive-default: 1px solid #bcecc5;
+    --sds-border-positive-extra-thick: 4px solid #bcecc5;
+    --sds-border-positive-thick: 2px solid #bcecc5;
     --sds-color-primitive-blue-100: #002573;
     --sds-color-primitive-blue-200: #0048c5;
     --sds-color-primitive-blue-300: #2573f4;
@@ -342,13 +367,13 @@
     --sds-color-primitive-purple-700: #f0ebfe;
     --sds-color-primitive-purple-800: #fbf9ff;
     --sds-color-primitive-red-100: #630008;
-    --sds-color-primitive-red-200: #A30000;
-    --sds-color-primitive-red-300: #E52722;
-    --sds-color-primitive-red-400: #FF695B;
-    --sds-color-primitive-red-500: #FF9385;
-    --sds-color-primitive-red-600: #FFBDB3;
-    --sds-color-primitive-red-700: #FFD8D1;
-    --sds-color-primitive-red-800: #FFF1EE;
+    --sds-color-primitive-red-200: #a30000;
+    --sds-color-primitive-red-300: #e52722;
+    --sds-color-primitive-red-400: #ff695b;
+    --sds-color-primitive-red-500: #ff9385;
+    --sds-color-primitive-red-600: #ffbdb3;
+    --sds-color-primitive-red-700: #ffd8d1;
+    --sds-color-primitive-red-800: #fff1ee;
     --sds-color-primitive-yellow-100: #552300;
     --sds-color-primitive-yellow-200: #834500;
     --sds-color-primitive-yellow-300: #985a00;
@@ -427,15 +452,15 @@
     --sds-color-semantic-info-surface-primary: #002573;
     --sds-color-semantic-info-surface-secondary: #a2c9ff;
     --sds-color-semantic-info-text: #cde3ff;
-    --sds-color-semantic-negative-border: #FF9385;
-    --sds-color-semantic-negative-fill-hover: #FFBDB3;
-    --sds-color-semantic-negative-fill-pressed: #FFD8D1;
-    --sds-color-semantic-negative-fill-primary: #FF9385;
+    --sds-color-semantic-negative-border: #ff9385;
+    --sds-color-semantic-negative-fill-hover: #ffbdb3;
+    --sds-color-semantic-negative-fill-pressed: #ffd8d1;
+    --sds-color-semantic-negative-fill-primary: #ff9385;
     --sds-color-semantic-negative-fill-secondary: #630008;
-    --sds-color-semantic-negative-ornament: #FFBDB3;
+    --sds-color-semantic-negative-ornament: #ffbdb3;
     --sds-color-semantic-negative-surface-primary: #630008;
-    --sds-color-semantic-negative-surface-secondary: #FF9385;
-    --sds-color-semantic-negative-text: #FFBDB3;
+    --sds-color-semantic-negative-surface-secondary: #ff9385;
+    --sds-color-semantic-negative-text: #ffbdb3;
     --sds-color-semantic-neutral-border: #aaaaaa;
     --sds-color-semantic-neutral-fill-hover: #cdcdcd;
     --sds-color-semantic-neutral-fill-pressed: #ededed;
@@ -467,9 +492,10 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-color: black;
     --sds-font-font-family-body: "Inter", sans-serif;
@@ -503,13 +529,13 @@
     --sds-font-body-l-600-letter-spacing: 0px;
     --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
     --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxxs-600-text-transform: uppercase;
     --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxs-600-text-transform: uppercase;
     --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
     --sds-font-caps-xxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxs-600-text-transform: uppercase;
     --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-header-xxxs-600-letter-spacing: 0.1px;
     --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
@@ -566,4 +592,4 @@
     --sds-space-xl: 24px;
     --sds-space-xxl: 40px;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
index ec03f18d4..11ea74bf5 100644
--- a/packages/components/src/common/styles-dictionary/design-tokens/borders.json
+++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -55,14 +55,30 @@
       },
       "beta": {
         "default": {
-          "value": "1px solid {sds.color.primitive.purple.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.purple.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.purple.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.purple.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.purple.600.darkValue}"
         }
       },
       "info": {
         "default": {
-          "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.blue.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.blue.600.darkValue}"
         }
       },
       "link": {
@@ -77,14 +93,30 @@
       },
       "negative": {
         "default": {
-          "value": "1px solid {sds.color.primitive.red.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.red.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.red.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.red.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.red.600.darkValue}"
         }
       },
       "neutral": {
         "default": {
           "value": "1px solid {sds.color.primitive.gray.500.value}",
           "darkValue": "1px solid {sds.color.primitive.gray.500.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.gray.500.value}",
+          "darkValue": "4px solid {sds.color.primitive.gray.500.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.gray.500.value}",
+          "darkValue": "2px solid {sds.color.primitive.gray.500.darkValue}"
         }
       },
       "none": {
@@ -93,14 +125,30 @@
       },
       "notice": {
         "default": {
-          "value": "1px solid {sds.color.primitive.yellow.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.yellow.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.yellow.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.yellow.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.yellow.600.darkValue}"
         }
       },
       "positive": {
         "default": {
-          "value": "1px solid {sds.color.primitive.green.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.green.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.green.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.green.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.green.600.darkValue}"
         }
       }
     }
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index a4bfeabf2..d759187a0 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -22,24 +22,48 @@ $sds-border-base-pressed: 1px dashed #000000;
 $sds-border-base-pressed-dark: 1px dashed #ffffff;
 $sds-border-base-table: 1px solid #c3c3c3;
 $sds-border-base-table-dark: 1px solid #696969;
-$sds-border-beta-default: 1px solid #8b54e2;
-$sds-border-beta-default-dark: 1px solid #cebef8;
-$sds-border-info-default: 1px solid #1a6cef;
-$sds-border-info-default-dark: 1px solid #a2c9ff;
+$sds-border-beta-default: 1px solid #6526b5;
+$sds-border-beta-default-dark: 1px solid #e4dcfc;
+$sds-border-beta-extra-thick: 4px solid #6526b5;
+$sds-border-beta-extra-thick-dark: 4px solid #e4dcfc;
+$sds-border-beta-thick: 2px solid #6526b5;
+$sds-border-beta-thick-dark: 2px solid #e4dcfc;
+$sds-border-info-default: 1px solid #0041b9;
+$sds-border-info-default-dark: 1px solid #cde3ff;
+$sds-border-info-extra-thick: 4px solid #0041b9;
+$sds-border-info-extra-thick-dark: 4px solid #cde3ff;
+$sds-border-info-thick: 2px solid #0041b9;
+$sds-border-info-thick-dark: 2px solid #cde3ff;
 $sds-border-link-dashed: 1px dashed;
 $sds-border-link-dashed-dark: 1px dashed;
 $sds-border-link-solid: 1px solid;
 $sds-border-link-solid-dark: 1px solid;
-$sds-border-negative-default: 1px solid #db2131;
-$sds-border-negative-default-dark: 1px solid #FF9385;
+$sds-border-negative-default: 1px solid #980013;
+$sds-border-negative-default-dark: 1px solid #FFBDB3;
+$sds-border-negative-extra-thick: 4px solid #980013;
+$sds-border-negative-extra-thick-dark: 4px solid #FFBDB3;
+$sds-border-negative-thick: 2px solid #980013;
+$sds-border-negative-thick-dark: 2px solid #FFBDB3;
 $sds-border-neutral-default: 1px solid #969696;
 $sds-border-neutral-default-dark: 1px solid #aaaaaa;
+$sds-border-neutral-extra-thick: 4px solid #969696;
+$sds-border-neutral-extra-thick-dark: 4px solid #aaaaaa;
+$sds-border-neutral-thick: 2px solid #969696;
+$sds-border-neutral-thick-dark: 2px solid #aaaaaa;
 $sds-border-none: none;
 $sds-border-none-dark: none;
-$sds-border-notice-default: 1px solid #da9900;
-$sds-border-notice-default-dark: 1px solid #cf8e00;
-$sds-border-positive-default: 1px solid #238444;
-$sds-border-positive-default-dark: 1px solid #85d898;
+$sds-border-notice-default: 1px solid #b77800;
+$sds-border-notice-default-dark: 1px solid #efad00;
+$sds-border-notice-extra-thick: 4px solid #b77800;
+$sds-border-notice-extra-thick-dark: 4px solid #efad00;
+$sds-border-notice-thick: 2px solid #b77800;
+$sds-border-notice-thick-dark: 2px solid #efad00;
+$sds-border-positive-default: 1px solid #105b2b;
+$sds-border-positive-default-dark: 1px solid #bcecc5;
+$sds-border-positive-extra-thick: 4px solid #105b2b;
+$sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
+$sds-border-positive-thick: 2px solid #105b2b;
+$sds-border-positive-thick-dark: 2px solid #bcecc5;
 $sds-color-primitive-blue-100: #e2eeff;
 $sds-color-primitive-blue-100-dark: #002573;
 $sds-color-primitive-blue-200: #cce1ff;
diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts
index f318d9af0..a8ed89892 100644
--- a/packages/components/src/core/Notification/style.ts
+++ b/packages/components/src/core/Notification/style.ts
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import {
   CommonThemeProps,
   fontBody,
+  getBorders,
   getCorners,
   getIconSizes,
   getSemanticColors,
@@ -37,8 +38,8 @@ export const StyledNotification = styled(Alert, {
     const iconSizes = getIconSizes(props);
     const semanticColors = getSemanticColors(props);
     const typography = getTypography(props);
+    const borders = getBorders(props);
 
-    const borderColor = semanticColors?.[intent]?.ornament ?? "black";
     const iconColor = semanticColors?.[intent]?.ornament ?? "black";
     const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white";
 
@@ -63,9 +64,8 @@ export const StyledNotification = styled(Alert, {
       color: ${semanticColors?.base?.textPrimary};
       padding: ${spaces?.l}px;
       align-items: flex-start;
-      border-left: 5px solid;
+      border-left: ${borders?.[intent]?.extraThick};
       box-shadow: ${shadows?.s};
-      border-color: ${borderColor};
 
       .MuiAlert-icon {
         height: ${iconSizes?.l.height}px;
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
index c2e505787..76382543a 100644
--- a/packages/components/src/core/styles/common/SDSAppTheme.ts
+++ b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -496,27 +496,39 @@ SDSLightAppTheme.borders = {
     table: `1px solid ${SDSLightAppTheme.colors.gray[300]}`,
   },
   beta: {
-    default: `1px solid ${SDSLightAppTheme.colors.purple[500]}`,
+    default: `1px solid ${SDSLightAppTheme.colors.purple[600]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.purple[600]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.purple[600]}`,
   },
   info: {
-    default: `1px solid ${SDSLightAppTheme.colors.blue[500]}`,
+    default: `1px solid ${SDSLightAppTheme.colors.blue[600]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.blue[600]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.blue[600]}`,
   },
   link: {
     dashed: `1px dashed`,
     solid: `1px solid`,
   },
   negative: {
-    default: `1px solid ${SDSLightAppTheme.colors.red[500]}`,
+    default: `1px solid ${SDSLightAppTheme.colors.red[600]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.red[600]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.red[600]}`,
   },
   neutral: {
     default: `1px solid ${SDSLightAppTheme.colors.gray[500]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.gray[500]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.gray[500]}`,
   },
   none: "none",
   notice: {
-    default: `1px solid ${SDSLightAppTheme.colors.yellow[500]}`,
+    default: `1px solid ${SDSLightAppTheme.colors.yellow[600]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.yellow[600]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.yellow[600]}`,
   },
   positive: {
-    default: `1px solid ${SDSLightAppTheme.colors.green[500]}`,
+    default: `1px solid ${SDSLightAppTheme.colors.green[600]}`,
+    extraThick: `4px solid ${SDSLightAppTheme.colors.green[600]}`,
+    thick: `2px solid ${SDSLightAppTheme.colors.green[600]}`,
   },
 };
 
@@ -543,27 +555,39 @@ SDSDarkAppTheme.borders = {
     table: `1px solid ${SDSDarkAppTheme.colors.gray[300]}`,
   },
   beta: {
-    default: `1px solid ${SDSDarkAppTheme.colors.purple[500]}`,
+    default: `1px solid ${SDSDarkAppTheme.colors.purple[600]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.purple[600]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.purple[600]}`,
   },
   info: {
-    default: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`,
+    default: `1px solid ${SDSDarkAppTheme.colors.blue[600]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.blue[600]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.blue[600]}`,
   },
   link: {
     dashed: `1px dashed`,
     solid: `1px solid`,
   },
   negative: {
-    default: `1px solid ${SDSDarkAppTheme.colors.red[500]}`,
+    default: `1px solid ${SDSDarkAppTheme.colors.red[600]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.red[600]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.red[600]}`,
   },
   neutral: {
     default: `1px solid ${SDSDarkAppTheme.colors.gray[500]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.gray[500]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.gray[500]}`,
   },
   none: "none",
   notice: {
-    default: `1px solid ${SDSDarkAppTheme.colors.yellow[500]}`,
+    default: `1px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.yellow[600]}`,
   },
   positive: {
-    default: `1px solid ${SDSDarkAppTheme.colors.green[500]}`,
+    default: `1px solid ${SDSDarkAppTheme.colors.green[600]}`,
+    extraThick: `4px solid ${SDSDarkAppTheme.colors.green[600]}`,
+    thick: `2px solid ${SDSDarkAppTheme.colors.green[600]}`,
   },
 };
 
diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
index c4cc5682b..495f992dd 100644
--- a/packages/components/src/core/styles/common/types.ts
+++ b/packages/components/src/core/styles/common/types.ts
@@ -280,6 +280,8 @@ export interface Border {
   open?: string;
   focused?: string;
   selected?: string;
+  thick?: string;
+  extraThick?: string;
 }
 
 export interface Borders {

From 486b2e740ad0f1fc9f23df856ae11eae26d710e4 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 1 Oct 2024 09:21:49 -0400
Subject: [PATCH 4/6] feat(Panel): implement panel component (#850)

* feat(panel): Implementation of the Panel component

* refactor(styles): refactor main component styles

* fix(a11y): fix a11y errors

* refactor(panel): add support for custom close button and write tests

* fix(panel): fix A11y errors

* refactor(panel): change prop name to closeButtonComponent

* refactor(panel): fix test snapshots

* refactor(panel): refactor Panel component based on code review comments
---
 .../src/core/Panel/__storybook__/constants.ts |   6 +
 .../Panel/__storybook__/index.stories.tsx     |  71 ++++++++++
 .../stories/customCloseButton.tsx             |  56 ++++++++
 .../Panel/__storybook__/stories/default.tsx   | 125 ++++++++++++++++++
 .../core/Panel/__storybook__/stories/test.tsx |  10 ++
 .../Panel/__tests__/Panel.namespace-test.tsx  |  18 +++
 .../__snapshots__/index.test.tsx.snap         |  20 +++
 .../src/core/Panel/__tests__/index.test.tsx   | 124 +++++++++++++++++
 .../Panel/components/PanelHeader/index.tsx    |  13 ++
 .../Panel/components/PanelHeader/style.ts     |  19 +++
 .../components/PanelHeaderClose/index.tsx     |  28 ++++
 .../components/PanelHeaderClose/style.ts      |   7 +
 packages/components/src/core/Panel/index.tsx  |  93 +++++++++++++
 packages/components/src/core/Panel/style.ts   | 103 +++++++++++++++
 .../core/styles/common/makeThemeOptions.ts    |   5 +
 packages/components/src/index.ts              |   2 +
 16 files changed, 700 insertions(+)
 create mode 100644 packages/components/src/core/Panel/__storybook__/constants.ts
 create mode 100644 packages/components/src/core/Panel/__storybook__/index.stories.tsx
 create mode 100644 packages/components/src/core/Panel/__storybook__/stories/customCloseButton.tsx
 create mode 100644 packages/components/src/core/Panel/__storybook__/stories/default.tsx
 create mode 100644 packages/components/src/core/Panel/__storybook__/stories/test.tsx
 create mode 100644 packages/components/src/core/Panel/__tests__/Panel.namespace-test.tsx
 create mode 100644 packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/components/src/core/Panel/__tests__/index.test.tsx
 create mode 100644 packages/components/src/core/Panel/components/PanelHeader/index.tsx
 create mode 100644 packages/components/src/core/Panel/components/PanelHeader/style.ts
 create mode 100644 packages/components/src/core/Panel/components/PanelHeaderClose/index.tsx
 create mode 100644 packages/components/src/core/Panel/components/PanelHeaderClose/style.ts
 create mode 100644 packages/components/src/core/Panel/index.tsx
 create mode 100644 packages/components/src/core/Panel/style.ts

diff --git a/packages/components/src/core/Panel/__storybook__/constants.ts b/packages/components/src/core/Panel/__storybook__/constants.ts
new file mode 100644
index 000000000..594509c77
--- /dev/null
+++ b/packages/components/src/core/Panel/__storybook__/constants.ts
@@ -0,0 +1,6 @@
+export const PANEL_EXCLUDED_CONTROLS = [
+  "sdsType",
+  "position",
+  "width",
+  "disableScrollLock",
+];
diff --git a/packages/components/src/core/Panel/__storybook__/index.stories.tsx b/packages/components/src/core/Panel/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..2365673b2
--- /dev/null
+++ b/packages/components/src/core/Panel/__storybook__/index.stories.tsx
@@ -0,0 +1,71 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Panel } from "./stories/default";
+import { PANEL_EXCLUDED_CONTROLS } from "./constants";
+import { TestDemo } from "./stories/test";
+import { CustomHeaderAndCloseButtonDemo } from "./stories/customCloseButton";
+
+export default {
+  argTypes: {
+    position: {
+      control: {
+        type: "select",
+      },
+      options: ["left", "right", "bottom"],
+    },
+    sdsType: {
+      control: {
+        type: "select",
+      },
+      options: ["basic", "overlay"],
+    },
+    width: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: Panel,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+  title: "Components/Panel",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    position: "left",
+    sdsType: "basic",
+    width: "320px",
+  },
+};
+
+// With Custom Close Button and Header
+
+export const CustomHeaderAndCloseButton = {
+  parameters: {
+    controls: {
+      exclude: PANEL_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <CustomHeaderAndCloseButtonDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: PANEL_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Panel/__storybook__/stories/customCloseButton.tsx b/packages/components/src/core/Panel/__storybook__/stories/customCloseButton.tsx
new file mode 100644
index 000000000..9c1825371
--- /dev/null
+++ b/packages/components/src/core/Panel/__storybook__/stories/customCloseButton.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Args } from "@storybook/react";
+import RawPanel from "src/core/Panel";
+import Button from "src/core/Button";
+import { Box, Typography } from "@mui/material";
+import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const CustomHeaderAndCloseButtonDemo = (props: Args): JSX.Element => {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <>
+      <Box sx={{ padding: 4 }}>
+        <Button
+          sdsStyle="icon"
+          sdsSize="medium"
+          sdsType="primary"
+          icon="InfoCircle"
+          onClick={() => {
+            setOpen(true);
+          }}
+        />
+      </Box>
+
+      <RawPanel
+        sdsType="overlay"
+        open={open}
+        closeButtonOnClick={() => {
+          setOpen(false);
+        }}
+        HeaderComponent={
+          <Typography
+            variant="h3"
+            sx={{ margin: "0 !important", padding: "6px 0 !important" }}
+          >
+            Panel Header
+          </Typography>
+        }
+        CloseButtonComponent={
+          <Button
+            sdsStyle="icon"
+            sdsSize="medium"
+            sdsType="secondary"
+            icon="ChevronLeft"
+            data-testid="panel-close-button"
+            aria-label="Panel Toggle"
+          />
+        }
+        data-testid="panel"
+        {...props}
+      >
+        {LONG_LOREM_IPSUM}
+      </RawPanel>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Panel/__storybook__/stories/default.tsx b/packages/components/src/core/Panel/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..4f67f3afc
--- /dev/null
+++ b/packages/components/src/core/Panel/__storybook__/stories/default.tsx
@@ -0,0 +1,125 @@
+import { Box, useTheme } from "@mui/material";
+import { Args } from "@storybook/react";
+import React, { useState } from "react";
+import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import Button from "src/core/Button";
+import Callout from "src/core/Callout";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+import RawPanel, { PanelProps } from "src/core/Panel";
+
+const InvalidBasicPanelPropsError = (
+  <Callout intent="negative">
+    <CalloutTitle>Invalid Props!</CalloutTitle>
+    <p>
+      The <strong>Basic</strong> Panel only supports <strong>left</strong> or{" "}
+      <strong>right</strong> positions. Please update the{" "}
+      <strong>position</strong> prop to one of these valid values.
+    </p>
+  </Callout>
+);
+
+const Main = (
+  props: PanelProps & { open: boolean; children?: React.ReactNode }
+) => {
+  const { open, sdsType, position, children, width } = props;
+
+  const margin =
+    sdsType === "basic"
+      ? position === "left"
+        ? `0 0 0 ${width}`
+        : position === "right"
+          ? `0 ${width} 0 0`
+          : "0" // Default to 0 if neither left nor right
+      : "0"; // Default to 0 for non-basic panels
+
+  return (
+    <Box
+      sx={{
+        margin: open ? margin : "none",
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const Panel = (props: Args): JSX.Element => {
+  const { sdsType, position } = props;
+
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setOpen(newOpen);
+  };
+
+  const DrawerList = (
+    <Box
+      sx={{
+        alignItems: "center",
+        border: `dashed 1px ${theme?.palette?.sds?.base?.divider}`,
+        color: theme?.palette?.sds?.base?.textSecondary,
+        display: "flex",
+        height: "100%",
+        justifyContent: "center",
+        width: "100%",
+      }}
+      role="presentation"
+    >
+      [Panel Content]
+    </Box>
+  );
+
+  const HeaderComponent = (
+    <Box
+      sx={{
+        alignItems: "center",
+        border: `dashed 1px ${theme?.palette?.sds?.base?.divider}`,
+        color: theme?.palette?.sds?.base?.textSecondary,
+        display: "flex",
+        height: "100%",
+        justifyContent: "center",
+        width: "100%",
+      }}
+    >
+      [Panel Header]
+    </Box>
+  );
+
+  if (sdsType === "basic" && position === "bottom") {
+    return InvalidBasicPanelPropsError;
+  }
+
+  return (
+    <>
+      <RawPanel
+        sdsType={sdsType}
+        open={open}
+        closeButtonOnClick={toggleDrawer(false)}
+        HeaderComponent={HeaderComponent}
+        disableScrollLock={true}
+        ModalProps={{ disableScrollLock: true }}
+        {...props}
+      >
+        {DrawerList}
+      </RawPanel>
+
+      <Main open={open} {...props}>
+        <Button
+          sdsType="primary"
+          sdsStyle="icon"
+          icon="InfoCircle"
+          onClick={() => setOpen((prev) => !prev)}
+          aria-label="Panel Toggle"
+        >
+          Toggle Panel
+        </Button>
+
+        <p>{LONG_LOREM_IPSUM}</p>
+        <p>{LONG_LOREM_IPSUM}</p>
+        <p>{LONG_LOREM_IPSUM}</p>
+        <p>{LONG_LOREM_IPSUM}</p>
+      </Main>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Panel/__storybook__/stories/test.tsx b/packages/components/src/core/Panel/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..0fb63d5d7
--- /dev/null
+++ b/packages/components/src/core/Panel/__storybook__/stories/test.tsx
@@ -0,0 +1,10 @@
+import { Args } from "@storybook/react";
+import RawPanel from "src/core/Panel";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <RawPanel open={true} data-testid="panel" {...props}>
+      [Panel Content]
+    </RawPanel>
+  );
+};
diff --git a/packages/components/src/core/Panel/__tests__/Panel.namespace-test.tsx b/packages/components/src/core/Panel/__tests__/Panel.namespace-test.tsx
new file mode 100644
index 000000000..04d8206e0
--- /dev/null
+++ b/packages/components/src/core/Panel/__tests__/Panel.namespace-test.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Panel, PanelProps } from "@czi-sds/components";
+import { noop } from "src/common/utils";
+
+const PanelNameSpaceTest = (props: PanelProps) => {
+  return (
+    <Panel
+      sdsType="overlay"
+      width="400px"
+      position="left"
+      HeaderComponent={<p>Header</p>}
+      CloseButtonComponent={<button>Close</button>}
+      closeButtonOnClick={noop}
+    >
+      This is a Basic Panel!
+    </Panel>
+  );
+};
diff --git a/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..07ef7858d
--- /dev/null
+++ b/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Panel /> Default story renders snapshot 1`] = `
+<div
+  class="MuiDrawer-root MuiDrawer-docked css-1mn3xem-MuiDrawer-docked"
+  headercomponent="[object Object]"
+>
+  <div
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
+    style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
+  >
+    <div
+      class="MuiBox-root css-gblytq"
+      role="presentation"
+    >
+      [Panel Content]
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/core/Panel/__tests__/index.test.tsx b/packages/components/src/core/Panel/__tests__/index.test.tsx
new file mode 100644
index 000000000..d9af24a79
--- /dev/null
+++ b/packages/components/src/core/Panel/__tests__/index.test.tsx
@@ -0,0 +1,124 @@
+import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { composeStories } from "@storybook/react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import * as stories from "../__storybook__/index.stories";
+import Button from "src/core/Button";
+
+// Returns a component that already contain all decorators from story level, meta level and global level.
+const { Test } = composeStories(stories);
+
+const PAPER_ROOT_CLASS_NAME = "MuiPaper-root";
+const MUI_DRAWER_ANCHOR_LEFT_CLASS_NAME = "MuiDrawer-paperAnchorLeft";
+const MUI_DRAWER_ANCHOR_RIGHT_CLASS_NAME = "MuiDrawer-paperAnchorRight";
+const MUI_DRAWER_ANCHOR_BOTTOM_CLASS_NAME = "MuiDrawer-paperAnchorBottom";
+
+describe("<Panel />", () => {
+  generateSnapshots(stories);
+
+  it("renders panel component", () => {
+    render(<Test {...Test.args} />);
+    const panelElement = screen.getByTestId("panel");
+    expect(panelElement).not.toBeNull();
+  });
+
+  it("renders with overlay header and close button when sdsType is 'overlay'", () => {
+    render(
+      <Test
+        sdsType="overlay"
+        HeaderComponent={<p>Header</p>}
+        CloseButtonComponent={
+          <Button
+            sdsStyle="icon"
+            sdsSize="medium"
+            sdsType="secondary"
+            icon="ChevronLeft"
+            data-testid="panel-close-button"
+          />
+        }
+      />
+    );
+
+    // Check if HeaderComponent is rendered
+    const headerElement = screen.getByText("Header");
+    expect(headerElement).toBeInTheDocument();
+
+    // Check if close button is rendered
+    const closeButton = screen.getByTestId("panel-close-button");
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it("renders without header when sdsType is 'basic'", () => {
+    render(<Test sdsType="basic" />);
+
+    // The header component should not be rendered for 'basic' panels
+    const headerElement = screen.queryByText("Header");
+    expect(headerElement).not.toBeInTheDocument();
+  });
+
+  it("applies the correct position based on the 'position' prop", () => {
+    const { rerender } = render(<Test position="left" />);
+
+    let panelElementPaper = screen
+      .getByTestId("panel")
+      .getElementsByClassName(PAPER_ROOT_CLASS_NAME)[0];
+    expect(panelElementPaper).toHaveClass(MUI_DRAWER_ANCHOR_LEFT_CLASS_NAME);
+
+    rerender(<Test position="right" />);
+    panelElementPaper = screen
+      .getByTestId("panel")
+      .getElementsByClassName(PAPER_ROOT_CLASS_NAME)[0];
+    expect(panelElementPaper).toHaveClass(MUI_DRAWER_ANCHOR_RIGHT_CLASS_NAME);
+
+    rerender(<Test sdsType="overlay" position="bottom" />);
+    panelElementPaper = screen
+      .getByTestId("panel")
+      .getElementsByClassName(PAPER_ROOT_CLASS_NAME)[0];
+    expect(panelElementPaper).toHaveClass(MUI_DRAWER_ANCHOR_BOTTOM_CLASS_NAME);
+  });
+
+  it("calls the onClick handler when close button is clicked", () => {
+    const handleClose = jest.fn();
+
+    render(
+      <Test
+        sdsType="overlay"
+        closeButtonOnClick={handleClose}
+        HeaderComponent={<div>Header</div>}
+        CloseButtonComponent={
+          <Button
+            sdsStyle="icon"
+            sdsSize="medium"
+            sdsType="secondary"
+            icon="ChevronLeft"
+            data-testid="panel-close-button"
+          />
+        }
+      />
+    );
+
+    const closeButton = screen.getByTestId("panel-close-button");
+    fireEvent.click(closeButton);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders with default 'sdsType' and 'position' props", () => {
+    render(<Test />);
+
+    const panelElementPaper = screen
+      .getByTestId("panel")
+      .getElementsByClassName(PAPER_ROOT_CLASS_NAME)[0];
+
+    // Default props: sdsType should be 'basic' and position should be 'left'
+    expect(panelElementPaper).toHaveClass(MUI_DRAWER_ANCHOR_LEFT_CLASS_NAME);
+  });
+
+  it("does not accept position='bottom' for sdsType='basic', should default to position='left'", () => {
+    // Render the BasicPanel with an invalid position 'bottom'
+    render(<Test sdsType="basic" position="bottom" />);
+
+    const panelElement = screen.getByTestId("panel");
+
+    expect(panelElement).not.toHaveClass(MUI_DRAWER_ANCHOR_BOTTOM_CLASS_NAME);
+  });
+});
diff --git a/packages/components/src/core/Panel/components/PanelHeader/index.tsx b/packages/components/src/core/Panel/components/PanelHeader/index.tsx
new file mode 100644
index 000000000..ac864b8a2
--- /dev/null
+++ b/packages/components/src/core/Panel/components/PanelHeader/index.tsx
@@ -0,0 +1,13 @@
+import { StyledPanelHeader } from "./style";
+
+export interface PanelHeaderProps {
+  children?: React.ReactNode;
+}
+
+const PanelHeader = (props: PanelHeaderProps) => {
+  const { children } = props;
+
+  return <StyledPanelHeader>{children}</StyledPanelHeader>;
+};
+
+export default PanelHeader;
diff --git a/packages/components/src/core/Panel/components/PanelHeader/style.ts b/packages/components/src/core/Panel/components/PanelHeader/style.ts
new file mode 100644
index 000000000..63ef866f4
--- /dev/null
+++ b/packages/components/src/core/Panel/components/PanelHeader/style.ts
@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
+import { PanelHeaderProps } from ".";
+
+export interface ExtraPanelHeaderProps
+  extends CommonThemeProps,
+    PanelHeaderProps {}
+
+export const StyledPanelHeader = styled("div")`
+  ${(props: ExtraPanelHeaderProps) => {
+    const spaces = getSpaces(props);
+
+    return `
+      width: 100%;
+      height: 100%;
+      margin-right: ${spaces?.l}px;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Panel/components/PanelHeaderClose/index.tsx b/packages/components/src/core/Panel/components/PanelHeaderClose/index.tsx
new file mode 100644
index 000000000..42c4e0e9b
--- /dev/null
+++ b/packages/components/src/core/Panel/components/PanelHeaderClose/index.tsx
@@ -0,0 +1,28 @@
+import Button from "src/core/Button";
+import { StyledPanelHeaderClose } from "./style";
+
+export interface PanelHeaderCloseProps {
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  CloseButtonComponent?: React.ReactNode;
+}
+
+const PanelHeaderClose = (props: PanelHeaderCloseProps) => {
+  const { onClick, CloseButtonComponent } = props;
+
+  return (
+    <StyledPanelHeaderClose onClick={onClick}>
+      {CloseButtonComponent ? (
+        CloseButtonComponent
+      ) : (
+        <Button
+          sdsStyle="icon"
+          sdsType="tertiary"
+          icon="XMark"
+          aria-label="Panel Toggle"
+        />
+      )}
+    </StyledPanelHeaderClose>
+  );
+};
+
+export default PanelHeaderClose;
diff --git a/packages/components/src/core/Panel/components/PanelHeaderClose/style.ts b/packages/components/src/core/Panel/components/PanelHeaderClose/style.ts
new file mode 100644
index 000000000..4ebb4163e
--- /dev/null
+++ b/packages/components/src/core/Panel/components/PanelHeaderClose/style.ts
@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const StyledPanelHeaderClose = styled("div")`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+`;
diff --git a/packages/components/src/core/Panel/index.tsx b/packages/components/src/core/Panel/index.tsx
new file mode 100644
index 000000000..5ab0eda97
--- /dev/null
+++ b/packages/components/src/core/Panel/index.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { StyledDrawer, StyledHeaderComponent } from "./style";
+import { DrawerProps } from "@mui/material";
+import PanelHeader from "./components/PanelHeader";
+import PanelHeaderClose, {
+  PanelHeaderCloseProps,
+} from "./components/PanelHeaderClose";
+
+export interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
+  sdsType?: "basic"; // Discriminator
+  position?: "left" | "right";
+  width?: number | string;
+}
+
+export interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
+  sdsType?: "overlay"; // Discriminator
+  position?: "left" | "right" | "bottom";
+  width?: number | string;
+  HeaderComponent?: React.ReactNode;
+  closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
+  CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
+}
+
+// Discriminated Union
+export type PanelProps = BasicPanelProps | OverlayPanelProps;
+
+// Type guard to narrow the type
+function isOverlayPanelProps(props: PanelProps): props is OverlayPanelProps {
+  return props.sdsType === "overlay";
+}
+
+export const PANEL_BASIC_MIN_WIDTH_PX = 240;
+export const PANEL_OVERLAY_MIN_WIDTH_PX = 320;
+
+/**
+ * @see https://mui.com/material-ui/react-drawer/
+ */
+
+const Panel = React.forwardRef<HTMLDivElement, PanelProps>((props, ref) => {
+  const { children, sdsType = "basic", position = "left", width } = props;
+
+  const drawerWidth = width
+    ? width
+    : sdsType === "basic"
+      ? PANEL_BASIC_MIN_WIDTH_PX
+      : PANEL_OVERLAY_MIN_WIDTH_PX;
+  const drawerVariant = sdsType === "basic" ? "persistent" : "temporary";
+
+  // (masoudmanson): The basic Panel only supports "left" or "right" positions.
+  // If a "bottom" position is provided for a basic Panel, it defaults to "left".
+  const drawerAnchor =
+    sdsType === "overlay"
+      ? position
+      : position === "bottom"
+        ? "left"
+        : position;
+
+  return (
+    /**
+     * (masoudmanson): We need the props after {...props} to override any
+     * user-defined values. Placing them afterward ensures that our values
+     * take priority.
+     *
+     * For example, the SDS design specifies that a BasicPanel should only be anchored
+     * to the left or right. To prevent users from positioning it at the bottom,
+     * the 'anchor' prop must always be set to our predefined value.
+     */
+    <StyledDrawer
+      {...props}
+      ref={ref}
+      anchor={drawerAnchor}
+      variant={drawerVariant}
+      width={drawerWidth}
+    >
+      {isOverlayPanelProps(props) && (
+        <StyledHeaderComponent>
+          {props?.HeaderComponent && (
+            <PanelHeader>{props?.HeaderComponent}</PanelHeader>
+          )}
+          {
+            <PanelHeaderClose
+              onClick={props?.closeButtonOnClick}
+              CloseButtonComponent={props?.CloseButtonComponent}
+            />
+          }
+        </StyledHeaderComponent>
+      )}
+      {children}
+    </StyledDrawer>
+  );
+});
+
+export default Panel;
diff --git a/packages/components/src/core/Panel/style.ts b/packages/components/src/core/Panel/style.ts
new file mode 100644
index 000000000..e430cfd99
--- /dev/null
+++ b/packages/components/src/core/Panel/style.ts
@@ -0,0 +1,103 @@
+import styled from "@emotion/styled";
+import { Drawer, drawerClasses } from "@mui/material";
+import {
+  CommonThemeProps,
+  getSemanticColors,
+  getShadows,
+  getSpaces,
+} from "../styles";
+import {
+  PANEL_BASIC_MIN_WIDTH_PX,
+  PANEL_OVERLAY_MIN_WIDTH_PX,
+  PanelProps,
+} from ".";
+import { css, SerializedStyles } from "@emotion/react";
+
+type PanelExtraProps = PanelProps & CommonThemeProps;
+
+const doNotForwardProps = [
+  "sdsType",
+  "position",
+  "width",
+  "headerComponent",
+  "onClick",
+  "disableScrollLock",
+  "closeButtonOnClick",
+  "CloseButtonComponent",
+];
+
+const basicPanelStyles = (props: PanelExtraProps): SerializedStyles => {
+  const semanticColors = getSemanticColors(props);
+  const spaces = getSpaces(props);
+
+  return css`
+    .${drawerClasses.paper} {
+      background-color: ${semanticColors?.base?.surfacePrimary};
+      padding: ${spaces?.l}px;
+      min-width: ${PANEL_BASIC_MIN_WIDTH_PX}px;
+      min-height: ${PANEL_BASIC_MIN_WIDTH_PX}px;
+    }
+  `;
+};
+
+const overlayPanelStyles = (props: PanelExtraProps): SerializedStyles => {
+  const semanticColors = getSemanticColors(props);
+  const spaces = getSpaces(props);
+  const shadows = getShadows(props);
+
+  return css`
+    .${drawerClasses.paper} {
+      background-color: ${semanticColors?.base?.surfacePrimary};
+      padding: ${spaces?.xl}px;
+      min-width: ${PANEL_OVERLAY_MIN_WIDTH_PX}px;
+      min-height: ${PANEL_OVERLAY_MIN_WIDTH_PX}px;
+      box-shadow: ${shadows?.l};
+      background-image: none;
+    }
+  `;
+};
+
+export const StyledDrawer = styled(Drawer, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
+  ${(props: PanelExtraProps) => {
+    const { sdsType = "basic", anchor = "left", width } = props;
+    const semanticColors = getSemanticColors(props);
+    const spaces = getSpaces(props);
+
+    const widthString = typeof width === "number" ? `${width}px` : width;
+
+    const panelWidth = anchor !== "bottom" ? widthString : "100%";
+    const panelHeight = anchor !== "bottom" ? "100%" : widthString;
+
+    return css`
+      .${drawerClasses.root} {
+        border-color: ${semanticColors?.base?.divider};
+        border-width: ${spaces?.xxxs}px;
+        height: ${panelHeight};
+        width: ${panelWidth};
+      }
+
+      .${drawerClasses.paper} {
+        height: ${panelHeight};
+        width: ${panelWidth};
+      }
+
+      ${sdsType === "basic" && basicPanelStyles(props)}
+      ${sdsType === "overlay" && overlayPanelStyles(props)}
+    `;
+  }}
+`;
+
+export const StyledHeaderComponent = styled("div")`
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
+
+    return css`
+      margin-bottom: ${spaces?.xxl}px;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
index b938e9817..69da63ca7 100644
--- a/packages/components/src/core/styles/common/makeThemeOptions.ts
+++ b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -268,6 +268,11 @@ export function makeThemeOptions(
           disableRipple: true,
         },
       },
+      MuiDrawer: {
+        defaultProps: {
+          hideBackdrop: true,
+        },
+      },
       MuiLink: {
         defaultProps: {
           underline: "hover",
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 46af276c3..4f90c7cd0 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -81,6 +81,8 @@ export * from "./core/Notification";
 export { default as Notification } from "./core/Notification";
 export * from "./core/Pagination";
 export { default as Pagination } from "./core/Pagination";
+export * from "./core/Panel";
+export { default as Panel } from "./core/Panel";
 export * from "./core/SegmentedControl";
 export { default as SegmentedControl } from "./core/SegmentedControl";
 export * from "./core/Table";

From c1b736c91f4571baf4d248de30dd736a4027a211 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 1 Oct 2024 09:35:06 -0400
Subject: [PATCH 5/6] fix(dropdownmenu): fix header visibility and extra margin
 issue (#855)

---
 packages/components/src/core/DropdownMenu/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx
index 31a1250be..0d2b98d3e 100644
--- a/packages/components/src/core/DropdownMenu/index.tsx
+++ b/packages/components/src/core/DropdownMenu/index.tsx
@@ -174,10 +174,12 @@ const DropdownMenu = <
           {...ClickAwayListenerProps}
         >
           <StyledDropdownMenuAutocompleteWrapper>
-            <StyledDropdownMenuHeader search={search}>
-              {title && <StyledHeaderTitle>{title}</StyledHeaderTitle>}
-              {headerComponentSlot && <>{headerComponentSlot}</>}
-            </StyledDropdownMenuHeader>
+            {(title || headerComponentSlot) && (
+              <StyledDropdownMenuHeader search={search}>
+                {title && <StyledHeaderTitle>{title}</StyledHeaderTitle>}
+                {headerComponentSlot && <>{headerComponentSlot}</>}
+              </StyledDropdownMenuHeader>
+            )}
             {anchorEl && (
               <Autocomplete
                 label={label}

From 0efb03c1b1e1f68036146d9406f5fae1c5b7ca29 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Wed, 2 Oct 2024 16:26:54 -0400
Subject: [PATCH 6/6] fix(inputtext): remove min-width from InputText and
 InputSearch (#858)

* fix(inputtext): removed min-width from InputText and InputSearch

* refactor(inputsearch): fix design review bugs
---
 .../__tests__/__snapshots__/index.test.tsx.snap        |  8 ++++----
 .../src/core/Icon/__storybook__/stories/iconBank.tsx   |  1 +
 .../core/InputSearch/__storybook__/stories/default.tsx |  1 +
 .../core/InputSearch/__storybook__/stories/test.tsx    |  2 ++
 packages/components/src/core/InputSearch/style.ts      | 10 ++++++++++
 .../core/InputText/__storybook__/stories/default.tsx   |  1 +
 packages/components/src/core/InputText/style.ts        |  6 +++++-
 7 files changed, 24 insertions(+), 5 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
index 3134aae34..f00aeed5f 100644
--- 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-1p7z5as-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1dk6d19-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-1o2qh3k-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-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-1o2qh3k-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-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-1vdkloj-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-hmaycg-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div
diff --git a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
index ee113144e..e30c8c15c 100644
--- a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
+++ b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
@@ -223,6 +223,7 @@ export const IconBankDemo = (props: Args): JSX.Element => {
         placeholder="Search icons"
         name="square-input-search"
         onChange={searchIconHandler}
+        sx={{ width: "210px" }}
       />
       {icons.length ? (
         <IconBankWrapper>
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
index 14de6ffd9..2c4aee1fe 100644
--- a/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
@@ -17,6 +17,7 @@ export const InputSearch = (props: Args): JSX.Element => {
       intent={intent}
       handleSubmit={handleSubmit}
       name="input-search-name"
+      sx={{ width: "200px" }}
     />
   );
 };
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
index c5929e7f2..10ccb32ee 100644
--- a/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
@@ -13,6 +13,7 @@ export const TestDemo = (props: Args): JSX.Element => {
         data-testid="inputSearchRound"
         handleSubmit={action("onSubmit")}
         name="round-search"
+        sx={{ width: "200px" }}
         {...props}
       />
       <RawInputSearch
@@ -23,6 +24,7 @@ export const TestDemo = (props: Args): JSX.Element => {
         data-testid="inputSearchSquare"
         handleSubmit={action("onSubmit")}
         name="square-search"
+        sx={{ width: "200px" }}
         {...props}
       />
       {/* @ts-expect-error testing fail state */}
diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
index 8b2c42504..4f5319b26 100644
--- a/packages/components/src/core/InputSearch/style.ts
+++ b/packages/components/src/core/InputSearch/style.ts
@@ -156,6 +156,16 @@ export const StyledSearchBase = styled(TextField, {
       .${outlinedInputClasses.root} {
         padding: 0 ${spaces?.m}px;
         background-color: ${semanticColors?.base?.surfacePrimary};
+        width: 100%;
+
+        .${outlinedInputClasses.input} {
+          padding-right: ${spaces?.l}px;
+        }
+
+        .MuiInputAdornment-positionEnd {
+          position: absolute;
+          right: ${spaces?.m}px;
+        }
 
         .${outlinedInputClasses.notchedOutline} {
           border: 1px solid ${semanticColors?.base?.border};
diff --git a/packages/components/src/core/InputText/__storybook__/stories/default.tsx b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
index dd1e2e8ae..c071d1bc8 100644
--- a/packages/components/src/core/InputText/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
@@ -15,6 +15,7 @@ export const InputText = (props: Args): JSX.Element => {
       disabled={disabled}
       name="input-text-name"
       autoComplete="off"
+      sx={{ width: "200px" }}
     />
   );
 };
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index 8eeab6d30..8bfe48c03 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -125,9 +125,12 @@ export const StyledInputBase = styled(TextField, {
     return css`
       margin-bottom: ${spaces?.l}px;
       margin-right: ${spaces?.m}px;
-      min-width: 160px;
       display: block;
 
+      .${outlinedInputClasses.root} {
+        width: 100%;
+      }
+
       .${outlinedInputClasses.inputSizeSmall} {
         ${fontBodyXs(props)}
         padding: ${spaces?.xs}px ${spaces?.m}px;
@@ -144,6 +147,7 @@ export const StyledInputBase = styled(TextField, {
       .${outlinedInputClasses.input} {
         outline: none;
         border-radius: 4px;
+        width: 100%;
       }
 
       &.user-is-tabbing .${outlinedInputClasses.input} {