feat(modal): add dialog part & add customCss option in demo

ovh · Jul 29, 2024 · 7c625e7 · 7c625e7
1 parent 13411ae
commit 7c625e7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
@@ -98,6 +98,7 @@ export class OdsModal {
         <dialog class='ods-modal__dialog'
           ref={ (el) => this.modalDialog = el as HTMLDialogElement }
           onClick={ (event) => this.handleBackdropClick(event) }
+          part='dialog'
         >
           <div class='ods-modal__backdrop'></div>
 

diff --git a/packages/storybook/stories/components/modal/documentation.mdx b/packages/storybook/stories/components/modal/documentation.mdx
@@ -21,7 +21,7 @@ A Modal component is used to overlay with important content the main view of a s
 
 # Style customization
 
-You can update the modal's content by directly updating the slot elements.
+You can update the modal's content by directly updating the slot elements. You can also update it using the `::part(dialog)`.
 
 Custom modal css:
 

diff --git a/packages/storybook/stories/components/modal/modal.stories.ts b/packages/storybook/stories/components/modal/modal.stories.ts
@@ -21,12 +21,7 @@ export const Demo: StoryObj = {
   ${unsafeHTML(args.actions)}
 </ods-modal>
 <style>
-  .modal-demo .my-text::part(text) {
-    margin: 0 0 1rem 0;
-  }
-  .modal-demo ods-button::part(button) {
-    margin-top: 1rem;
-  }
+  ${unsafeHTML(args.customCss)}
 </style>
   `,
   argTypes: orderControls({
@@ -69,6 +64,14 @@ export const Demo: StoryObj = {
       },
       control: 'text',
     },
+    customCss: {
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+      },
+      control: 'text',
+      description: 'Set a custom style properties. Example: "ods-modal::part(dialog) { border: 1px red solid; }"',
+    }
   }),
   args: {
     isOpen: true,
@@ -80,6 +83,13 @@ export const Demo: StoryObj = {
     actions:
 `<ods-button label="Migration guide" slot="actions" variant="outline" icon="upload"></ods-button>
 <ods-button label="Documentation" slot="actions" icon="book"></ods-button>`,
+    customCss:
+`.modal-demo .my-text::part(text) {
+  margin: 0 0 1rem 0;
+}
+.modal-demo ods-button::part(button) {
+  margin-top: 1rem;
+}`
   },
 };
 
@@ -149,6 +159,11 @@ export const CustomCSS: StoryObj = {
   .modal-custom-css .my-text {
     color: red;
   }
+
+  .modal-custom-css::part(dialog) {
+    border: .5rem red solid;
+    height: 90%;
+  }
 </style>
   `,
 };