Skip to content

Commit

Permalink
Refactor tooltip
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@anicyne
anicyne committed Dec 11, 2024
1 parent 3295093 commit 8f4bdfc
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 109 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/input-password/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
transform: translateX(-100%);
}

.kol-tooltip-wc {
.kol-tooltip {
--kol-tooltip-width: #{rem(160)};
}
}
6 changes: 3 additions & 3 deletions packages/components/src/components/tooltip/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { autoUpdate } from '@floating-ui/dom';
import type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';
import { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';
import type { JSX } from '@stencil/core';
import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';

import { alignFloatingElements } from '../../utils/align-floating-elements';
import { hideOverlay, showOverlay } from '../../utils/overlay';
Expand Down Expand Up @@ -125,14 +125,14 @@ export class KolTooltipWc implements TooltipAPI {

public render(): JSX.Element {
return (
<div class="kol-tooltip">
<Host class="kol-tooltip">
{this.state._label !== '' && (
<div class="kol-tooltip__floating" ref={this.catchTooltipElement}>
<div class="kol-tooltip__area kol-tooltip__arrow" ref={this.catchArrowElement} />
<KolSpanFc class="kol-tooltip__area kol-tooltip__content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />
</div>
)}
</div>
</Host>
);
}

Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/components/tooltip/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
@import '../@shared/mixins';

@layer kol-component {
.kol-tooltip {
:host {
font-size: rem(16);
}

.kol-tooltip {
display: contents;

&__floating {
Expand Down
100 changes: 45 additions & 55 deletions packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="bottom" 1`] = `
<kol-tooltip-wc>
<div class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
<kol-tooltip-wc class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
</span>
</div>
</span>
</div>
</kol-tooltip-wc>
`;

exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left" 1`] = `
<kol-tooltip-wc>
<div class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
<kol-tooltip-wc class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
</span>
</div>
</span>
</div>
</kol-tooltip-wc>
`;

exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right" 1`] = `
<kol-tooltip-wc>
<div class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
<kol-tooltip-wc class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
</span>
</div>
</span>
</div>
</kol-tooltip-wc>
`;

exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top" 1`] = `
<kol-tooltip-wc>
<div class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
<kol-tooltip-wc class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
</span>
</div>
</span>
</div>
</kol-tooltip-wc>
`;

exports[`kol-tooltip-wc should render with _id="id" _label="Label" 1`] = `
<kol-tooltip-wc>
<div class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
<kol-tooltip-wc class="kol-tooltip">
<div class="kol-tooltip__floating">
<div class="kol-tooltip__area kol-tooltip__arrow"></div>
<span class="kol-span kol-tooltip__area kol-tooltip__content" id="id">
<span class="kol-span__container">
<span class="kol-span__label">
Label
</span>
<span aria-hidden="true" class="kol-span__label" hidden=""></span>
</span>
</div>
</span>
</div>
</kol-tooltip-wc>
`;
30 changes: 16 additions & 14 deletions packages/themes/default/src/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,25 @@
font-weight: 700;
}

.kol-tooltip-wc .tooltip-floating {
border: var(--border-width) solid var(--color-subtle);
border-radius: var(--border-radius);
}
.kol-tooltip {
&__tooltip-floating {
border: var(--border-width) solid var(--color-subtle);
border-radius: var(--border-radius);
}

.kol-tooltip-wc .tooltip-arrow {
border: var(--border-width) solid var(--color-subtle);
}
&__tooltip-arrow {
border: var(--border-width) solid var(--color-subtle);
}

.kol-tooltip-wc .tooltip-area {
background-color: var(--color-light);
}
&__tooltip-area {
background-color: var(--color-light);
}

.kol-tooltip-wc .tooltip-content {
border-radius: var(--border-radius);
line-height: 1.5;
padding: rem(8) rem(12);
&__tooltip-content {
border-radius: var(--border-radius);
line-height: 1.5;
padding: rem(8) rem(12);
}
}

.kol-span,
Expand Down
26 changes: 14 additions & 12 deletions packages/themes/ecl/src/ecl-ec/global.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
@import '../mixins/rem';

@layer kol-theme-global {
.kol-tooltip-wc .tooltip-area {
background-color: #f2f2f2;
}
.kol-tooltip {
&__tooltip-area {
background-color: #f2f2f2;
}

.kol-tooltip-wc .tooltip-arrow {
background-color: #626262;
}
&__tooltip-arrow {
background-color: #626262;
}

.kol-tooltip-wc .tooltip-content {
padding: rem(4) rem(8);
font-size: rem(14);
line-height: 1.2;
border-radius: rem(2);
border: rem(1) solid #626262;
&__tooltip-content {
padding: rem(4) rem(8);
font-size: rem(14);
line-height: 1.2;
border-radius: rem(2);
border: rem(1) solid #626262;
}
}

:host {
Expand Down
26 changes: 14 additions & 12 deletions packages/themes/ecl/src/ecl-eu/global.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
@import '../mixins/rem';

@layer kol-theme-global {
.kol-tooltip-wc .tooltip-area {
background-color: #f2f2f2;
}
.kol-tooltip {
&__tooltip-area {
background-color: #f2f2f2;
}

.kol-tooltip-wc .tooltip-arrow {
background-color: #626262;
}
&__tooltip-arrow {
background-color: #626262;
}

.kol-tooltip-wc .tooltip-content {
padding: rem(4) rem(8);
font-size: rem(14);
line-height: 1.2;
border-radius: rem(2);
border: rem(1) solid #626262;
&__tooltip-content {
padding: rem(4) rem(8);
font-size: rem(14);
line-height: 1.2;
border-radius: rem(2);
border: rem(1) solid #626262;
}
}

:host {
Expand Down
24 changes: 13 additions & 11 deletions packages/themes/itzbund/src/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,20 @@
gap: 0.25em;
}

.kol-tooltip-wc .tooltip-area {
background-color: #f2f2f2;
}
.kol-tooltip {
&__tooltip-area {
background-color: #f2f2f2;
}

.kol-tooltip-wc .tooltip-arrow {
background-color: #626262;
}
&__tooltip-arrow {
background-color: #626262;
}

.kol-tooltip-wc .tooltip-content {
@include kol-typography-label;
padding: rem(4) rem(8);
border-radius: rem(2);
border: rem(1) solid #626262;
&__tooltip-content {
@include kol-typography-label;
padding: rem(4) rem(8);
border-radius: rem(2);
border: rem(1) solid #626262;
}
}
}

0 comments on commit 8f4bdfc

Please sign in to comment.