@crystallize/design-system 1.16.0 → 1.16.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.16.1
+
+### Patch Changes
+
+- 67b3c9a9: Add isSelected prop to the DropdownMenu.Item component and styles to show the selected state
+
 ## 1.16.0
 
 ### Minor Changes

package/dist/index.css

@@ -1175,7 +1175,8 @@ button {
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0.75rem;
   font-family:
     Roboto,
     ui-sans-serif,
@@ -1192,8 +1193,7 @@ button {
     "Segoe UI Emoji",
     "Segoe UI Symbol",
     "Noto Color Emoji";
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: 11px;
   font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
@@ -1209,8 +1209,8 @@ button {
   align-items: center;
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   font-family:
     Roboto,
     ui-sans-serif,
@@ -1235,12 +1235,22 @@ button {
 }
 .c-dropdown-menu-item:hover,
 .c-dropdown-menu-item:focus,
-.c-dropdown-menu-item:focus-visible {
+.c-dropdown-menu-item:focus-visible,
+.c-dropdown-menu-item:hover.selected,
+.c-dropdown-menu-item:focus.selected,
+.c-dropdown-menu-item:focus-visible.selected {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.c-dropdown-menu-item.selected {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-green-500-400) / var(--tw-text-opacity));
+}
 .c-dropdown-menu-item:first-child {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -1351,9 +1361,9 @@ button {
 /* src/dialog/dialog.css */
 .c-dialog {
   position: fixed;
-  top: 50%;
   left: 50%;
-  z-index: 20;
+  top: 50%;
+  z-index: 100;
   width: auto;
   min-width: 25%;
   max-width: 800px;
@@ -1375,7 +1385,7 @@ button {
 .c-dialog-overlay {
   position: fixed;
   inset: 0px;
-  z-index: 10;
+  z-index: 100;
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
 .c-dialog-icon {
@@ -1399,14 +1409,14 @@ button {
   color: rgb(var(--c-color-gray));
 }
 .c-dialog-description {
-  margin-top: 0.25rem;
   margin-bottom: 1.25rem;
+  margin-top: 0.25rem;
   font-weight: 500;
 }
 .c-dialog-close-button {
   position: absolute;
-  top: 0px;
   right: 0px;
+  top: 0px;
   display: inline-flex;
   height: 3rem;
   width: 3rem;

package/dist/index.d.ts

@@ -20,9 +20,10 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 declare function Item({ children, className, onSelect }: ItemProps): JSX.Element;
 
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
-    children: ReactNode;
+    children: React.ReactNode;
+    isSelected?: boolean;
 };
-declare function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps): JSX.Element;
+declare function DropdownMenuItem({ children, className, isSelected, ...delegated }: DropdownMenuItemProps): JSX.Element;
 
 type DropdownMenuLabelProps = {
     children: ReactNode;

package/dist/index.js

@@ -261,10 +261,10 @@ var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_class_variance_authority4 = require("class-variance-authority");
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function DropdownMenuItem({ children, className, ...delegated }) {
+function DropdownMenuItem({ children, className, isSelected, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuPrimitive.Item, {
     ...delegated,
-    className: (0, import_class_variance_authority4.cx)("c-dropdown-menu-item", className),
+    className: (0, import_class_variance_authority4.cx)("c-dropdown-menu-item", isSelected ? "selected" : "", className),
     children
   });
 }

package/dist/index.mjs

@@ -201,10 +201,10 @@ import { Portal as Portal2, Separator } from "@radix-ui/react-dropdown-menu";
 import { cx as cx2 } from "class-variance-authority";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx4 } from "react/jsx-runtime";
-function DropdownMenuItem({ children, className, ...delegated }) {
+function DropdownMenuItem({ children, className, isSelected, ...delegated }) {
   return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Item, {
     ...delegated,
-    className: cx2("c-dropdown-menu-item", className),
+    className: cx2("c-dropdown-menu-item", isSelected ? "selected" : "", className),
     children
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dialog/dialog.css

@@ -1,8 +1,9 @@
 .c-dialog {
-  @apply fixed top-1/2 left-1/2 z-20 w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
+  @apply fixed left-1/2 top-1/2 z-[100] w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
   transform: translate(-50%, -50%);
+
   &-overlay {
-    @apply fixed inset-0 z-10 bg-overlay;
+    @apply fixed inset-0 z-[100] bg-overlay;
   }
 
   &-icon {
@@ -14,11 +15,11 @@
   }
 
   &-description {
-    @apply mt-1 mb-5 font-medium;
+    @apply mb-5 mt-1 font-medium;
   }
 
   &-close-button {
-    @apply absolute top-0 right-0 inline-flex h-12 w-12 items-center justify-center rounded-none rounded-tr-lg border !bg-transparent !p-0 !drop-shadow-none hover:!bg-gray-50-900 focus:!bg-gray-50-900;
+    @apply absolute right-0 top-0 inline-flex h-12 w-12 items-center justify-center rounded-none rounded-tr-lg border !bg-transparent !p-0 !drop-shadow-none hover:!bg-gray-50-900 focus:!bg-gray-50-900;
   }
 
   &-with-icon {

package/src/dropdown-menu/dropdown-menu-item.tsx

@@ -1,14 +1,17 @@
-import type { ReactNode } from 'react';
 import { cx } from 'class-variance-authority';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
-  children: ReactNode;
+  children: React.ReactNode;
+  isSelected?: boolean;
 };
 
-export function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps) {
+export function DropdownMenuItem({ children, className, isSelected, ...delegated }: DropdownMenuItemProps) {
   return (
-    <DropdownMenuPrimitive.Item {...delegated} className={cx('c-dropdown-menu-item', className)}>
+    <DropdownMenuPrimitive.Item
+      {...delegated}
+      className={cx('c-dropdown-menu-item', isSelected ? 'selected' : '', className)}
+    >
       {children}
     </DropdownMenuPrimitive.Item>
   );

package/src/dropdown-menu/dropdown-menu.css

@@ -3,18 +3,25 @@
 }
 
 .c-dropdown-menu-label {
-  @apply bg-elevate px-4 pt-2 font-sans text-xs font-bold text-gray-500-400;
+  @apply bg-elevate px-4 pb-1 pt-3 font-sans text-[11px] font-bold text-gray-500-400;
   @apply first:rounded-tl first:rounded-tr;
 }
 
 .c-dropdown-menu-item {
-  @apply flex h-10 cursor-pointer items-center bg-elevate px-3 font-sans text-xs font-medium text-gray-700-200;
+  @apply flex h-10 cursor-pointer items-center bg-elevate px-4 font-sans text-xs font-medium text-gray-700-200;
 
   &:hover,
   &:focus,
-  &:focus-visible {
+  &:focus-visible,
+  &:hover.selected,
+  &:focus.selected,
+  &:focus-visible.selected {
     @apply bg-gray-50-900 outline-none;
   }
 
+  &.selected {
+    @apply bg-gray-50-900 font-bold text-green-500-400;
+  }
+
   @apply first:rounded-tl first:rounded-tr last:rounded-bl last:rounded-br;
 }