styles(tooltip): add initial styles for the tooltip

didimmova · didimmova · commit 62563405bfc1 · 2025-04-04T12:56:10.000+03:00
diff --git a/src/components/tooltip/themes/dark/_themes.scss b/src/components/tooltip/themes/dark/_themes.scss
@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/tooltip' as *;
+
+$material: digest-schema($dark-material-tooltip);
+$bootstrap: digest-schema($dark-bootstrap-tooltip);
+$fluent: digest-schema($dark-fluent-tooltip);
+$indigo: digest-schema($dark-indigo-tooltip);
diff --git a/src/components/tooltip/themes/dark/tooltip.bootstrap.scss b/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/dark/tooltip.fluent.scss b/src/components/tooltip/themes/dark/tooltip.fluent.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/dark/tooltip.indigo.scss b/src/components/tooltip/themes/dark/tooltip.indigo.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/dark/tooltip.material.scss b/src/components/tooltip/themes/dark/tooltip.material.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/light/_themes.scss b/src/components/tooltip/themes/light/_themes.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/tooltip' as *;
+
+$base: digest-schema($light-tooltip);
+$material: digest-schema($material-tooltip);
+$bootstrap: digest-schema($bootstrap-tooltip);
+$fluent: digest-schema($fluent-tooltip);
+$indigo: digest-schema($indigo-tooltip);
diff --git a/src/components/tooltip/themes/light/tooltip.bootstrap.scss b/src/components/tooltip/themes/light/tooltip.bootstrap.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/light/tooltip.fluent.scss b/src/components/tooltip/themes/light/tooltip.fluent.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/light/tooltip.indigo.scss b/src/components/tooltip/themes/light/tooltip.indigo.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/light/tooltip.material.scss b/src/components/tooltip/themes/light/tooltip.material.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/light/tooltip.shared.scss b/src/components/tooltip/themes/light/tooltip.shared.scss
@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-tooltip');
+}
diff --git a/src/components/tooltip/themes/shared/tooltip.common.scss b/src/components/tooltip/themes/shared/tooltip.common.scss
@@ -0,0 +1,42 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $material;
+$transparent-border: rem(4px) solid transparent;
+$color-border: rem(4px) solid var-get($theme, 'background');
+
+[part='base'] {
+    background: var-get($theme, 'background');
+    color: var-get($theme, 'text-color');
+    border-radius: var-get($theme, 'border-radius');
+}
+
+#arrow {
+    &[part='top'],
+    &[part='bottom'] {
+        border-inline-start: $transparent-border;
+        border-inline-end: $transparent-border;
+    }
+
+    &[part='top'] {
+        border-block-start: $color-border;
+    }
+
+    &[part='bottom'] {
+        border-block-end: $color-border;
+    }
+
+    &[part='left'],
+    &[part='right'] {
+        border-block-start: $transparent-border;
+        border-block-end: $transparent-border;
+    }
+
+    &[part='left'] {
+        border-inline-start: $color-border;
+    }
+
+    &[part='right'] {
+        border-inline-end: $color-border;
+    }
+}
diff --git a/src/components/tooltip/themes/themes.ts b/src/components/tooltip/themes/themes.ts
@@ -0,0 +1,52 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../../theming/types.js';
+import { styles as bootstrapDark } from './dark/tooltip.bootstrap.css.js';
+// Dark Overrides
+import { styles as fluentDark } from './dark/tooltip.fluent.css.js';
+import { styles as indigoDark } from './dark/tooltip.indigo.css.js';
+import { styles as materialDark } from './dark/tooltip.material.css.js';
+// Light Overrides
+import { styles as bootstrapLight } from './light/tooltip.bootstrap.css.js';
+import { styles as fluentLight } from './light/tooltip.fluent.css.js';
+import { styles as indigoLight } from './light/tooltip.indigo.css.js';
+import { styles as materialLight } from './light/tooltip.material.css.js';
+import { styles as shared } from './light/tooltip.shared.css.js';
+
+const light = {
+  shared: css`
+    ${shared}
+  `,
+  bootstrap: css`
+    ${bootstrapLight}
+  `,
+  material: css`
+    ${materialLight}
+  `,
+  fluent: css`
+    ${fluentLight}
+  `,
+  indigo: css`
+    ${indigoLight}
+  `,
+};
+
+const dark = {
+  shared: css`
+    ${shared}
+  `,
+  bootstrap: css`
+    ${bootstrapDark}
+  `,
+  material: css`
+    ${materialDark}
+  `,
+  fluent: css`
+    ${fluentDark}
+  `,
+  indigo: css`
+    ${indigoDark}
+  `,
+};
+
+export const all: Themes = { light, dark };
diff --git a/src/components/tooltip/themes/tooltip.base.scss b/src/components/tooltip/themes/tooltip.base.scss
@@ -11,18 +11,21 @@
 [part="base"] {
     @include type-style('body-2');
 
-    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 25%) 200%);
-    background-blend-mode: multiply;
-    padding: 0.25rem;
-    color: #fff;
+    padding: rem(3px) rem(8px);
+    font-size: rem(10px);
+    font-weight: 600;
+    text-align: start;
+    max-width: 200px;
+    display: flex;
+    align-items: flex-start;
+    gap: rem(8px);
+    position: relative;
 }
 
 #arrow {
     position: absolute;
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-    background: inherit;
+    width: 0;
+    height: 0;
 }
 
 igc-popover::part(container) {
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
@@ -5,12 +5,15 @@ import { EaseOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
 import { fadeOut } from '../../animations/presets/fade/index.js';
 import { scaleInCenter } from '../../animations/presets/scale/index.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { getElementByIdFromRoot, isString } from '../common/util.js';
 import IgcPopoverComponent, { type IgcPlacement } from '../popover/popover.js';
+import { styles as shared } from './themes/shared/tooltip.common.css.js';
+import { all } from './themes/themes.js';
 import { styles } from './themes/tooltip.base.css.js';
 import {
   addTooltipController,
@@ -40,13 +43,13 @@ function parseTriggers(string: string): string[] {
  * @fires igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing.
  * @fires igcClosed - Emitted after the tooltip has been fully removed from view.
  */
+@themes(all)
 export default class IgcTooltipComponent extends EventEmitterMixin<
   IgcTooltipComponentEventMap,
   Constructor<LitElement>
 >(LitElement) {
   public static readonly tagName = 'igc-tooltip';
-
-  public static styles = styles;
+  public static styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
diff --git a/stories/tooltip.stories.ts b/stories/tooltip.stories.ts
@@ -4,9 +4,11 @@ import {
   IgcAvatarComponent,
   IgcButtonComponent,
   IgcCardComponent,
+  IgcIconComponent,
   IgcInputComponent,
   IgcTooltipComponent,
   defineComponents,
+  registerIcon,
 } from 'igniteui-webcomponents';
 import { html } from 'lit';
 
@@ -15,7 +17,8 @@ defineComponents(
   IgcInputComponent,
   IgcTooltipComponent,
   IgcCardComponent,
-  IgcAvatarComponent
+  IgcAvatarComponent,
+  IgcIconComponent
 );
 
 // region default
@@ -172,19 +175,23 @@ type Story = StoryObj<IgcTooltipArgs>;
 
 // endregion
 
+registerIcon(
+  'home',
+  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg'
+);
+
 export const Basic: Story = {
   render: (args) => html`
     <igc-tooltip anchor="kek" ?open=${args.open}>
-      <div style="display: flex; align-items: center">
-        <igc-icon name="search"></igc-icon>
-        With an IDREF reference...
-      </div>
+      With an IDREF reference...
     </igc-tooltip>
 
     <igc-button>Focus me</igc-button>
 
     <igc-tooltip ?open=${args.open} show-triggers="focus" hide-triggers="blur">
-      I will be shown until you blur the button above.
+      I will be shown until you blur the button above. Some super long text that
+      never ends.
+      <igc-icon name="home"></igc-icon>
     </igc-tooltip>
 
     <igc-input label="Password" required minlength="12"></igc-input>
@@ -198,8 +205,14 @@ export const Basic: Story = {
       >Minimum of 12 characters</igc-tooltip
     >
 
-    <igc-button id="kek">TOP KEK</igc-button>
-    <igc-tooltip placement="bottom-start" open>Initial open state</igc-tooltip>
+    <div style="margin: 50px 50%;">
+      <igc-button id="kek">TOP KEK</igc-button>
+      <igc-tooltip placement="bottom-start" open
+        >Initial open state</igc-tooltip
+      >
+      <igc-tooltip placement="right" anchor="kek">Right Tooltip</igc-tooltip>
+      <igc-tooltip placement="left" anchor="kek">Left Tooltip</igc-tooltip>
+    </div>
 
     <p>
       Here is some text with a
