From 3bda789c5dcdd4de7f6df31d7e050f9dc2218d86 Mon Sep 17 00:00:00 2001 From: Eduard Marcinco Date: Fri, 22 Nov 2024 16:53:34 +0100 Subject: [PATCH] feat: fluid state for combobox (#3010) Co-authored-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com> --- package-lock.json | 180 ++++++++++++++++++++++++----- package.json | 2 +- src/combobox/combobox.component.ts | 28 ++++- src/combobox/combobox.stories.ts | 9 +- 4 files changed, 183 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6d091da5a..89e07d6225 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,7 @@ "@angular/platform-browser-dynamic": "14.3.0", "@angular/router": "14.3.0", "@babel/core": "7.9.6", - "@carbon/styles": "1.67.0", + "@carbon/styles": "1.70.0", "@carbon/themes": "11.24.0", "@commitlint/cli": "17.0.3", "@commitlint/config-conventional": "17.0.3", @@ -3819,11 +3819,12 @@ } }, "node_modules/@carbon/feature-flags": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.23.1.tgz", - "integrity": "sha512-PUpAyPQ/ktG1FLCLs4yJC8zKupHnZa8ApOn/lzgln63bz6nTRIc7NBMhb/T/ulFe1ixdvQnrb6jgn2Nw159+6A==", + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.24.0.tgz", + "integrity": "sha512-GQEeXnfmnAtGVfKHSwJoJUsZ8YXAMKgL1TkJf2cUVuHYFk2WScHvCx7SUTDFJKLalGB+QnZPNuFLZ5oapsuwPw==", "dev": true, "hasInstallScript": true, + "license": "Apache-2.0", "dependencies": { "@ibm/telemetry-js": "^1.5.0" } @@ -3870,20 +3871,29 @@ } }, "node_modules/@carbon/styles": { - "version": "1.67.0", - "resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.67.0.tgz", - "integrity": "sha512-enFC5f4VS9pxGZBe1GkUfcbHIgXUAGkRxijN2f5fNtes3/TcPWR1/RGVIelrgjolX5R4keokrrViEOclCsRLmQ==", + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.70.0.tgz", + "integrity": "sha512-iL3dQHufX/2mYhTu7GUbUF3MMn3fua3CaQ4oKSdVGtW2J3+eeZ7m90WUGjgnp/IevVJj+RY06am5k+5l0m2/yg==", "dev": true, "hasInstallScript": true, + "license": "Apache-2.0", "dependencies": { - "@carbon/colors": "^11.27.0", - "@carbon/feature-flags": "^0.23.0", - "@carbon/grid": "^11.28.0", - "@carbon/layout": "^11.27.0", - "@carbon/motion": "^11.23.0", - "@carbon/themes": "^11.42.0", - "@carbon/type": "^11.32.0", + "@carbon/colors": "^11.28.0", + "@carbon/feature-flags": "^0.24.0", + "@carbon/grid": "^11.29.0", + "@carbon/layout": "^11.28.0", + "@carbon/motion": "^11.24.0", + "@carbon/themes": "^11.43.0", + "@carbon/type": "^11.33.0", "@ibm/plex": "6.0.0-next.6", + "@ibm/plex-mono": "0.0.3-alpha.0", + "@ibm/plex-sans": "0.0.3-alpha.0", + "@ibm/plex-sans-arabic": "0.0.3-alpha.0", + "@ibm/plex-sans-devanagari": "0.0.3-alpha.0", + "@ibm/plex-sans-hebrew": "0.0.3-alpha.0", + "@ibm/plex-sans-thai": "0.0.3-alpha.0", + "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0", + "@ibm/plex-serif": "0.0.3-alpha.0", "@ibm/telemetry-js": "^1.5.0" }, "peerDependencies": { @@ -5957,6 +5967,62 @@ "node": ">=14" } }, + "node_modules/@ibm/plex-mono": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-mono/-/plex-mono-0.0.3-alpha.0.tgz", + "integrity": "sha512-xSa/c1vrzGmMR5xQr/aWP/q62jUD41mKwm2w4kFsvIVyT9fxC3wq81UYMSGBxQZ6+P1AROMSefF22aLXkv6uqw==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans/-/plex-sans-0.0.3-alpha.0.tgz", + "integrity": "sha512-JU3dmaJiTNL17MO2pTzUJUzYSLZjUmkFUOia9c/2mU4ehqyvw95yQ6G4XRRqEHQdUA7auO4I0GX8mcI8rQk/Tw==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans-arabic": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-arabic/-/plex-sans-arabic-0.0.3-alpha.0.tgz", + "integrity": "sha512-tFi6soIKl/A2xWf5/N9kCkMhv+MOcEewWWFM9Bz9U0YO5I4KR0qdUTU7rN4jTjvCJGPExwPFukQKBNz7djuShg==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans-devanagari": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-devanagari/-/plex-sans-devanagari-0.0.3-alpha.0.tgz", + "integrity": "sha512-jrhO6KOxwtpw3WaidCNSn+IWqxDyYGSUUP8i4WjmxkBREQNf4fSJwbjzgB79E/Mnhc3b2NZska+41k5owRlIoQ==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans-hebrew": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-hebrew/-/plex-sans-hebrew-0.0.3-alpha.0.tgz", + "integrity": "sha512-sMsn1jU8kyYfSlWMfjcbvpGXJIIXGOZD+sxtBcogZz4umnCq5ys+bmsqlzkfGR25DCB49WvseD2IHbejes0/aA==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans-thai": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-thai/-/plex-sans-thai-0.0.3-alpha.0.tgz", + "integrity": "sha512-3RteUFhshRTmP5Swq9LYravDXmVvjxtxsZ7qeSqjn31CUgeSuZKprDWb+RzSQrO+Jg7AI4g1lolzTr/jG/LnxA==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-sans-thai-looped": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-thai-looped/-/plex-sans-thai-looped-0.0.3-alpha.0.tgz", + "integrity": "sha512-mcddR5ZcAQx5TjmaxaXd6gTdtOgxlyVaKqjzQAjUbzNQy0cjTGhIJHB5VrFES7yJLRCtQNCNGP+bzupzHOQERw==", + "dev": true, + "license": "OFL-1.1" + }, + "node_modules/@ibm/plex-serif": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-serif/-/plex-serif-0.0.3-alpha.0.tgz", + "integrity": "sha512-wuyglvk5dVTiOtRMlGhbRdu9zptl84CHLhjzuWPb2LwU3IiFlVWAirKaRKRv/AFwtAT9RoTtvT7spEyffdCzFw==", + "dev": true, + "license": "OFL-1.1" + }, "node_modules/@ibm/telemetry-js": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@ibm/telemetry-js/-/telemetry-js-1.5.0.tgz", @@ -37868,9 +37934,9 @@ } }, "@carbon/feature-flags": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.23.1.tgz", - "integrity": "sha512-PUpAyPQ/ktG1FLCLs4yJC8zKupHnZa8ApOn/lzgln63bz6nTRIc7NBMhb/T/ulFe1ixdvQnrb6jgn2Nw159+6A==", + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.24.0.tgz", + "integrity": "sha512-GQEeXnfmnAtGVfKHSwJoJUsZ8YXAMKgL1TkJf2cUVuHYFk2WScHvCx7SUTDFJKLalGB+QnZPNuFLZ5oapsuwPw==", "dev": true, "requires": { "@ibm/telemetry-js": "^1.5.0" @@ -37915,19 +37981,27 @@ } }, "@carbon/styles": { - "version": "1.67.0", - "resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.67.0.tgz", - "integrity": "sha512-enFC5f4VS9pxGZBe1GkUfcbHIgXUAGkRxijN2f5fNtes3/TcPWR1/RGVIelrgjolX5R4keokrrViEOclCsRLmQ==", - "dev": true, - "requires": { - "@carbon/colors": "^11.27.0", - "@carbon/feature-flags": "^0.23.0", - "@carbon/grid": "^11.28.0", - "@carbon/layout": "^11.27.0", - "@carbon/motion": "^11.23.0", - "@carbon/themes": "^11.42.0", - "@carbon/type": "^11.32.0", + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.70.0.tgz", + "integrity": "sha512-iL3dQHufX/2mYhTu7GUbUF3MMn3fua3CaQ4oKSdVGtW2J3+eeZ7m90WUGjgnp/IevVJj+RY06am5k+5l0m2/yg==", + "dev": true, + "requires": { + "@carbon/colors": "^11.28.0", + "@carbon/feature-flags": "^0.24.0", + "@carbon/grid": "^11.29.0", + "@carbon/layout": "^11.28.0", + "@carbon/motion": "^11.24.0", + "@carbon/themes": "^11.43.0", + "@carbon/type": "^11.33.0", "@ibm/plex": "6.0.0-next.6", + "@ibm/plex-mono": "0.0.3-alpha.0", + "@ibm/plex-sans": "0.0.3-alpha.0", + "@ibm/plex-sans-arabic": "0.0.3-alpha.0", + "@ibm/plex-sans-devanagari": "0.0.3-alpha.0", + "@ibm/plex-sans-hebrew": "0.0.3-alpha.0", + "@ibm/plex-sans-thai": "0.0.3-alpha.0", + "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0", + "@ibm/plex-serif": "0.0.3-alpha.0", "@ibm/telemetry-js": "^1.5.0" }, "dependencies": { @@ -39338,6 +39412,54 @@ "integrity": "sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==", "dev": true }, + "@ibm/plex-mono": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-mono/-/plex-mono-0.0.3-alpha.0.tgz", + "integrity": "sha512-xSa/c1vrzGmMR5xQr/aWP/q62jUD41mKwm2w4kFsvIVyT9fxC3wq81UYMSGBxQZ6+P1AROMSefF22aLXkv6uqw==", + "dev": true + }, + "@ibm/plex-sans": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans/-/plex-sans-0.0.3-alpha.0.tgz", + "integrity": "sha512-JU3dmaJiTNL17MO2pTzUJUzYSLZjUmkFUOia9c/2mU4ehqyvw95yQ6G4XRRqEHQdUA7auO4I0GX8mcI8rQk/Tw==", + "dev": true + }, + "@ibm/plex-sans-arabic": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-arabic/-/plex-sans-arabic-0.0.3-alpha.0.tgz", + "integrity": "sha512-tFi6soIKl/A2xWf5/N9kCkMhv+MOcEewWWFM9Bz9U0YO5I4KR0qdUTU7rN4jTjvCJGPExwPFukQKBNz7djuShg==", + "dev": true + }, + "@ibm/plex-sans-devanagari": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-devanagari/-/plex-sans-devanagari-0.0.3-alpha.0.tgz", + "integrity": "sha512-jrhO6KOxwtpw3WaidCNSn+IWqxDyYGSUUP8i4WjmxkBREQNf4fSJwbjzgB79E/Mnhc3b2NZska+41k5owRlIoQ==", + "dev": true + }, + "@ibm/plex-sans-hebrew": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-hebrew/-/plex-sans-hebrew-0.0.3-alpha.0.tgz", + "integrity": "sha512-sMsn1jU8kyYfSlWMfjcbvpGXJIIXGOZD+sxtBcogZz4umnCq5ys+bmsqlzkfGR25DCB49WvseD2IHbejes0/aA==", + "dev": true + }, + "@ibm/plex-sans-thai": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-thai/-/plex-sans-thai-0.0.3-alpha.0.tgz", + "integrity": "sha512-3RteUFhshRTmP5Swq9LYravDXmVvjxtxsZ7qeSqjn31CUgeSuZKprDWb+RzSQrO+Jg7AI4g1lolzTr/jG/LnxA==", + "dev": true + }, + "@ibm/plex-sans-thai-looped": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-sans-thai-looped/-/plex-sans-thai-looped-0.0.3-alpha.0.tgz", + "integrity": "sha512-mcddR5ZcAQx5TjmaxaXd6gTdtOgxlyVaKqjzQAjUbzNQy0cjTGhIJHB5VrFES7yJLRCtQNCNGP+bzupzHOQERw==", + "dev": true + }, + "@ibm/plex-serif": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@ibm/plex-serif/-/plex-serif-0.0.3-alpha.0.tgz", + "integrity": "sha512-wuyglvk5dVTiOtRMlGhbRdu9zptl84CHLhjzuWPb2LwU3IiFlVWAirKaRKRv/AFwtAT9RoTtvT7spEyffdCzFw==", + "dev": true + }, "@ibm/telemetry-js": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@ibm/telemetry-js/-/telemetry-js-1.5.0.tgz", diff --git a/package.json b/package.json index 01eb72890f..764961ec9e 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "@angular/platform-browser-dynamic": "14.3.0", "@angular/router": "14.3.0", "@babel/core": "7.9.6", - "@carbon/styles": "1.67.0", + "@carbon/styles": "1.70.0", "@carbon/themes": "11.24.0", "@commitlint/cli": "17.0.3", "@commitlint/config-conventional": "17.0.3", diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts index fd65a9c3a5..d1397b97e6 100644 --- a/src/combobox/combobox.component.ts +++ b/src/combobox/combobox.component.ts @@ -40,7 +40,13 @@ import { Observable } from "rxjs"; @Component({ selector: "cds-combo-box, ibm-combo-box", template: ` -
+
+
{{helperText}} @@ -368,6 +377,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD * Set to `true` for readonly state. */ @Input() readonly = false; + /** + * Experimental: enable fluid state + */ + @Input() fluid = false; /** * Emits a ListItem * @@ -426,7 +439,6 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD @ViewChild("input", { static: true }) input: ElementRef; @ViewChild("listbox", { static: true }) listbox: ElementRef; @HostBinding("class.cds--list-box__wrapper") hostClass = true; - @HostBinding("style.display") display = "block"; public open = false; @@ -456,6 +468,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD protected _clearSelectionTitle = this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED"); protected _clearSelectionAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED"); + protected _isFocused = false; + /** * Creates an instance of ComboBox. */ @@ -877,6 +891,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD } } + handleFocus(event: FocusEvent) { + this._isFocused = event.type === "focus"; + } + protected updateSelected() { const selected = this.view.getSelected(); if (this.type === "multi") { diff --git a/src/combobox/combobox.stories.ts b/src/combobox/combobox.stories.ts index eae2b5892c..113db430f8 100644 --- a/src/combobox/combobox.stories.ts +++ b/src/combobox/combobox.stories.ts @@ -72,7 +72,8 @@ export default { dropUp: false, selectionFeedback: "top-after-reopen", size: "md", - theme: "dark" + theme: "dark", + fluid: false }, argTypes: { size: { @@ -119,6 +120,7 @@ const Template = (args) => ({ [items]="items" [theme]="theme" [dropUp]="dropUp" + [fluid]="fluid" (selected)="selected($event)" (submit)="submit($event)" (search)="search($event)" @@ -176,6 +178,10 @@ Dynamic.parameters = { } }; +export const Fluid = Template.bind({}); +Fluid.args = { + fluid: true +}; const MultiTemplate = (args) => ({ props: args, @@ -196,6 +202,7 @@ const MultiTemplate = (args) => ({ [selectionFeedback]="selectionFeedback" [dropUp]="dropUp" [appendInline]="appendInline" + [fluid]="fluid" type="multi" (selected)="selected($event)" (submit)="submit($event)"