feat: add error status to DropdownMenuItem

chanzuckerberg · Jun 9, 2022 · b4a4695 · b4a4695
1 parent cfd2e80
commit b4a4695
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -41,6 +41,13 @@ a.card {
  */
 .card--raised {
   box-shadow: var(--eds-box-shadow-md);
+  border-color: var(--eds-theme-color-background-neutral-default);
+  transition: border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+  &:hover,
+  &:focus {
+    border-color: var(--eds-theme-color-border-neutral-subtle);
+  }
 }
 
 /**

diff --git a/src/components/DropdownMenu/DropdownMenu.module.css b/src/components/DropdownMenu/DropdownMenu.module.css
@@ -68,9 +68,9 @@
   width: 100%;
   padding: var(--eds-size-1-and-half) var(--eds-size-2);
   text-align: left;
-  cursor: pointer;
+
   color: var(--eds-theme-color-text-neutral-default);
-  transition: background var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition: all var(--eds-anim-fade-quick) var(--eds-anim-ease);
 
   &:hover,
   &:focus {
@@ -88,4 +88,8 @@
   .dropdown-menu__item--lined & {
     border-bottom: 1px solid var(--eds-theme-color-border-neutral-subtle);
   }
+
+  .dropdown-menu__item--error & {
+    color: var(--eds-theme-color-text-utility-error);
+  }
 }
diff --git a/src/components/DropdownMenu/DropdownMenu.stories.tsx b/src/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -48,3 +48,24 @@ export const WithIcons = () => (
     </DropdownMenuItem>
   </DropdownMenu>
 );
+
+export const WithDeleteButton = () => (
+  <DropdownMenu>
+    <DropdownMenuItem>
+      <Icon name="schedule" purpose="decorative" size="1.25rem" />
+      Item 1
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon name="schedule" purpose="decorative" size="1.25rem" />
+      Item 2
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon name="schedule" purpose="decorative" size="1.25rem" />
+      Item 3
+    </DropdownMenuItem>
+    <DropdownMenuItem status="error">
+      <Icon name="schedule" purpose="decorative" size="1.25rem" />
+      Delete Item
+    </DropdownMenuItem>
+  </DropdownMenu>
+);
diff --git a/src/components/DropdownMenuItem/DropdownMenuItem.tsx b/src/components/DropdownMenuItem/DropdownMenuItem.tsx
@@ -28,6 +28,11 @@ export interface Props {
    * On hover handler for component
    */
   onHover?: MouseEventHandler;
+  /**
+   * Status variant
+   * - **error** yields a dropdown item with red text
+   */
+  status?: 'error';
   /**
    * Stylistic variations of the GridL
    * - **lined** yields a dropdown item with a border bottom
@@ -45,7 +50,10 @@ export interface Props {
  * Dropdown menu item within `DropdownMenu`
  */
 export const DropdownMenuItem = React.forwardRef<HTMLLIElement, Props>(
-  ({ align, className, href, children, variant, onClick, ...other }, ref) => {
+  (
+    { align, className, href, children, variant, onClick, status, ...other },
+    ref,
+  ) => {
     const TagName = createTagName();
 
     function createTagName() {
@@ -61,6 +69,7 @@ export const DropdownMenuItem = React.forwardRef<HTMLLIElement, Props>(
       className,
       align === 'top-left' && styles['dropdown-menu__item--align-top-left'],
       variant === 'lined' && styles['dropdown-menu__item--lined'],
+      status === 'error' && styles['dropdown-menu__item--error'],
     );
 
     return (