Merge pull request #18 from gsoft-inc/feature/OR-156-menu-rebrand

Feat: [OR-156] Menu Rebrand
gsoft-inc · Oct 17, 2023 · 76077cc · 76077cc
2 parents 9ba7382 + 72171ea
commit 76077cc
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 62 deletions.
diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css
@@ -5,139 +5,148 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 
 .o-ui {
     --o-ui-menu-border-size: 1px;
-    --o-ui-menu-item-height: var(--o-ui-sz-5);
-    --o-ui-menu-item-checkmark-size: var(--o-ui-sz-2);
+    --o-ui-menu-item-height: 2rem;
+    --o-ui-menu-item-checkmark-size: 1rem;
+    --o-ui-menu-item-icon-size: 1rem;
+    --o-ui-menu-item-padding-right: calc(var(--hop-space-inset-lg) + var(--o-ui-menu-item-checkmark-size));
+    --o-ui-menu-item-description-color: var(--hop-neutral-text-weak);
+    --o-ui-menu-item-icon-color: var(--hop-neutral-icon);
 }
 
 .o-ui-menu {
-    background-color: var(--o-ui-bg-alias-surface);
+    background-color: var(--hop-neutral-surface);
     list-style-type: none;
-    padding: 0;
+    padding: var(--hop-space-inset-sm);
     margin: 0;
-    border-radius: var(--o-ui-br-2);
+    border: var(--o-ui-menu-border-size) solid var(--hop-neutral-border-weak);
+    border-radius: var(--hop-shape-rounded-md);
     width: max-content;
     min-width: 200px;
-    max-width: var(--o-ui-sz-16);
+    max-width: 20rem;
     height: max-content;
-    box-shadow: var(--o-ui-bs-alias-floating);
+    box-shadow: var(--hop-elevation-lifted);
     overflow-y: auto;
 }
 
 /* ITEM */
 .o-ui-menu-item {
+    color: var(--hop-neutral-text);
+    border-radius: var(--hop-shape-rounded-md);
     min-height: var(--o-ui-menu-item-height);
     list-style: none;
-    padding-right: var(--o-ui-sp-8);
-    padding-left: var(--o-ui-sp-3);
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-right: var(--o-ui-menu-item-padding-right);
+    padding-left: var(--hop-space-inset-md);
+    padding-block: 0;
     margin: 0;
     display: flex;
     align-items: center;
     cursor: pointer;
-    font-size: var(--o-ui-fs-3);
     position: relative;
 }
 
 .o-ui-menu-item.o-ui-menu-item-has-description {
-    --o-ui-menu-item-height: var(--o-ui-sz-7);
+    --o-ui-menu-item-height: 3.25rem;
     display: grid;
-    padding-top: var(--o-ui-sp-2);
-    padding-bottom: var(--o-ui-sp-2);
+    padding-block: 0.375rem;
     overflow-x: hidden;
     grid-template-columns: max-content 1fr;
     grid-template-rows: max-content max-content;
     grid-auto-flow: column;
     grid-template-areas:
         "aside label"
         "aside description";
+    row-gap: var(--hop-space-stack-xs);
+}
+
+/* ITEM | ICON */
+.o-ui-menu-item .o-ui-icon {
+    color: var(--o-ui-menu-item-icon-color);
+}
+
+.o-ui-menu-item .o-ui-icon:not(.o-ui-menu-item-checkmark) {
+    width: var(--o-ui-menu-item-icon-size);
+    height: var(--o-ui-menu-item-icon-size);
 }
 
 /* ITEM | ICON | START  */
 .o-ui-menu-item-start-icon {
-    margin-right: var(--o-ui-sp-2);
+    margin-right: var(--hop-space-inline-sm);
     grid-row-start: 1;
     grid-row-end: 3;
 }
 
 .o-ui-menu-item.o-ui-menu-item-has-description .o-ui-menu-item-start-icon {
-    margin-right: var(--o-ui-sp-2);
     align-self: start;
 }
 
 /* ITEM | ICON | END  */
 .o-ui-menu-item-end-icon {
-    margin-left: var(--o-ui-sp-1);
+    margin-left: var(--hop-space-inline-sm);
 }
 
 /* ITEM | STATE | SELECTED */
 .o-ui-menu-item .o-ui-menu-item-checkmark {
     opacity: 0;
-    width: var(--o-ui-listbox-option-checkmark-size);
-    height: var(--o-ui-listbox-option-checkmark-size);
-    fill: var(--o-ui-bg-alias-accent);
+    width: var(--o-ui-menu-item-checkmark-size);
+    height: var(--o-ui-menu-item-checkmark-size);
     position: absolute;
-    right: 0.875rem;
+    right: var(--hop-space-inline-md);
 }
 
 .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-checkmark {
     opacity: 1;
 }
 
