feat(clipboard): add part on tooltip

ovh · Jul 29, 2024 · 19a7f7d · 19a7f7d
1 parent 7114e48
commit 19a7f7d
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 5 deletions.
diff --git a/packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.scss b/packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.scss
@@ -37,7 +37,6 @@
       flex-flow: row;
       column-gap: 4px;
       align-items: center;
-      justify-content: center;
 
       &__check {
         font-size: 1.125rem;

diff --git a/packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.tsx b/packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.tsx
@@ -70,6 +70,7 @@ export class OdsClipboard {
           !this.isDisabled &&
           <ods-tooltip
             onOdsTooltipHide={ () => this.onTooltipHide() }
+            part="tooltip"
             position="right"
             shadowDomTriggerId={ this.copyButtonId }
             triggerId={ this.hostId }>

diff --git a/packages/ods/src/components/clipboard/src/index.html b/packages/ods/src/components/clipboard/src/index.html
@@ -43,6 +43,15 @@
   <ods-clipboard value="Some content to copy Some content to copy Some content to copy Some content to copy">
   </ods-clipboard>
 
+  <p>Custom tooltip style</p>
+  <ods-clipboard class="custom-tooltip" value="Some content to copy">
+  </ods-clipboard>
+  <style>
+    .custom-tooltip::part(tooltip) {
+      width: 300px;
+    }
+  </style>
+
   <p>Event</p>
   <ods-clipboard id="event-clipboard" value="Event copied content">
   </ods-clipboard>

diff --git a/packages/ods/src/components/clipboard/tests/rendering/ods-clipboard.e2e.ts b/packages/ods/src/components/clipboard/tests/rendering/ods-clipboard.e2e.ts
@@ -4,7 +4,7 @@ import { newE2EPage } from '@stencil/core/testing';
 describe('ods-clipboard rendering', () => {
   let el: E2EElement;
   let page: E2EPage;
-  let tooltip: HTMLElement | null;
+  let tooltip: E2EElement;
 
   async function setup(content: string, customStyle?: string): Promise<void> {
     page = await newE2EPage();
@@ -17,7 +17,7 @@ describe('ods-clipboard rendering', () => {
     }
 
     el = await page.find('ods-clipboard');
-    tooltip = await el.shadowRoot.querySelector<HTMLElement>('ods-tooltip');
+    tooltip = await page.find('ods-clipboard >>> [part="tooltip"]');
   }
 
   it('should render the web component', async() => {
@@ -33,4 +33,14 @@ describe('ods-clipboard rendering', () => {
     expect(el.shadowRoot).not.toBeNull();
     expect(tooltip).toBeNull();
   });
+
+  describe('part', () => {
+    it('should render with custom style applied to the tooltip', async() => {
+      const customWidth = '200px';
+      await setup('<ods-clipboard></ods-clipboard>', `ods-clipboard::part(tooltip) { width: ${customWidth}; }`);
+
+      const tooltipStyle = await tooltip.getComputedStyle();
+      expect(tooltipStyle.getPropertyValue('width')).toBe(customWidth);
+    });
+  });
 });
diff --git a/packages/storybook/stories/components/clipboard/clipboard.stories.ts b/packages/storybook/stories/components/clipboard/clipboard.stories.ts
@@ -13,6 +13,19 @@ const meta: Meta = {
 export default meta;
 
 export const Demo: StoryObj = {
+  render: (arg) => html`
+<ods-clipboard class="my-clipboard"
+  is-disabled="${arg.isDisabled}"
+  label-copy="${arg.labelCopy}"
+  label-copy-success="${arg.labelCopySuccess}"
+  value="${arg.value}">
+</ods-clipboard>
+<style>
+  .my-clipboard::part(tooltip) {
+    ${arg.customTooltipCss}
+  }
+</style>
+  `,
   argTypes: orderControls({
     isDisabled: {
       table: {
@@ -22,18 +35,27 @@ export const Demo: StoryObj = {
       },
       control: 'boolean',
     },
+    customTooltipCss: {
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+      control: 'text',
+      description: 'Set a custom style to the tooltip. Example: "width: 200px;"',
+    },
     labelCopy: {
       table: {
         category: CONTROL_CATEGORY.general,
-        defaultValue: { summary: 'ø' },
+        defaultValue: { summary: 'Copy to clipboard' },
         type: { summary: 'string' },
       },
       control: 'text',
     },
     labelCopySuccess: {
       table: {
         category: CONTROL_CATEGORY.general,
-        defaultValue: { summary: 'ø' },
+        defaultValue: { summary: 'Copied!' },
         type: { summary: 'string' },
       },
       control: 'text',
@@ -49,6 +71,8 @@ export const Demo: StoryObj = {
   }),
   args: {
     isDisabled: false,
+    labelCopy: 'Copy to clipboard',
+    labelCopySuccess: 'Copied!',
   },
 };
 
@@ -62,6 +86,22 @@ export const CustomLabels: StoryObj = {
   `,
 };
 
+export const CustomTooltipCSS = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-clipboard class="my-custom-clipboard"
+               label-copy="Copier le contenu"
+               label-copy-success="Copié !"
+               value="Copy me">
+</ods-clipboard>
+<style>
+  .my-custom-clipboard::part(tooltip) {
+    width: 200px;
+  }
+</style>
+  `,
+};
+
 export const Default: StoryObj = {
   tags: ['isHidden'],
   render: () => html`

diff --git a/packages/storybook/stories/components/clipboard/documentation.mdx b/packages/storybook/stories/components/clipboard/documentation.mdx
@@ -18,6 +18,12 @@ Clipboard component allows user to preview and copy crucial information to its c
 
 <Markdown>{ SpecificationsClipboard }</Markdown>
 
+# Style customization
+
+You can add your own style on the tooltip element using the part `tooltip`.
+
+<Canvas of={ ClipboardStories.CustomTooltipCSS } sourceState='shown'/>
+
 # Examples
 
 ## Default