diff --git a/.yarn/cache/@carbon-icons-npm-10.48.2-0ef4d0184b-d483a8857f.zip b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip similarity index 57% rename from .yarn/cache/@carbon-icons-npm-10.48.2-0ef4d0184b-d483a8857f.zip rename to .yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip index 8dc3f95adbb..db445971452 100644 Binary files a/.yarn/cache/@carbon-icons-npm-10.48.2-0ef4d0184b-d483a8857f.zip and b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip differ diff --git a/.yarn/cache/@carbon-styles-npm-1.44.0-cf4518b834-5c4fe751a6.zip b/.yarn/cache/@carbon-styles-npm-1.44.0-cf4518b834-5c4fe751a6.zip new file mode 100644 index 00000000000..bea5204021f Binary files /dev/null and b/.yarn/cache/@carbon-styles-npm-1.44.0-cf4518b834-5c4fe751a6.zip differ diff --git a/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip b/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip new file mode 100644 index 00000000000..905adda188b Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip differ diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json index 30c2fc26256..f0c92fb4ce8 100644 --- a/packages/carbon-web-components/package.json +++ b/packages/carbon-web-components/package.json @@ -72,7 +72,7 @@ ], "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/styles": "^1.42.0", + "@carbon/styles": "1.44.0", "flatpickr": "4.6.1", "lit": "^2.7.6", "lodash-es": "^4.17.21" @@ -93,7 +93,7 @@ "@babel/template": "~7.12.0", "@babel/traverse": "~7.23.0", "@carbon/icon-helpers": "^10.28.0", - "@carbon/icons": "^10.48.0", + "@carbon/icons": "^11.31.0", "@open-wc/semantic-dom-diff": "~0.18.0", "@percy-io/in-percy": "^0.1.11", "@percy/cli": "^1.8.1", diff --git a/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/packages/carbon-web-components/src/components/accordion/accordion-item.ts index 7cb7b17e872..20117596d41 100644 --- a/packages/carbon-web-components/src/components/accordion/accordion-item.ts +++ b/packages/carbon-web-components/src/components/accordion/accordion-item.ts @@ -107,6 +107,15 @@ class CDSAccordionItem extends FocusMixin(LitElement) { ) ); } + const content = this.shadowRoot!.querySelector(`.${prefix}--accordion__wrapper`) as HTMLElement; + + if (this.open) { + // accordion opens + content!.style.maxBlockSize = content!.scrollHeight + 15 + 'px'; + } else { + // accordion closes + content!.style.maxBlockSize = ''; + } } /** @@ -213,8 +222,10 @@ class CDSAccordionItem extends FocusMixin(LitElement) { ${title} -
- +
+
+ +
`; } diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.scss b/packages/carbon-web-components/src/components/combo-box/combo-box.scss index ee1fbba470e..868e0c147d6 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.scss +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.scss @@ -11,6 +11,7 @@ $css--plex: true !default; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/layout' as *; @use '@carbon/styles/scss/components/combo-box' as *; @use '@carbon/styles/scss/components/form'; @@ -120,3 +121,47 @@ $css--plex: true !default; padding-bottom: rem(15px); } } + +:host(#{$prefix}-combo-box[slug]) { + @extend .#{$prefix}--list-box__wrapper--slug; + + .#{$prefix}--list-box__field { + padding: 0; + } + + ::slotted(#{$prefix}-slug) { + position: absolute; + inset-block-start: 50%; + inset-inline-end: $spacing-08; + } + + ::slotted(#{$prefix}-slug:not([revert-active])) { + transform: translateY(-50%); + } +} + +:host(#{$prefix}-combo-box[slug][isclosable]) { + ::slotted(#{$prefix}-slug) { + inset-inline-end: $spacing-10; + } +} + +:host(#{$prefix}-combo-box[warn]), +:host(#{$prefix}-combo-box[invalid]) { + ::slotted(#{$prefix}-slug) { + inset-inline-end: $spacing-10; + } +} + +:host(#{$prefix}-combo-box[slug][isclosable]) { + ::slotted(#{$prefix}-slug) { + inset-inline-end: $spacing-10; + } +} + +:host(#{$prefix}-combo-box[warn][isclosable]), +:host(#{$prefix}-combo-box[invalid][isclosable]) { + ::slotted(#{$prefix}-slug) { + inset-inline-end: to-rem(88px); + } +} diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.ts index 1afcef774bd..f4995d67e0b 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.ts +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.ts @@ -291,7 +291,8 @@ class CDSComboBox extends CDSDropdown { return true; } - updated() { + updated(changedProperties) { + super.updated(changedProperties); const { _listBoxNode: listBoxNode } = this; if (listBoxNode) { listBoxNode.classList.add(`${prefix}--combo-box`); diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts index be8900b0535..a7a03fee941 100644 --- a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts +++ b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts @@ -30,6 +30,30 @@ export { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND }; */ @customElement(`${prefix}-date-picker-input`) class CDSDatePickerInput extends FocusMixin(LitElement) { + /** + * `true` if there is a slug. + */ + private _hasSlug = false; + + /** + * Handles `slotchange` event. + */ + protected _handleSlugSlotChange({ target }: Event) { + const hasContent = (target as HTMLSlotElement) + .assignedNodes() + .filter((elem) => + (elem as HTMLElement).matches !== undefined + ? (elem as HTMLElement).matches( + (this.constructor as typeof CDSDatePickerInput).slugItem + ) + : false + ); + + this._hasSlug = Boolean(hasContent); + (hasContent[0] as HTMLElement).setAttribute('size', 'mini'); + this.requestUpdate(); + } + /** * The calendar icon. */ @@ -218,6 +242,7 @@ class CDSDatePickerInput extends FocusMixin(LitElement) { warnText, _handleClickWrapper: handleClickWrapper, _handleInput: handleInput, + _hasSlug: hasSlug, } = this; const invalidIcon = WarningFilled16({ @@ -264,6 +289,7 @@ class CDSDatePickerInput extends FocusMixin(LitElement) { [`${prefix}--date-picker-input__wrapper--invalid`]: normalizedProps.invalid, [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn, + [`${prefix}--date-picker-input__wrapper--slug`]: hasSlug, }); const helperTextClasses = classMap({ @@ -276,18 +302,21 @@ class CDSDatePickerInput extends FocusMixin(LitElement) { ${labelText}
- - ${normalizedProps.icon || this._renderIcon()} + + + ${normalizedProps.icon || this._renderIcon()} + +
+ (elem as HTMLElement).matches !== undefined + ? (elem as HTMLElement).matches( + (this.constructor as typeof CDSDropdown).slugItem + ) + : false + ); + + this._hasSlug = Boolean(hasContent); + (hasContent[0] as HTMLElement).setAttribute('size', 'mini'); + this.requestUpdate(); + } + /** * Handles user-initiated selection of a dropdown item. * @@ -647,6 +671,13 @@ class CDSDropdown extends ValidityMixin( return true; } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + updated(_changedProperties) { + this._hasSlug + ? this.setAttribute('slug', '') + : this.removeAttribute('slug'); + } + /** * The CSS class list for dropdown listbox */ @@ -692,6 +723,7 @@ class CDSDropdown extends ValidityMixin( _handleKeydownInner: handleKeydownInner, _handleKeypressInner: handleKeypressInner, _handleSlotchangeHelperText: handleSlotchangeHelperText, + _handleSlugSlotChange: handleSlugSlotChange, _slotHelperTextNode: slotHelperTextNode, } = this; const inline = type === DROPDOWN_TYPE.INLINE; @@ -760,6 +792,7 @@ class CDSDropdown extends ValidityMixin( ${ChevronDown16({ 'aria-label': toggleLabel })}
+ ${menuBody}
${normalizedProps.icon} ${input} +
${!this.hideSteppers ? html`${decrementButton} ${incrementButton}` diff --git a/packages/carbon-web-components/src/components/select/select.scss b/packages/carbon-web-components/src/components/select/select.scss index 19293339944..630a112a13c 100644 --- a/packages/carbon-web-components/src/components/select/select.scss +++ b/packages/carbon-web-components/src/components/select/select.scss @@ -70,3 +70,22 @@ $css--plex: true !default; border-right: 1px solid $border-subtle; } } + +:host(#{$prefix}-select) { + ::slotted(#{$prefix}-slug) { + position: absolute; + inset-block-start: 50%; + inset-inline-end: $spacing-08; + } + + ::slotted(#{$prefix}-slug:not([revert-active])) { + transform: translateY(-50%); + } +} + +:host(#{$prefix}-select[warn]), +:host(#{$prefix}-select[invalid]) { + ::slotted(#{$prefix}-slug) { + inset-inline-end: $spacing-10; + } +} diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts index 9e91afacb18..4e23654ba2c 100644 --- a/packages/carbon-web-components/src/components/select/select.ts +++ b/packages/carbon-web-components/src/components/select/select.ts @@ -31,6 +31,11 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon- */ @customElement(`${prefix}-select`) class CDSSelect extends FormMixin(LitElement) { + /** + * `true` if there is a slug. + */ + protected _hasSlug = false; + /** * The mutation observer DOM mutation. */ @@ -133,6 +138,25 @@ class CDSSelect extends FormMixin(LitElement) { } } + /** + * Handles `slotchange` event. + */ + protected _handleSlugSlotChange({ target }: Event) { + const hasContent = (target as HTMLSlotElement) + .assignedNodes() + .filter((elem) => + (elem as HTMLElement).matches !== undefined + ? (elem as HTMLElement).matches( + (this.constructor as typeof CDSSelect).slugItem + ) + : false + ); + + this._hasSlug = Boolean(hasContent); + (hasContent[0] as HTMLElement).setAttribute('size', 'mini'); + this.requestUpdate(); + } + /** * The count of child `