feat: button tooltip

oramasearch · Jul 22, 2024 · 00f3d52 · 00f3d52
1 parent c774253
commit 00f3d52
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 37 deletions.
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -13,7 +13,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
   'class',
   'variant',
   'type',
-  'disabled'
+  'disabled',
+  'withTooltip'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -28,6 +28,7 @@ export namespace Components {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }
@@ -302,6 +303,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }

diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -9,9 +9,22 @@
   padding: var(--spacing-m, $spacing-m);
   cursor: pointer;
   font-family: var(--font-primary, font('primary'));
-
   transition: all 0.2s;
   transition-property: color, background-color, opacity;
+
+  &__tooltip {
+    display: block;
+    opacity: 0;
+    position: absolute;
+    background-color: var(--text-color-primary, text-color('primary'));
+    color: var(--background-color-primary, background-color('primary'));
+    padding: var(--spacing-s, $spacing-s);
+    border-radius: var(--radius-s, $radius-s);
+    font-size: 10px;
+    z-index: 1;
+    top: -28px;
+    animation: fadeInOut 1s ease-in-out 1;
+  }
 }
 
 .button--primary {
@@ -51,3 +64,15 @@
     background-color: var(--background-color-tertiary, background-color('tertiary'));
   }
 }
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -40,6 +40,7 @@ export class OramaButton {
   @Prop() variant?: ButtonProps['variant'] = 'primary'
   @Prop() type?: ButtonProps['type']
   @Prop() disabled?: boolean
+  @Prop() withTooltip?: string
 
   render() {
     const Tag = this.as
@@ -51,6 +52,7 @@ export class OramaButton {
     return (
       <Tag class={buttonClass} {...buttonProps} disabled={this.disabled}>
         <slot />
+        {this.withTooltip && <span class="button__tooltip">{this.withTooltip}</span>}
       </Tag>
     )
   }

diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                 | Default     |
-| ---------- | ---------- | ----------- | ------------------------------------ | ----------- |
-| `as`       | `as`       |             | `"a" \| "button"`                    | `'button'`  |
-| `class`    | `class`    |             | `string`                             | `undefined` |
-| `disabled` | `disabled` |             | `boolean`                            | `undefined` |
-| `type`     | `type`     |             | `"button" \| "reset" \| "submit"`    | `undefined` |
-| `variant`  | `variant`  |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| Property      | Attribute      | Description | Type                                 | Default     |
+| ------------- | -------------- | ----------- | ------------------------------------ | ----------- |
+| `as`          | `as`           |             | `"a" \| "button"`                    | `'button'`  |
+| `class`       | `class`        |             | `string`                             | `undefined` |
+| `disabled`    | `disabled`     |             | `boolean`                            | `undefined` |
+| `type`        | `type`         |             | `"button" \| "reset" \| "submit"`    | `undefined` |
+| `variant`     | `variant`      |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| `withTooltip` | `with-tooltip` |             | `string`                             | `undefined` |
 
 
 ## Dependencies

diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -72,29 +72,3 @@ orama-chat-assistent-message {
     transform: rotate(360deg);
   }
 }
-
-.tooltip {
-  display: block;
-  opacity: 0;
-  position: absolute;
-  background-color: var(--text-color-primary, text-color('primary'));
-  color: var(--background-color-primary, background-color('primary'));
-  padding: var(--spacing-s, $spacing-s);
-  border-radius: var(--radius-s, $radius-s);
-  font-size: 10px;
-  z-index: 1;
-  top: -28px;
-  animation: fadeInOut 1s ease-in-out 1;
-}
-
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -44,9 +44,9 @@ export class OramaChatAssistentMessage {
               variant="icon"
               onClick={this.handleCopyToClipboard}
               onKeyDown={this.handleCopyToClipboard}
+              withTooltip={this.isCopied ? 'Copied!' : undefined}
             >
-              {this.isCopied ? <ph-copy weight="fill" /> : <ph-copy />}
-              {this.isCopied && <span class="tooltip">Copied!</span>}
+              <ph-copy />
             </orama-button>
             <orama-button
               type="button"