@indico-data/design-system 2.55.2 → 2.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.55.2",
+  "version": "2.56.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/FloatUI.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof FloatUI> = {
   component: FloatUI,
   argTypes: {
     children: {
-      control: 'object',
+      control: false,
       description:
         'An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI.',
       table: {
@@ -31,7 +31,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     floatingOptions: {
-      control: 'object',
+      control: false,
       description:
         'Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options).',
       table: {
@@ -52,7 +52,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     isPortal: {
-      control: 'boolean',
+      control: false,
       defaultValue: false,
       description:
         'Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body)',
@@ -64,7 +64,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     portalOptions: {
-      control: 'object',
+      control: false,
       description:
         'Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into.',
       table: {
@@ -103,6 +103,9 @@ export default meta;
 type Story = StoryObj<FloatUIProps>;
 
 export const Uncontrolled: Story = {
+  args: {
+    ariaLabel: 'Example FloatUI',
+  },
   render: (args) => (
     <FloatUI {...args} ariaLabel="Example FloatUI">
       <Button iconLeft="kabob" ariaLabel="Toggle FloatUI" variant="action" />

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -82,7 +82,7 @@ export const DatePicker = (props: DatePickerProps) => {
   const finalProps = { ...commonProps, ...rest, ...modeProps };
 
   return (
-    <>
+    <div className="date-picker-wrapper">
       {hasTimePicker && (
         <div className="time-picker-wrapper">
           <Row align="center">
@@ -96,6 +96,6 @@ export const DatePicker = (props: DatePickerProps) => {
         </div>
       )}
       <DayPicker {...finalProps} />
-    </>
+    </div>
   );
 };

package/src/components/menu/Menu.stories.tsx

@@ -6,8 +6,18 @@ const meta: Meta<typeof Menu> = {
   title: 'Components/Menu',
   component: Menu,
   argTypes: {
-    children: {
+    className: {
       control: 'text',
+      description: 'The class name to apply to the Menu component.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
       description:
         'The children of the Menu component, which will be automatically styled as menu-items.',
       table: {
@@ -25,6 +35,9 @@ export default meta;
 type Story = StoryObj<MenuProps>;
 
 export const Default: Story = {
+  args: {
+    className: 'custom-menu',
+  },
   render: (args) => (
     <Menu {...args}>
       <Button

package/src/components/menu/styles/Menu.scss

@@ -11,6 +11,17 @@
     width: 100%;
     text-align: left;
     border: none;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--pf-menu-rounded);
+      border-top-right-radius: var(--pf-menu-rounded);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--pf-menu-rounded);
+      border-bottom-right-radius: var(--pf-menu-rounded);
+    }
 
     &:hover {
       background: var(--pf-menu-item-hover-color);

package/src/styles/variables/themes/dark.scss

@@ -61,6 +61,7 @@
   --pf-gray-color-700: #262626;
   --pf-gray-color-800: #171717;
   --pf-gray-color-900: #0a0a0a;
+  --pf-gray-color-950: #000000; // MISSING
 
   //Red color
   --pf-red-color: #ce6068;
@@ -71,6 +72,7 @@
   --pf-red-color-300: #ebb6b8;
   --pf-red-color-350: #f39bb9;
   --pf-red-color-400: #ef76a0;
+  --pf-red-color-450: #df8d91;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
@@ -156,6 +158,23 @@
   --pf-white-color-90: rgba(255, 255, 255, 0.9);
   --pf-white-color-100: rgba(255, 255, 255, 1);
 
+  // Black color
+  --pf-black-color: #000000;
+  --pf-black-color-1: rgba(0, 0, 0, 0.01);
+  --pf-black-color-3: rgba(0, 0, 0, 0.03);
+  --pf-black-color-5: rgba(0, 0, 0, 0.05);
+  --pf-black-color-10: rgba(0, 0, 0, 0.1);
+  --pf-black-color-15: rgba(0, 0, 0, 0.15);
+  --pf-black-color-20: rgba(0, 0, 0, 0.2);
+  --pf-black-color-30: rgba(0, 0, 0, 0.3);
+  --pf-black-color-40: rgba(0, 0, 0, 0.4);
+  --pf-black-color-50: rgba(0, 0, 0, 0.5);
+  --pf-black-color-60: rgba(0, 0, 0, 0.6);
+  --pf-black-color-70: rgba(0, 0, 0, 0.7);
+  --pf-black-color-80: rgba(0, 0, 0, 0.8);
+  --pf-black-color-90: rgba(0, 0, 0, 0.9);
+  --pf-black-color-100: rgba(0, 0, 0, 1);
+
   // Utility Colors
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);

package/src/styles/variables/themes/light.scss

@@ -1,98 +1,188 @@
 :root [data-theme='light'] {
   // Primary Color
-  --pf-primary-color: #6833d0;
-
-  --pf-primary-color-100: #f0ebfa;
-  --pf-primary-color-200: #d5c6f2;
-  --pf-primary-color-300: #baa1e9;
-  --pf-primary-color-400: #8c64db;
-  --pf-primary-color-500: #6833d0;
-  --pf-primary-color-600: #5e2ebb;
-  --pf-primary-color-700: #5329a6;
-  --pf-primary-color-800: #492492;
-  --pf-primary-color-900: #3e1f7d;
-  --pf-primary-color-1000: #271153;
+  --pf-primary-color: #b4cadf;
+
+  --pf-primary-color-50: #5b8ab7;
+  --pf-primary-color-100: #6d96c3;
+  --pf-primary-color-200: #7b9fc5;
+  --pf-primary-color-300: #90adc8;
+  --pf-primary-color-400: #a3bdd4;
+  --pf-primary-color-500: #b4cadf;
+  --pf-primary-color-600: #c4d8eb;
+  --pf-primary-color-700: #d2e1f0;
+  --pf-primary-color-800: #dfeaf3;
+  --pf-primary-color-900: #eef4fa;
+  --pf-primary-color-950: #f6f9fc;
 
   // Secondary Color
-  --pf-secondary-color: #0070f5;
-  --pf-secondary-color-100: #dceafd;
-  --pf-secondary-color-200: #b3d4fc;
-  --pf-secondary-color-300: #7ab5fa;
-  --pf-secondary-color-400: #4797f5;
-  --pf-secondary-color-500: #0070f5;
-  --pf-secondary-color-600: #0067e1;
-  --pf-secondary-color-700: #005ac4;
-  --pf-secondary-color-800: #004eac;
-  --pf-secondary-color-900: #004393;
-
-  //Gray Color
-  --pf-gray-color: #444444;
-
-  --pf-gray-color-100: #eeeeee;
-  --pf-gray-color-200: #d0d0d0;
-  --pf-gray-color-300: #a9a9a9;
-  --pf-gray-color-400: #737373;
-  --pf-gray-color-500: #444444;
-  --pf-gray-color-600: #373737;
-  --pf-gray-color-700: #2c2c2c;
-  --pf-gray-color-800: #1f1f1f;
-  --pf-gray-color-900: #141414;
-
-  // Steel Color
-  --pf-steel-color: #7c8594;
-
-  --pf-steel-color-100: #f4f6f8;
-  --pf-steel-color-200: #d9dee5;
-  --pf-steel-color-300: #bcc3cd;
-  --pf-steel-color-400: #a0a9b5;
-  --pf-steel-color-500: #7c8594;
-  --pf-steel-color-600: #5f697a;
-  --pf-steel-color-700: #454e5e;
-  --pf-steel-color-800: #2d3444;
-  --pf-steel-color-900: #1b202c;
-
-  //Green Color *do success warning etc etc
-  --pf-green-color: #008a00;
-  --pf-green-color-100: #d6ecd6;
-  --pf-green-color-200: #99d099;
-  --pf-green-color-300: #66b966;
-  --pf-green-color-400: #33a133;
-  --pf-green-color-500: #008a00;
-  --pf-green-color-600: #007c00;
-  --pf-green-color-700: #006e00;
-  --pf-green-color-800: #006100;
-  --pf-green-color-900: #005300;
+  --pf-secondary-color: #3892f3;
 
-  //Orange color
-  --pf-orange-color: #ffa424;
-  --pf-orange-color-100: #ffdfb2;
-  --pf-orange-color-200: #ffd292;
-  --pf-orange-color-300: #ffc471;
-  --pf-orange-color-400: #ffb650;
-  --pf-orange-color-500: #ffa424;
-  --pf-orange-color-600: #f29c22;
-  --pf-orange-color-700: #e69420;
-  --pf-orange-color-800: #cc831d;
-  --pf-orange-color-900: #b37319;
+  --pf-secondary-color-50: #002b66;
+  --pf-secondary-color-100: #003b8c;
+  --pf-secondary-color-200: #004cb0;
+  --pf-secondary-color-300: #0060d6;
+  --pf-secondary-color-400: #0070f5;
+  --pf-secondary-color-500: #3892f3;
+  --pf-secondary-color-550: #66adff;
+  --pf-secondary-color-600: #91c5ff;
+  --pf-secondary-color-700: #b8dbff;
+  --pf-secondary-color-800: #d4eaff;
+  --pf-secondary-color-900: #e0f2ff;
+  --pf-secondary-color-950: #eaf4ff;
+
+  // Tertiary Color
+  --pf-tertiary-color: #8394a9;
+
+  --pf-tertiary-color-50: #142838;
+  --pf-tertiary-color-100: #203148;
+  --pf-tertiary-color-200: #2e4563;
+  --pf-tertiary-color-300: #3e587a;
+  --pf-tertiary-color-400: #55677f;
+  --pf-tertiary-color-450: #6d8097;
+  --pf-tertiary-color-500: #8394a9;
+  --pf-tertiary-color-600: #93a3bb;
+  --pf-tertiary-color-700: #a5b4c6;
+  --pf-tertiary-color-800: #b2bfd0;
+  --pf-tertiary-color-900: #c4ccd7;
+  --pf-tertiary-color-950: #d6dde5;
+
+  // Gray Color
+  --pf-gray-color: #525252;
+
+  --pf-gray-color-50: #0a0a0a;
+  --pf-gray-color-100: #171717;
+  --pf-gray-color-200: #262626;
+  --pf-gray-color-300: #404040;
+  --pf-gray-color-400: #525252;
+  --pf-gray-color-450: #737373; // MISSING
+  --pf-gray-color-500: #737373;
+  --pf-gray-color-600: #989898;
+  --pf-gray-color-700: #bdbdbd;
+  --pf-gray-color-800: #dcdcdc;
+  --pf-gray-color-900: #efefef;
+  --pf-gray-color-950: #f6f6f6;
 
   //Red color
-  --pf-red-color: #e72326;
-  --pf-red-color-100: #ffd6d6;
-  --pf-red-color-200: #f49ea0;
-  --pf-red-color-300: #ef696b;
-  --pf-red-color-400: #eb4649;
-  --pf-red-color-500: #e72326;
-  --pf-red-color-600: #d52023;
-  --pf-red-color-700: #c21d20;
-  --pf-red-color-800: #b01b1d;
-  --pf-red-color-900: #9d181a;
+  --pf-red-color: #f4a5ae;
+
+  --pf-red-color-50: #5b0d16;
+  --pf-red-color-100: #761821;
+  --pf-red-color-200: #8f252f;
+  --pf-red-color-300: #ad303d;
+  --pf-red-color-350: #b8424c;
+  --pf-red-color-400: #c84a57;
+  --pf-red-color-450: #dc5a66;
+  --pf-red-color-500: #f4a5ae;
+  --pf-red-color-600: #ebb6b8;
+  --pf-red-color-700: #f9d5dc;
+  --pf-red-color-800: #f4d7d8;
+  --pf-red-color-850: #fae9e9;
+  --pf-red-color-900: #fcebeb;
+  --pf-red-color-950: #fcf5f4;
+
+  //Orange color
+  --pf-orange-color: #ff873f;
+
+  --pf-orange-color-50: #721e01;
+  --pf-orange-color-100: #992702;
+  --pf-orange-color-200: #b33403;
+  --pf-orange-color-300: #d94b04;
+  --pf-orange-color-400: #f25c05;
+  --pf-orange-color-500: #ff873f;
+  --pf-orange-color-600: #ffa26d;
+  --pf-orange-color-700: #ffc9aa;
+  --pf-orange-color-800: #ffe3d1;
+  --pf-orange-color-900: #fff3ec;
+  --pf-orange-color-950: #fffaf7;
+
+  //Yellow color
+  --pf-yellow-color: #ffa400;
+
+  --pf-yellow-color-50: #312602;
+  --pf-yellow-color-100: #664200;
+  --pf-yellow-color-200: #895c00;
+  --pf-yellow-color-300: #b37300;
+  --pf-yellow-color-400: #e08e00;
+  --pf-yellow-color-500: #ffa400;
+  --pf-yellow-color-600: #ffb621;
+  --pf-yellow-color-700: #ffc344;
+  --pf-yellow-color-800: #ffd369;
+  --pf-yellow-color-900: #ffeaa1;
+  --pf-yellow-color-950: #fff4d0;
+
+  //Green Color
+  --pf-green-color: #39c29d;
+
+  --pf-green-color-50: #003325;
+  --pf-green-color-100: #075f48;
+  --pf-green-color-200: #0a906c;
+  --pf-green-color-300: #03aaaa;
+  --pf-green-color-400: #26b890;
+  --pf-green-color-500: #39c29d;
+  --pf-green-color-600: #52ccae;
+  --pf-green-color-700: #6cd6ba;
+  --pf-green-color-800: #83e2c7;
+  --pf-green-color-900: #c1f1e2;
+  --pf-green-color-950: #83e2c7;
+
+  // Purple Color
+  --pf-purple-color: #9776d3;
+
+  --pf-purple-color-50: #291a40;
+  --pf-purple-color-100: #55377b;
+  --pf-purple-color-200: #664196;
+  --pf-purple-color-300: #7a4eb3;
+  --pf-purple-color-400: #8b60c7;
+  --pf-purple-color-500: #9776d3;
+  --pf-purple-color-600: #b6a3e2;
+  --pf-purple-color-700: #cfc4ee;
+  --pf-purple-color-800: #e4dff5;
+  --pf-purple-color-900: #f1edfa;
+  --pf-purple-color-950: #f7f6fc;
+
+  // White color
+  --pf-white-color: #ffffff;
+  --pf-white-color-1: rgba(255, 255, 255, 0.01);
+  --pf-white-color-3: rgba(255, 255, 255, 0.03);
+  --pf-white-color-5: rgba(255, 255, 255, 0.05);
+  --pf-white-color-10: rgba(255, 255, 255, 0.1);
+  --pf-white-color-15: rgba(255, 255, 255, 0.15);
+  --pf-white-color-20: rgba(255, 255, 255, 0.2);
+  --pf-white-color-30: rgba(255, 255, 255, 0.3);
+  --pf-white-color-40: rgba(255, 255, 255, 0.4);
+  --pf-white-color-50: rgba(255, 255, 255, 0.5);
+  --pf-white-color-60: rgba(255, 255, 255, 0.6);
+  --pf-white-color-70: rgba(255, 255, 255, 0.7);
+  --pf-white-color-80: rgba(255, 255, 255, 0.8);
+  --pf-white-color-90: rgba(255, 255, 255, 0.9);
+  --pf-white-color-100: rgba(255, 255, 255, 1);
+
+  // Black color
+  --pf-black-color: #000000;
+  --pf-black-color-1: rgba(0, 0, 0, 0.01);
+  --pf-black-color-3: rgba(0, 0, 0, 0.03);
+  --pf-black-color-5: rgba(0, 0, 0, 0.05);
+  --pf-black-color-10: rgba(0, 0, 0, 0.1);
+  --pf-black-color-15: rgba(0, 0, 0, 0.15);
+  --pf-black-color-20: rgba(0, 0, 0, 0.2);
+  --pf-black-color-30: rgba(0, 0, 0, 0.3);
+  --pf-black-color-40: rgba(0, 0, 0, 0.4);
+  --pf-black-color-50: rgba(0, 0, 0, 0.5);
+  --pf-black-color-60: rgba(0, 0, 0, 0.6);
+  --pf-black-color-70: rgba(0, 0, 0, 0.7);
+  --pf-black-color-80: rgba(0, 0, 0, 0.8);
+  --pf-black-color-90: rgba(0, 0, 0, 0.9);
+  --pf-black-color-100: rgba(0, 0, 0, 1);
 
   // Utility Colors
-  --pf-error-color: var(--pf-red-color-600);
-  --pf-success-color: var(--pf-green-color-600);
-  --pf-warning-color: var(--pf-orange-color-600);
-  --pf-neutral-color: var(--pf-gray-color);
-  --pf-info-color: var(--pf-secondary-color-600);
-  --pf-link-color: var(--pf-secondary-color);
-  --pf-link-hover-color: var(--pf-secondary-color-400);
+  --pf-error-color: var(--pf-red-color);
+  --pf-success-color: var(--pf-green-color);
+  --pf-warning-color: var(--pf-yellow-color-300);
+  --pf-neutral-color: var(--pf-gray-color-100);
+  --pf-info-color: var(--pf-secondary-color-200);
+  --pf-brand-color: var(--pf-secondary-color-550);
+  --pf-pending-color: var(--pf-red-color-900);
+
+  --pf-link-color: var(--pf-gray-color-300);
+  --pf-link-hover-color: var(--pf-gray-color-100);
 }

package/plugin-build-tool.json

@@ -1,4 +0,0 @@
-{
-  "harness_lang": "JavaScript,TypeScript,CSS",
-  "harness_build_tool": "Node"
-}