Skip to content

Commit

Permalink
[ui] Menu divider header text (#17853)
Browse files Browse the repository at this point in the history
## 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.
  • Loading branch information
hellendag authored Nov 9, 2023
1 parent 458a145 commit 20e22c0
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down

1 comment on commit 20e22c0

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-ly4emytuo-elementl.vercel.app

Built with commit 20e22c0.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.