Skip to content

Commit

Permalink
feat(Tooltip): allow the component to be always visible (#959)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgonzalezr
dgonzalezr authored Mar 25, 2024
1 parent b53c13c commit c5ac27e
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 22 deletions.
12 changes: 10 additions & 2 deletions packages/beeq/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1245,6 +1245,10 @@ export namespace Components {
"type": TToastType;
}
interface BqTooltip {
/**
* If true, the tooltip will always be visible
*/
"alwaysVisible"?: boolean;
/**
* Set the action when the tooltip should be displayed, on hover (default) or click
*/
Expand All @@ -1271,7 +1275,7 @@ export namespace Components {
*/
"show": () => Promise<void>;
/**
* Indicates whether or not the tooltip is visible
* Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger
*/
"visible"?: boolean;
}
Expand Down Expand Up @@ -3434,6 +3438,10 @@ declare namespace LocalJSX {
"type"?: TToastType;
}
interface BqTooltip {
/**
* If true, the tooltip will always be visible
*/
"alwaysVisible"?: boolean;
/**
* Set the action when the tooltip should be displayed, on hover (default) or click
*/
Expand All @@ -3452,7 +3460,7 @@ declare namespace LocalJSX {
*/
"sameWidth"?: boolean;
/**
* Indicates whether or not the tooltip is visible
* Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger
*/
"visible"?: boolean;
}
Expand Down
19 changes: 11 additions & 8 deletions packages/beeq/src/components/tooltip/_storybook/bq-tooltip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const meta: Meta = {
layout: 'centered',
},
argTypes: {
'always-visible': { control: 'boolean' },
distance: { control: 'number' },
'display-on': { control: 'inline-radio', options: ['click', 'hover'] },
'hide-arrow': { control: 'boolean' },
Expand All @@ -24,6 +25,7 @@ const meta: Meta = {
text: { control: 'text', table: { disable: true } },
},
args: {
'always-visible': false,
distance: 10,
'display-on': 'hover',
'hide-arrow': false,
Expand All @@ -38,6 +40,7 @@ type Story = StoryObj;

const Template = (args: Args) => html`
<bq-tooltip
always-visible=${args['always-visible']}
distance=${args.distance}
display-on=${args['display-on']}
?hide-arrow=${args['hide-arrow']}
Expand All @@ -52,7 +55,6 @@ const Template = (args: Args) => html`

export const Default: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃",
visible: true,
Expand All @@ -61,7 +63,6 @@ export const Default: Story = {

export const Bottom: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃",
placement: 'bottom',
Expand All @@ -71,7 +72,6 @@ export const Bottom: Story = {

export const Right: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃",
placement: 'right',
Expand All @@ -81,7 +81,6 @@ export const Right: Story = {

export const Left: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃",
placement: 'left',
Expand All @@ -91,7 +90,6 @@ export const Left: Story = {

export const NoArrow: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃",
'hide-arrow': true,
Expand All @@ -101,7 +99,6 @@ export const NoArrow: Story = {

export const SameWidth: Story = {
render: Template,

args: {
text: 'Tooltip',
'same-width': true,
Expand All @@ -111,13 +108,20 @@ export const SameWidth: Story = {

export const LongContent: Story = {
render: Template,

args: {
text: "Yuhu! I'm a tooltip 🙃, and I'm a long text that probably shouldn't be shown here but 'ce sa fac'",
visible: true,
},
};

export const AlwaysVisible: Story = {
render: Template,
args: {
text: "Yuhu! I'm a tooltip 🙃, and I'm a long text that probably shouldn't be shown here but 'ce sa fac'",
'always-visible': true,
},
};

export const DisplayOnClick: Story = {
render: (args: Args) => html`
<bq-tooltip
Expand All @@ -135,7 +139,6 @@ export const DisplayOnClick: Story = {
</bq-button>
</bq-tooltip>
`,

args: {
'display-on': 'click',
text: "Yuhu! I'm a tooltip 🙃",
Expand Down
20 changes: 16 additions & 4 deletions packages/beeq/src/components/tooltip/bq-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export class BqTooltip {
// Public Property API
// ========================

/** If true, the tooltip will always be visible */
@Prop() alwaysVisible?: boolean = false;

/** Distance between trigger element and tooltip */
@Prop({ reflect: true }) distance?: number = 10;

Expand All @@ -48,15 +51,18 @@ export class BqTooltip {
/** Set the action when the tooltip should be displayed, on hover (default) or click */
@Prop({ reflect: true }) displayOn: 'click' | 'hover' = 'hover';

/** Indicates whether or not the tooltip is visible */
/**
* Indicates whether or not the tooltip is visible when the component is first rendered,
* and when interacting with the trigger
*/
@Prop({ reflect: true, mutable: true }) visible? = false;

// Prop lifecycle events
// =======================

@Watch('visible')
async handleVisibleChange() {
if (!this.visible) {
if (!this.visible && !this.alwaysVisible) {
return await this.hide();
}

Expand Down Expand Up @@ -124,6 +130,8 @@ export class BqTooltip {
/** Hides the tooltip */
@Method()
async hide() {
if (this.alwaysVisible) return;

this.visible = false;
this.hideTooltip();
}
Expand Down Expand Up @@ -164,6 +172,10 @@ export class BqTooltip {
this.visible = false;
};

private get isHidden() {
return !this.visible && !this.alwaysVisible;
}

// render() function
// Always the last one in the class.
// ===================================
Expand All @@ -185,8 +197,8 @@ export class BqTooltip {
{/* PANEL */}
<div
class="bq-tooltip--panel"
aria-hidden={!this.visible}
hidden={!this.visible}
aria-hidden={this.isHidden}
hidden={this.isHidden}
role="tooltip"
ref={(el) => (this.panel = el)}
part="panel"
Expand Down
17 changes: 9 additions & 8 deletions packages/beeq/src/components/tooltip/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `displayOn` | `display-on` | Set the action when the tooltip should be displayed, on hover (default) or click | `"click" \| "hover"` | `'hover'` |
| `distance` | `distance` | Distance between trigger element and tooltip | `number` | `10` |
| `hideArrow` | `hide-arrow` | If true, the arrow on the tooltip content won't be shown | `boolean` | `false` |
| `placement` | `placement` | | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
| `sameWidth` | `same-width` | Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element) | `boolean` | `false` |
| `visible` | `visible` | Indicates whether or not the tooltip is visible | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `alwaysVisible` | `always-visible` | If true, the tooltip will always be visible | `boolean` | `false` |
| `displayOn` | `display-on` | Set the action when the tooltip should be displayed, on hover (default) or click | `"click" \| "hover"` | `'hover'` |
| `distance` | `distance` | Distance between trigger element and tooltip | `number` | `10` |
| `hideArrow` | `hide-arrow` | If true, the arrow on the tooltip content won't be shown | `boolean` | `false` |
| `placement` | `placement` | | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
| `sameWidth` | `same-width` | Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element) | `boolean` | `false` |
| `visible` | `visible` | Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger | `boolean` | `false` |


## Methods
Expand Down

0 comments on commit c5ac27e

Please sign in to comment.