@ultraviolet/plus 0.11.1 → 0.12.1

package/dist/@ultraviolet/icons/dist/components/CategoryIcon/index.js

@@ -3,24 +3,33 @@ import { CATEGORY_ICONS } from './Icons.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledIcon = component => /*#__PURE__*/_styled(component, {
+  shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
   target: "e1wwql4e0"
 })(".fill{fill:", ({
-  theme
-}) => theme.colors.other.icon.category.primary.fill, ";}.fillStrong{fill:", ({
-  theme
-}) => theme.colors.other.icon.category.primary.fillStrong, ";}");
+  theme,
+  variant,
+  disabled
+}) => theme.colors.other.icon.category[variant][disabled ? 'fillDisabled' : 'fill'], ";}.fillStrong{fill:", ({
+  theme,
+  variant,
+  disabled
+}) => theme.colors.other.icon.category[variant][disabled ? 'fillStrongDisabled' : 'fillStrong'], ";}");
 /**
  * CategoryIcon component is used to render category icons, those icons are more complex than system icons
  * as they involve multiple colors that changes depending on theme.
  */
 const CategoryIcon = ({
-  name
+  name,
+  variant = 'primary',
+  disabled
 }) => {
   const Icon = StyledIcon(CATEGORY_ICONS[name]);
   return jsx(Icon, {
     width: "20",
     height: "20",
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 20 20",
+    variant: variant,
+    disabled: disabled
   });
 };
 

package/dist/index.d.ts

@@ -489,9 +489,10 @@ declare const Navigation: {
         children: ReactNode;
         label: string;
     }) => _emotion_react_jsx_runtime.JSX.Element | null;
-    Item: ({ children, categoryIcon, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, toggleMenu, }: {
+    Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, toggleMenu, }: {
         children?: ReactNode;
         categoryIcon?: "security" | "console" | "database" | "pin" | "billing" | "storage" | "baremetal" | "webHosting" | "vpc" | "useCase" | "toolsServices" | "serverless" | "observability" | "network" | "managedServices" | "iot" | "documentation" | "dedicatedServer" | "datacenter" | "containers" | "compute" | "ai" | "labs" | "devTools" | undefined;
+        categoryIconVariant?: "neutral" | "primary" | undefined;
         label: string;
         subLabel?: string | undefined;
         badgeText?: string | undefined;

package/dist/src/components/Navigation/components/Item.js

@@ -82,9 +82,7 @@ const StyledContainer = /*#__PURE__*/_styled(Stack, {
   theme
 }) => `${theme.space['0.5']} ${theme.space['1']}`, ";}width:100%;&:hover[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ),&:focus[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ),&[data-has-active-children='true'][data-has-no-expand='false']:not(\n      [disabled][data-is-active='true']\n    ){background-color:", ({
   theme
-}) => theme.colors.neutral.backgroundHover, ";", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}", WrapText, "{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakHover, ";}}&:active[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){background-color:", ({
+}) => theme.colors.neutral.backgroundHover, ";", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}}&:active[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){background-color:", ({
   theme
 }) => theme.colors.neutral.backgroundHover, ";}&[data-is-active='true'],&:hover[data-has-active='true']{background-color:", ({
   theme
@@ -113,6 +111,7 @@ const ContainerCategoryIcon = /*#__PURE__*/_styled(Stack, {
 const Item = ({
   children,
   categoryIcon,
+  categoryIconVariant,
   label,
   subLabel,
   badgeText,
@@ -239,14 +238,16 @@ const Item = ({
             alignItems: "center",
             justifyContent: "center",
             children: jsx(CategoryIcon, {
-              name: categoryIcon
+              name: categoryIcon,
+              variant: categoryIconVariant,
+              disabled: disabled
             })
           }) : null, jsxs(Stack, {
             children: [jsx(WrapText, {
               as: "span",
               variant: "bodySmallStrong",
               sentiment: active ? 'primary' : 'neutral',
-              prominence: categoryIcon || !hasParents ? undefined : 'weak',
+              prominence: (categoryIcon || !hasParents) && !active ? 'strong' : 'weak',
               animation: animation,
               disabled: disabled,
               children: label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,20 +43,20 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.11.2",
-    "@ultraviolet/illustrations": "1.7.0"
+    "@ultraviolet/illustrations": "1.7.0",
+    "@ultraviolet/icons": "2.12.0"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.21.25",
     "@uiw/codemirror-theme-material": "4.21.25",
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.1",
-    "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/ui": "1.45.1"
+    "@ultraviolet/themes": "1.10.0",
+    "@ultraviolet/ui": "1.45.2"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",