@scality/core-ui 0.205.0 → 0.207.0

package/.storybook/preview.js

@@ -89,7 +89,7 @@ export const parameters = {
           'Navigation',
           'Data Display',
           'Inputs',
-          'Feedback',
+          ['Feedback', [['Modal', ['Guideline', '*']]]],
           'Progress & loading',
           'Styling',
           'Deprecated',

package/jest.config.js

@@ -10,5 +10,10 @@ export default {
     '^@fortawesome/free-regular-svg-icons/(.+)\\.js$':
       '@fortawesome/free-regular-svg-icons/$1',
   },
+  // Transform both .js and .mjs files with Babel
+  transform: {
+    '^.+\\.(js|jsx|mjs)$': 'babel-jest',
+    '^.+\\.(ts|tsx)$': 'babel-jest',
+  },
   testEnvironment: 'jsdom',
 };

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.205.0",
+  "version": "0.207.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
   "main": "dist/index.js",
-  "type": "module",
   "types": "dist/index.d.ts",
   "mainSrc": "src/lib/index.js",
   "exports": {
@@ -14,7 +13,9 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./eslint-plugin": "./src/lib/valalint/index.js"
+    "./eslint-plugin": "./src/lib/valalint/index.mjs",
+    "./dist/*.css": "./dist/*.css",
+    "./dist/*": "./dist/*"
   },
   "sideEffects": false,
   "peerDependencies": {

package/src/lib/valalint/index.mjs

@@ -0,0 +1,49 @@
+import tsParser from "@typescript-eslint/parser";
+import modalButtonForbiddenLabel from "./rules/modal-button-forbidden-label.mjs";
+import noRawNumberInJsx from "./rules/no-raw-number-in-jsx.mjs";
+import technicalSentenceCase from "./rules/technical-sentence-case.mjs";
+
+const rules = {
+	"technical-sentence-case": technicalSentenceCase,
+	"modal-button-forbidden-label": modalButtonForbiddenLabel,
+	"no-raw-number-in-jsx": noRawNumberInJsx,
+};
+
+/** Default rule severity for the recommended config. */
+const recommendedRules = {
+	"valalint/technical-sentence-case": "warn",
+	"valalint/modal-button-forbidden-label": "warn",
+	"valalint/no-raw-number-in-jsx": "warn",
+};
+
+const plugin = {
+	meta: {
+		name: "valalint",
+		version: "1.0.0",
+	},
+
+	rules,
+	configs: {
+		/** Legacy eslintrc-style recommended config. */
+		recommended: {
+			plugins: ["valalint"],
+			rules: recommendedRules,
+		},
+	},
+};
+
+plugin.configs["flat/recommended"] = {
+	plugins: { valalint: plugin },
+	rules: recommendedRules,
+	languageOptions: {
+		parser: tsParser,
+		parserOptions: {
+			ecmaFeatures: {
+				jsx: true,
+			},
+			project: true,
+		},
+	},
+};
+
+export default plugin;

package/src/lib/valalint/rules/modal-button-forbidden-label.test.js

@@ -1,5 +1,5 @@
 import { RuleTester } from 'eslint';
-import rule from './modal-button-forbidden-label.js';
+import rule from './modal-button-forbidden-label.mjs';
 import * as tsParser from '@typescript-eslint/parser';
 
 const tester = new RuleTester({

package/src/lib/valalint/rules/no-raw-number-in-jsx.test.js

@@ -2,7 +2,7 @@
  * @jest-environment node
  */
 import { RuleTester } from '@typescript-eslint/rule-tester';
-import rule from './no-raw-number-in-jsx.js';
+import rule from './no-raw-number-in-jsx.mjs';
 import path from 'path';
 
 // Jest runs from the project root, so process.cwd() is the workspace root

package/src/lib/valalint/rules/technical-sentence-case.test.js

@@ -1,5 +1,5 @@
 import { RuleTester } from 'eslint';
-import rule from './technical-sentence-case.js';
+import rule from './technical-sentence-case.mjs';
 import * as tsParser from '@typescript-eslint/parser';
 
 const tester = new RuleTester({

package/stories/modal.guideline.mdx

@@ -0,0 +1,103 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as ModalStories from './modal.stories';
+
+<Meta of={ModalStories} name="Guideline" />
+
+# Modal
+
+A modal interrupts the user to focus on a single task or decision. It blocks the rest of the UI until explicitly dismissed. Every modal has an action — there are no purely informational modals.
+
+## When to use / When not to use
+
+**✅ Use a modal for:**
+- A confirmation before a consequential action (delete, reset, publish)
+- A short, focused form that doesn't warrant a full page
+- A required decision the user must address before continuing
+
+**❌ Do not use a modal for:**
+- Multi-step flows — use a full page or wizard instead
+- Anything that would trigger on top of another modal
+- Events triggered by background conditions (new version available, license missing) — race conditions between modals create a broken experience
+
+## Size
+
+- **Min-width:** 480px — never narrower than this regardless of content
+- **Max-width:** 90vw — the modal adapts to its content between these two bounds
+- Avoid scroll whenever possible. The modal keeps vertical padding against the viewport edges at all times. If the body content overflows, it scrolls with a visible scrollbar.
+
+## Role: `dialog` vs `alertdialog`
+
+The `role` prop controls how assistive technologies treat the modal.
+
+| `role` | When to use | Close button |
+|---|---|---|
+| `dialog` (default) | Standard interaction — form, optional confirmation | Present |
+| `alertdialog` | Critical or destructive action requiring a forced decision | Omit |
+
+Use `alertdialog` when accidentally dismissing the modal would be dangerous or meaningless (e.g. a delete confirmation — ESC should not silently cancel the user's intent).
+
+## Close button and backdrop
+
+- The **close button** (×) in the header is present by default via the `close` prop. Omit it only when using `role="alertdialog"` — the user must explicitly choose an action.
+- **Clicking the backdrop never closes the modal.** This prevents accidental data loss, especially in forms.
+- **ESC** closes the modal when the `close` prop is provided, regardless of the role.
+
+## Title and subtitle
+
+- `title` is always required and always text. It mirrors the verb of the action that triggered the modal: the button "Delete node" opens a modal titled "Delete node?".
+- For standard modals, the title describes the action: "Edit settings", "Create bucket".
+- For destructive or irreversible actions, the title is phrased as a question: "Delete node?", "Revoke access?". The question mark signals that a decision is required.
+- `subTitle` occupies the header slot when no close button is present. Use it for contextual information (e.g. a step indicator or a required-fields disclaimer).
+- `subTitle` occupies the same slot as the close button. When `subTitle` is used, `close` must be omitted and navigation must be handled in the footer.
+
+## Body content
+
+- When the action targets a specific resource, name it explicitly in the body: **"my-node-name** will be permanently deleted, this action is irreversible." This prevents the user from acting on the wrong resource.
+- For destructive or irreversible actions without a named resource, the body should still convey the consequence clearly.
+- Links are allowed in the body. They must open in a new tab — the modal stays open.
+
+## Footer and actions
+
+- **Every modal must have a footer** with at least one action button. A modal without a footer is not valid.
+- All buttons are **right-aligned** — the primary or danger action is the rightmost, the cancel/outline action sits immediately to its left.
+- **2 buttons** is the norm. **3 buttons** is acceptable. **4 buttons** should be avoided.
+- Footer is reserved for actions only — no links in the footer.
+- Destructive action: `variant="danger"` — it replaces `primary`, never coexists with it.
+
+<Canvas of={ModalStories.SimpleModal} layout="fullscreen" />
+
+<Canvas of={ModalStories.DestructiveModal} layout="fullscreen" />
+
+## Destructive and irreversible modals
+
+Use `role="alertdialog"`, omit the close button, and use `variant="danger"` on the confirm action. Only the button carries the danger signal — the modal chrome does not change.
+
+If the action targets a named resource, that name must appear in the body. If there is no named resource (e.g. resetting a configuration), it is optional.
+
+## Async actions
+
+| Operation duration | Pattern |
+|---|---|
+| < 3s | Use `isLoading` on the action button. Keep the modal open until resolved. |
+| > 3s | Add a contextual message: "This may take a few moments." |
+| Minutes or more | Do not use a modal. Use a background job with status feedback elsewhere in the UI. |
+
+On error: stay in the modal and display the error inline. Do not close the modal silently. Do not rely on a toast as the only error signal.
+
+## Forbidden patterns
+
+- **No modal on top of another modal.** If a flow requires a second modal, redesign as a full page or wizard.
+- **Avoid event-triggered modals** at the application level (login, WebSocket events, etc.) — race conditions between modals create an uncontrollable stacking experience.
+- **No complex multi-step flows inside a modal.** Move to a full page. Exception: short download or export wizards.
+
+## Within a table
+
+Modals triggered from table row actions are valid. Use `size="inline"` for the trigger button.
+
+<Canvas of={ModalStories.WithinTable} layout="fullscreen" />
+
+## Playground
+
+<Canvas of={ModalStories.SimpleModal} layout="fullscreen" />
+
+<Controls of={ModalStories.SimpleModal} />

package/stories/modal.stories.tsx

@@ -5,6 +5,7 @@ import { Table } from '../src/lib/components/tablev2/Tablev2.component';
 import { IconHelp } from '../src/lib/components/iconhelper/IconHelper';
 import { Stack } from '../src/lib/spacing';
 import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
 import { useArgs } from '@storybook/preview-api';
 
 export default {
@@ -15,6 +16,12 @@ export default {
   ],
 };
 
+const FooterActions = ({ children }) => (
+  <Stack gap="r8" style={{ justifyContent: 'flex-end' }}>
+    {children}
+  </Stack>
+);
+
 export const SimpleModal = {
   render: (args) => {
     const [{ isOpen }, updateArgs] = useArgs();
@@ -22,31 +29,66 @@ export const SimpleModal = {
       <>
         <Button
           onClick={() => updateArgs({ isOpen: true })}
-          label={'Show Modal'}
+          label={'Open modal'}
+          variant="primary"
         />
         <Modal
           close={() => updateArgs({ isOpen: false })}
           isOpen={isOpen}
           footer={
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-              }}
-            >
+            <FooterActions>
+              <Button
+                label="Cancel"
+                variant="outline"
+                onClick={() => updateArgs({ isOpen: false })}
+              />
+              <Button
+                variant="primary"
+                label="Save changes"
+                icon={<Icon name="Save" />}
+                onClick={action('Save changes clicked')}
+              />
+            </FooterActions>
+          }
+          {...args}
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Edit settings',
+    children: <span>Make your changes below.</span>,
+  },
+};
+
+export const DestructiveModal = {
+  render: (args) => {
+    const [{ isOpen }, updateArgs] = useArgs();
+    return (
+      <>
+        <Button
+          onClick={() => updateArgs({ isOpen: true })}
+          label={'Delete node'}
+          variant="danger"
+          icon={<Icon name="Delete" />}
+        />
+        <Modal
+          role="alertdialog"
+          isOpen={isOpen}
+          footer={
+            <FooterActions>
               <Button
-                label="No"
-                size="default"
+                label="Cancel"
                 variant="outline"
                 onClick={() => updateArgs({ isOpen: false })}
               />
               <Button
-                variant="secondary"
-                label="Yes"
-                size="inline"
-                onClick={action('Yes clicked')}
+                variant="danger"
+                label="Delete node"
+                icon={<Icon name="Delete" />}
+                onClick={action('Delete node clicked')}
               />
-            </div>
+            </FooterActions>
           }
           {...args}
         />
@@ -54,8 +96,13 @@ export const SimpleModal = {
     );
   },
   args: {
-    title: 'Hello',
-    children: <span>Do you want a cookie?</span>,
+    title: 'Delete node?',
+    children: (
+      <span>
+        <strong>my-node-name</strong> will be permanently deleted, this action
+        is irreversible.
+      </span>
+    ),
   },
 };
 
@@ -63,20 +110,21 @@ export const CustomizeTitle = {
   ...SimpleModal,
   args: {
     close: null,
-    title: 'Hello there',
-    children: <span>Do you want a cookie?</span>,
+    title: 'Create bucket',
+    children: <span>Fill in the details below.</span>,
     subTitle: (
       <Stack>
         <>Step 1/2</>
         <IconHelp
           tooltipMessage={
             <ul>
-              <li>Hello, this is the tooltip of the modal</li>
+              <li>Complete all required fields before proceeding.</li>
             </ul>
           }
         />
       </Stack>
     ),
+    isOpen: false,
   },
 };
 
@@ -86,31 +134,28 @@ const Demo = (myargs, args) => () => {
     <>
       <Button
         onClick={() => updateArgs({ isOpen: true })}
-        label={'Show Modal'}
+        label={'Delete'}
+        variant="danger"
+        icon={<Icon name="Delete" />}
+        size="inline"
       />
       <Modal
-        close={() => updateArgs({ isOpen: false })}
+        role="alertdialog"
         isOpen={isOpen}
         footer={
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-            }}
-          >
+          <FooterActions>
             <Button
-              label="No"
-              size="default"
+              label="Cancel"
               variant="outline"
               onClick={() => updateArgs({ isOpen: false })}
             />
             <Button
-              variant="secondary"
-              label="Yes"
-              size="inline"
+              variant="danger"
+              label="Delete"
+              icon={<Icon name="Delete" />}
               onClick={() => updateArgs({ isOpen: false })}
             />
-          </div>
+          </FooterActions>
         }
         {...args}
       />
@@ -126,22 +171,17 @@ export const WithinTable = {
       {
         Header: 'First Name',
         accessor: 'firstName',
-        cellStyle: {
-          textAlign: 'left',
-        },
+        cellStyle: { textAlign: 'left' },
       },
       {
         Header: 'Last Name',
         accessor: 'lastName',
-        cellStyle: {
-          textAlign: 'left',
-        },
+        cellStyle: { textAlign: 'left' },
       },
       {
         Header: 'Actions',
         accessor: 'health',
         Cell: Demo(myArgs, args),
-        // disable the sorting on this column
         disableSortBy: true,
       },
     ];
@@ -153,12 +193,7 @@ export const WithinTable = {
       },
     ];
     return (
-      <div
-        style={{
-          height: '300px',
-          paddingTop: '20px',
-        }}
-      >
+      <div style={{ height: '300px', paddingTop: '20px' }}>
         <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
           <Table.SingleSelectableContent
             rowHeight="h32"
@@ -169,7 +204,7 @@ export const WithinTable = {
     );
   },
   args: {
-    title: 'Hello',
-    children: <span>Do you want a cookie?</span>,
+    title: 'Delete node?',
+    children: <span>This action cannot be undone.</span>,
   },
 };

package/src/lib/valalint/index.js

@@ -1,49 +0,0 @@
-import tsParser from '@typescript-eslint/parser';
-import technicalSentenceCase from './rules/technical-sentence-case.js';
-import modalButtonForbiddenLabel from './rules/modal-button-forbidden-label.js';
-import noRawNumberInJsx from './rules/no-raw-number-in-jsx.js';
-
-const rules = {
-    'technical-sentence-case': technicalSentenceCase,
-    'modal-button-forbidden-label': modalButtonForbiddenLabel,
-    'no-raw-number-in-jsx': noRawNumberInJsx,
-};
-
-/** Default rule severity for the recommended config. */
-const recommendedRules = {
-    'valalint/technical-sentence-case': 'warn',
-    'valalint/modal-button-forbidden-label': 'warn',
-    'valalint/no-raw-number-in-jsx': 'warn',
-};
-
-const plugin = {
-    meta: {
-        name: 'valalint',
-        version: '1.0.0',
-    },
-
-    rules,
-    configs: {
-        /** Legacy eslintrc-style recommended config. */
-        recommended: {
-            plugins: ['valalint'],
-            rules: recommendedRules,
-        },
-    },
-};
-
-plugin.configs['flat/recommended'] = {
-    plugins: { valalint: plugin },
-    rules: recommendedRules,
-    languageOptions: {
-        parser: tsParser,
-        parserOptions: {
-            ecmaFeatures: {
-                jsx: true,
-            },
-            project: true,
-        },
-    },
-};
-
-export default plugin;

package/stories/modal.mdx

@@ -1,17 +0,0 @@
-import { Meta, Story, Canvas, Controls, Stories } from '@storybook/blocks';
-import { Modal } from '../src/lib/components/modal/Modal.component.tsx';
-import * as ModalStories from './modal.stories';
-
-<Meta of={ModalStories} />
-
-<Canvas of={ModalStories.SimpleModal} />
-
-<Controls of={ModalStories.SimpleModal} />
-
-#### With a customize Title
-
-<Story of={ModalStories.CustomizeTitle} />
-
-#### Inside a Table
-
-<Story of={ModalStories.WithinTable} />