diff --git a/.changeset/fifty-news-knock.md b/.changeset/fifty-news-knock.md new file mode 100644 index 0000000000..edad089c1e --- /dev/null +++ b/.changeset/fifty-news-knock.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: workaround for Safari which sometimes double-renders icons diff --git a/.changeset/rude-jeans-fix.md b/.changeset/rude-jeans-fix.md new file mode 100644 index 0000000000..df1bb4c9cc --- /dev/null +++ b/.changeset/rude-jeans-fix.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: workaround for Safari which sometimes double-renders icons diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts index b7cecf9c5e..dade2cc79f 100644 --- a/elements/rh-cta/rh-cta.ts +++ b/elements/rh-cta/rh-cta.ts @@ -1,6 +1,7 @@ -import { LitElement, html, isServer, noChange } from 'lit'; +import { LitElement, html, isServer } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; +import { state } from 'lit/decorators/state.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -13,7 +14,6 @@ import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/c import type { IconNameFor, IconSetName } from '@rhds/icons'; import style from './rh-cta.css'; -import { state } from 'lit/decorators/state.js'; function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement { return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement; @@ -106,19 +106,13 @@ export class RhCta extends LitElement { /** when `href` is set, the link's `target` attribute */ @property() target?: string; - /** - * Icon name - */ + /** Icon name */ @property({ reflect: true }) icon?: IconNameFor; - /** - * Icon set - */ + /** Icon set */ @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui'; - /** - * Sets color theme based on parent context - */ + /** Sets color theme based on parent context */ @colorContextConsumer() @state() private on?: ColorTheme; protected override async getUpdateComplete(): Promise { @@ -142,17 +136,12 @@ export class RhCta extends LitElement { const rtl = this.#dir.dir === 'rtl'; const isDefault = !variant; const svg = isDefault; - const iconOrSvg = isDefault || !!icon; const follower = - (variant !== 'brick' && icon) ? - html`` - : (variant === undefined) ? - html`` - : html``; + (variant !== 'brick' && icon) ? html`` + : (variant === undefined) ? html`` + : ''; const iconContent = - (variant === 'brick' && icon) ? - html`` - : html``; + !(variant === 'brick' && icon) ? '' : html``; const linkContent = !href ? html`${follower}` : html`