paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

Merge pull request #29351 from backstage/canon-fix-menu-styles

Browse Source 
Canon - Fix Menu styles
This commit is contained in:
Charles de Dreuille
2025-03-24 18:52:41 +00:00
committed by GitHub
parent 660b199fb3 51b9a1c14d
commit ad41ba7dc6
6 changed files with 97 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/cuddly-mirrors-ask.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Updated styles for the Menu component in Canon.
packages/canon/css/components.css
+19 -70
View File
@@ -481,101 +481,50 @@
margin: 0;
}
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
packages/canon/css/menu.css
+19 -70
View File
@@ -1,98 +1,47 @@
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
packages/canon/css/styles.css
+19 -70
View File
@@ -9682,101 +9682,50 @@
margin: 0;
}
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
packages/canon/src/components/Menu/Menu.stories.tsx
+16 -2
View File
@@ -17,6 +17,7 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Menu } from './Menu';
import { Button } from '../Button';
const meta = {
title: 'Components/Menu',
@@ -30,9 +31,15 @@ export const Default: Story = {
args: {
children: (
<>
<Menu.Trigger>Menu</Menu.Trigger>
<Menu.Trigger
render={props => (
<Button {...props} size="small">
Menu
</Button>
)}
/>
<Menu.Portal>
<Menu.Positioner>
<Menu.Positioner sideOffset={8} align="start">
<Menu.Popup>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
@@ -44,3 +51,10 @@ export const Default: Story = {
),
},
};
export const Open: Story = {
args: {
...Default.args,
open: true,
},
};
packages/canon/src/components/Menu/Menu.styles.css
+19 -71
View File
@@ -1,54 +1,17 @@
.canon-MenuTrigger {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
height: 2.5rem;
padding: 0 0.875rem;
margin: 0;
outline: 0;
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
background-color: var(--color-gray-50);
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
color: var(--color-gray-900);
user-select: none;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active {
background-color: var(--color-gray-100);
}
&[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
padding-block: 0.25rem;
padding: var(--canon-space-2);
border-radius: 0.375rem;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
outline: none;
overflow: hidden;
transform-origin: var(--transform-origin);
max-width: 340px;
transition: transform 150ms, opacity 150ms;
&[data-starting-style],
@@ -56,44 +19,29 @@
opacity: 0;
transform: scale(0.9);
}
@media (prefers-color-scheme: light) {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200),
0px 4px 6px -4px var(--color-gray-200);
}
@media (prefers-color-scheme: dark) {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
.canon-MenuItem {
outline: 0;
cursor: default;
user-select: none;
padding-block: 0.5rem;
padding-left: 1rem;
padding-right: 2rem;
display: flex;
font-size: 0.875rem;
line-height: 1rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
text-decoration: none;
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
position: relative;
color: var(--color-gray-50);
}
&[data-highlighted]::before {
content: '';
z-index: -1;
position: absolute;
inset-block: 0;
inset-inline: 0.25rem;
border-radius: 0.25rem;
background-color: var(--color-gray-900);
background-color: var(--canon-bg-tint-hover);
}
}