Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toggletip): add option for alternate icon #11694

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Next Next commit
feat(Toggletip): custom icon option
  • Loading branch information
sangeethababu9223 committed Mar 28, 2024
commit 24c517de221c38c183e4c9d564910fe205f0d7b3
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ import { select } from '@storybook/addon-knobs';
import textNullable from '../../../.storybook/knob-text-nullable';
import { ifDefined } from 'lit/directives/if-defined.js';
import { prefix } from '../../globals/settings';
import Information16 from '@carbon/icons/lib/information/16';
import './toggletip';
import '../button';
import { POPOVER_ALIGNMENT } from '../popover/defs';
@@ -35,9 +36,11 @@ const tooltipAlignments = {
export const Default = (args) => {
const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {};
return html`
<cds-toggletip alignment="${ifDefined(alignment)}">
<cds-toggletip alignment="${ifDefined(alignment)}" hasCustomIcon>
Toggletip label

<span slot="icon">
${Information16({ id: 'trigger' })}
</span>
<p slot="body-text">${bodyText}</p>
<cds-link slot="actions">Test</cds-link>
<cds-button slot="actions">Button</cds-button>
Original file line number Diff line number Diff line change
@@ -48,6 +48,11 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
*/
@property({ type: Boolean, reflect: true })
open = false;
/**
* Set whether toggletip is open
*/
@property({ type: Boolean })
hasCustomIcon = false;

/**
* Handles `slotchange` event.
@@ -96,12 +101,15 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
};

protected _renderTooltipButton = () => {
const {hasCustomIcon} = this;
return html`
<button
aria-controls="${this.id}"
class="${prefix}--toggletip-button"
@click=${this._handleClick}>
${Information16({ id: 'trigger' })}
${hasCustomIcon ? html `
<slot name="icon"></slot>
` : html `${Information16({ id: 'trigger' })}` }
</button>
`;
};
@@ -143,6 +151,11 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
${this._renderTooltipButton()} ${this._renderTooltipContent()}
`;
};
firstUpdated() {
if(this.hasAttribute('hasCustomIcon')){
this.hasCustomIcon = true;
}
}

updated() {
if (this.autoalign && this.open) {