+.o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-label {
+    font-weight: var(--hop-body-sm-semibold-font-weight);
+}
+
 /* ITEM | STATE | FOCUS */
 .o-ui-menu-item:focus,
 .o-ui-menu-item-focus {
+    --o-ui-menu-item-icon-color: var(--hop-neutral-icon-hover);
     outline: transparent;
-    background-color: var(--o-ui-bg-alias-mid-break);
-}
-
-/* FOCUS */
-.o-ui-menu-item::after {
-    content: "";
-    display: block;
-    position: absolute;
-    left: 0;
-    height: 100%;
-    width: 2px;
-    opacity: 0;
-    background-color: var(--o-ui-bg-alias-accent);
-}
-
-.o-ui-menu-item:focus::after {
-    opacity: 1;
+    background-color: var(--hop-neutral-surface-hover);
+    color: var(--hop-neutral-text-hover);
 }
 
 /* ITEM | STATE | ACTIVE */
 .o-ui-menu-item:active:not([aria-disabled="true"]),
 .o-ui-menu-item-active:not([aria-disabled="true"]) {
-    background-color: var(--o-ui-bg-alias-hard-break);
+    --o-ui-menu-item-icon-color: var(--hop-neutral-icon-hover);
+    background-color: var(--hop-neutral-surface-hover);
+    color: var(--hop-neutral-text-hover);
 }
 
 /* ITEM | STATE | DISABLED */
 .o-ui-menu-item[aria-disabled="true"] {
-    opacity: var(--o-ui-disabled-opacity);
+    --o-ui-menu-item-description-color: var(--hop-neutral-text-disabled);
+    --o-ui-menu-item-icon-color: var(--hop-neutral-icon-disabled);
+    color: var(--hop-neutral-text-disabled);
     cursor: not-allowed;
 }
 
 /* ITEM | STATE | INVALID */
-.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-label,
-.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-description {
-    color: var(--o-ui-text-alias-alert);
-}
-
-.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-start-icon,
-.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-end-icon {
-    fill: var(--o-ui-text-alias-alert);
+.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] {
+    --o-ui-menu-item-description-color: var(--hop-danger-text-active);
+    --o-ui-menu-item-icon-color: var(--hop-danger-icon-active);
+    color: var(--hop-danger-text-active);
 }
 
-.o-ui-menu-invalid .o-ui-menu-item[aria-checked="true"] .o-ui-menu-item-checkmark {
-    fill: var(--o-ui-text-alias-alert);
+.o-ui-menu-invalid .o-ui-menu-item:active[aria-checked="true"]:not([aria-disabled="true"]),
+.o-ui-menu-invalid .o-ui-menu-item-active[aria-checked="true"]:not([aria-disabled="true"]),
+.o-ui-menu-invalid .o-ui-menu-item:focus[aria-checked="true"],
+.o-ui-menu-invalid .o-ui-menu-item-focus[aria-checked="true"] {
+    --o-ui-menu-item-description-color: var(--hop-danger-text-strong-hover);
+    --o-ui-menu-item-icon-color: var(--hop-danger-icon-strong-hover);
+    background-color: var(--hop-danger-surface-hover);
+    color: var(--hop-danger-text-strong-hover);
 }
 
 /* ITEM | DESCRIPTION */
 .o-ui-menu-item-description {
     grid-area: description;
-    color: var(--o-ui-text-alias-tertiary);
+    color: var(--o-ui-menu-item-description-color);
     justify-self: start;
     width: 100%;
 }
@@ -146,7 +155,6 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-item-label {
     display: inline-block;
     white-space: nowrap;
-    line-height: var(--o-ui-lh-2);
     overflow: hidden;
     text-overflow: ellipsis;
     grid-area: label;
@@ -156,13 +164,13 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-section-title {
     cursor: default;
     display: flex;
-    font-weight: 500;
-    padding-left: var(--o-ui-sp-3);
+    font-weight: var(--hop-body-xs-medium-font-weight);
+    padding-inline: var(--hop-space-inset-md);
     height: var(--o-ui-menu-item-height);
-    line-height: var(--o-ui-lh-1);
-    color: var(--o-ui-text-alias-tertiary);
+    line-height: var(--hop-body-xs-medium-line-height);
+    color: var(--hop-neutral-text-disabled);
     text-transform: uppercase;
-    font-size: var(--o-ui-fs-2);
+    font-size: var(--hop-body-xs-medium-font-size);
     align-items: center;
 }
 
@@ -171,8 +179,8 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 }
 
 /* DIVIDER  */
-.o-ui-menu-divider {
-    margin: var(--o-ui-sp-1) 0 !important;
+.o-ui-divider.o-ui-menu-divider[aria-orientation="horizontal"] {
+    margin: var(--hop-space-stack-xs) 0;
 }
 
 /* FLUID */
@@ -182,7 +190,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 
 /* AVATAR */
 .o-ui-menu-item-option-avatar {
-    margin-right: var(--o-ui-sp-2);
+    margin-right: var(--hop-space-inline-sm);
     grid-area: aside;
     align-self: center;
 }

diff --git a/packages/components/src/menu/src/Menu.tsx b/packages/components/src/menu/src/Menu.tsx
@@ -201,10 +201,12 @@ export function InnerMenu({
     const nodes = useCollectionNodes(children, nodesProp);
 
     const scrollableProps = useScrollableCollection(containerRef, nodes, {
+        borderHeight: 2,
         disabled: selectionMode === "none",
         dividerSelector: ".o-ui-menu-divider",
         itemSelector: ".o-ui-menu-item",
         maxHeight: 12 * MenuItemHeight,
+        paddingHeight: 16,
         sectionSelector: ".o-ui-menu-section-title"
     });
 

diff --git a/packages/components/src/menu/src/MenuItem.tsx b/packages/components/src/menu/src/MenuItem.tsx
@@ -68,7 +68,7 @@ export function InnerMenuItem({
         description: {
             className: "o-ui-menu-item-description",
             id: `${id}-description`,
-            size: "md"
+            size: "xs"
         },
         "end-icon": {
             className: "o-ui-menu-item-end-icon",