From 20e22c0e2da31f27176c086d717bc98507b2414e Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com>
Date: Thu, 9 Nov 2023 09:06:55 -0600
Subject: [PATCH] [ui] Menu divider header text (#17853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary & Motivation

A little bit cleaner style for the MenuDivider title text. The current
style has awkward spacing, and the bold text makes it look like it could
be a clickable item when it's not.

Before:

<img width="456" alt="Screenshot 2023-11-09 at 8 53 57 AM"
src="https://github.com/dagster-io/dagster/assets/2823852/416b9834-07e8-4fe2-b566-4e47f049cfb5">

After:

<img width="514" alt="Screenshot 2023-11-09 at 8 46 27 AM"
src="https://github.com/dagster-io/dagster/assets/2823852/3f955495-84bf-4ced-ab1d-dcc80b67f3b5">

Storybook (with items that have icons):

<img width="209" alt="Screenshot 2023-11-09 at 8 56 45 AM"
src="https://github.com/dagster-io/dagster/assets/2823852/73d555a7-eafd-4b88-8d84-a89a855b1040">


## How I Tested These Changes

View Storybook example and Cloud feature.
---
 .../packages/ui-components/src/components/Menu.tsx   | 12 ++++++++++++
 .../src/components/__stories__/Menu.stories.tsx      | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
index 4e9f01d7ab036..044f6f55c71ac 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -104,6 +104,18 @@ export const MenuExternalLink = (props: MenuExternalLinkProps) => {
 export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.Gray100};
   margin: 2px 0;
+
+  :focus {
+    outline: none;
+  }
+
+  && h6 {
+    color: ${Colors.Gray500};
+    padding: 8px 6px 2px;
+    font-size: 12px;
+    font-weight: 300;
+    user-select: none;
+  }
 `;
 
 const StyledMenu = styled(BlueprintMenu)`
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx
index 79c08ef3ad9ed..1e7a76cc045d6 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx
@@ -37,6 +37,16 @@ export const Default = () => {
           <MenuItem intent="danger" icon="delete" text="Delete" />
         </Menu>
       </Container>
+      <Container style={{width: '180px'}}>
+        <Menu>
+          <MenuDivider title="Here you can save" />
+          <MenuItem icon="download_for_offline" text="Save" />
+          <MenuDivider title="Here you can attach" />
+          <MenuItem icon="attach_file" text="Attach" />
+          <MenuDivider title="Here you can delete" />
+          <MenuItem intent="danger" icon="delete" text="Delete" />
+        </Menu>
+      </Container>
     </Group>
   );
 };