@uxf/ui 11.33.0 → 11.34.0

package/button-list/button-list.js

@@ -39,7 +39,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--variant-${variant}`, className),
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button-list__menu-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
     return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),

package/button-list/button-list.stories.js

@@ -14,18 +14,18 @@ exports.default = {
 function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonList, { buttons: [
-                { label: "First item" },
-                { label: "Second item" },
-                { label: "Third item" },
-                { label: "Fourth item", isDisabled: true },
-                { label: "Fifth item" },
-                { label: "Sixth item" },
+                { label: "Default" },
+                { label: "Color Negative", color: "negative" },
+                { label: "Color Negative", color: "negative", icon: "camera" },
+                { label: "Disabled", isDisabled: true },
+                { label: "Color Negative disabled", color: "negative", isDisabled: true, icon: "camera" },
+                { label: "Sixth item", icon: "camera" },
                 { label: "Seventh item" },
                 { label: "Eighth item" },
                 { label: "Nineth item" },
                 { label: "Tenth item" },
                 { label: "Eleventh item" },
-            ], menuMaxHeight: 350, variant: "secondary", visibleButtonsCount: 0 }),
+            ], classNameDropdown: "w-64", menuMaxHeight: 350, variant: "secondary", visibleButtonsCount: 0 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
                 { label: "Second item" },

package/css/button-list.css

@@ -1,17 +1,33 @@
 .uxf-button-list {
-    @apply flex items-center space-x-2;
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.2");
 
     &__menu {
-        @apply relative;
-
         display: flex;
+        position: relative;
     }
 
     &__menu-items {
-        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.md");
+        margin-top: theme("spacing.2");
+        overflow: auto;
+        position: absolute;
+        right: 0;
+        width: theme("width.40");
+        z-index: theme("zIndex.dropdown");
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        @apply divide-y divide-gray-100 shadow-lg ring-1 ring-black/5;
 
         :root .dark & {
-            @apply divide-gray-700 bg-gray-900 ring-white/10;
+            background-color: theme("colors.gray.900");
+
+            @apply divide-gray-700 ring-white/10;
         }
     }
 
@@ -24,25 +40,49 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
+        color: theme("colors.lightHigh");
+        display: flex;
+        gap: theme("spacing.3");
+        padding: theme("spacing.2") theme("spacing.3");
+
+        @apply is-hoverable:cursor-pointer is-hoverable:opacity-75 text-sm transition-opacity;
 
         :root .dark & {
-            @apply text-white hover:text-gray-200;
+            color: theme("colors.darkHigh");
         }
 
         &-icon {
-            @apply text-lightMedium w-3;
+            color: theme("colors.lightMedium");
+            width: theme("width.3");
 
             :root .dark & {
-                @apply text-darkMedium;
+                color: theme("colors.darkMedium");
             }
         }
 
         &.is-disabled {
-            @apply text-lightLow;
+            color: theme("colors.lightLow");
+
+            .uxf-button-list__menu-button-icon {
+                color: theme("colors.lightLow");
+            }
 
             :root .dark & {
-                @apply text-darkLow;
+                color: theme("colors.darkLow");
+
+                .uxf-button-list__menu-button-icon {
+                    color: theme("colors.darkLow");
+                }
+            }
+        }
+
+        &--color {
+            &-negative {
+                color: theme("colors.red.500");
+
+                .uxf-button-list__menu-button-icon {
+                    color: theme("colors.red.500");
+                }
             }
         }
     }

package/message/README.md

@@ -5,6 +5,7 @@ Use component [ModalDialog](/docs/ui/modal-dialog) and method [openModal()](/doc
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/alert-bubble/alert-bubble.css");
 @import url("@uxf/ui/message/message.css");
 @import url("@uxf/ui/dialog/dialog.css");
 @import url("@uxf/ui/button/button.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.33.0",
+  "version": "11.34.0",
   "description": "",
   "publishConfig": {
     "access": "public"