diff --git a/src/components/cc-popover/cc-popover.js b/src/components/cc-popover/cc-popover.js index 8dfba87da..9964d0ee8 100644 --- a/src/components/cc-popover/cc-popover.js +++ b/src/components/cc-popover/cc-popover.js @@ -61,6 +61,7 @@ export class CcPopover extends LitElement { static get properties() { return { a11yName: { type: String, attribute: 'a11y-name' }, + disabled: { type: Boolean, reflect: true }, hideText: { type: Boolean, attribute: 'hide-text' }, icon: { type: Object }, isOpen: { type: Boolean, attribute: 'is-open', reflect: true }, @@ -74,6 +75,9 @@ export class CcPopover extends LitElement { /** @type {string|null} Sets the a11yName property of the underlying `cc-button` element. CAUTION: The accessible name should always start with the visible text if there is one. */ this.a11yName = null; + /** @type {boolean} Sets `disabled` attribute on the underlying `cc-button` element. */ + this.disabled = false; + /** @type {boolean} Whether the button text should be hidden. */ this.hideText = false; @@ -210,13 +214,14 @@ export class CcPopover extends LitElement { .a11yExpanded=${this.isOpen} .a11yName=${this.a11yName} ?hide-text=${this.hideText} + ?disabled=${this.disabled} .icon=${this.icon} @cc-button:click=${this.toggle} > - ${this.isOpen + ${this.isOpen && !this.disabled ? html`
diff --git a/src/components/cc-popover/cc-popover.stories.js b/src/components/cc-popover/cc-popover.stories.js index f88db54e0..0d094ab72 100644 --- a/src/components/cc-popover/cc-popover.stories.js +++ b/src/components/cc-popover/cc-popover.stories.js @@ -63,6 +63,13 @@ export const defaultStory = makeStory(conf, { items, }); +export const disabled = makeStory(conf, { + items: items.map((item) => ({ + ...item, + disabled: true, + })), +}); + export const withButtonText = makeStory(conf, { items: items.map((item) => ({ ...item,