From 5cec825b793e595618b9546d17b1c73281f841e1 Mon Sep 17 00:00:00 2001 From: rcirlugea Date: Mon, 10 Apr 2023 22:58:16 +0300 Subject: [PATCH 01/16] feat(picker): add loading state to the picker --- packages/picker/README.md | 40 ++++++++++++++++++- packages/picker/package.json | 1 + packages/picker/src/Picker.ts | 17 +++++++- packages/picker/src/picker.css | 35 ++++++++++++++++ .../picker/stories/picker-sizes.stories.ts | 30 ++++++++++++++ packages/picker/stories/picker.stories.ts | 34 ++++++++++++++++ packages/picker/test/index.ts | 7 ++++ 7 files changed, 162 insertions(+), 2 deletions(-) diff --git a/packages/picker/README.md b/packages/picker/README.md index b3f139951eb..e1158bea53b 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -376,7 +376,7 @@ When the `value` of an `` matches the `value` attribute or the trimme

-Quiet: +Quiet: ` matches the `value` attribute or the trimme ``` +### Loading + +When given a `loading` attribute, an `` will be delivered with an `` to visually outline that it is `loading` and it will not toggle open or display its `` descendants until the attribute is removed. + +```html +Standard: + + Deselect + Select inverse + Feather... + Select and mask... + + Save selection + Make work path + +
+
+Quiet: + + Deselect + Select inverse + Feather... + Select and mask... + + Save selection + Make work path + +``` + ## Accessibility To render accessibly, an `` element should be paired with an `` element that has a `for` attribute referencing the `id` of the `` element. diff --git a/packages/picker/package.json b/packages/picker/package.json index c248a9748b9..6f5efb3faef 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -73,6 +73,7 @@ "@spectrum-web-components/menu": "^0.16.16", "@spectrum-web-components/overlay": "^0.19.4", "@spectrum-web-components/popover": "^0.12.16", + "@spectrum-web-components/progress-circle": "^0.7.8", "@spectrum-web-components/reactive-controllers": "^0.3.5", "@spectrum-web-components/shared": "^0.15.6", "@spectrum-web-components/tray": "^0.5.2" diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 1f5603ab2f2..1fdc0f08375 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -43,6 +43,8 @@ import type { } from '@spectrum-web-components/menu'; import '@spectrum-web-components/tray/sp-tray.js'; import '@spectrum-web-components/popover/sp-popover.js'; +import '@spectrum-web-components/progress-circle/sp-progress-circle.js'; + import type { Popover } from '@spectrum-web-components/popover'; import { openOverlay, @@ -105,6 +107,9 @@ export class PickerBase extends SizedMixin(Focusable) { @property({ type: Boolean, reflect: true }) public invalid = false; + @property({ type: Boolean, reflect: true }) + public loading = false; + @property() public label?: string; @@ -391,6 +396,7 @@ export class PickerBase extends SizedMixin(Focusable) { 'visually-hidden': this.icons === 'only' && !!this.value, placeholder: !this.value, }; + return [ html` @@ -406,6 +412,15 @@ export class PickerBase extends SizedMixin(Focusable) { > ` : nothing} + ${this.loading + ? html` + + ` + : nothing} ${this.buttonContent} diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css index 0dd395f7843..22ea9c23aa7 100644 --- a/packages/picker/src/picker.css +++ b/packages/picker/src/picker.css @@ -35,6 +35,41 @@ governing permissions and limitations under the License. --spectrum-picker-width: var(--spectrum-global-dimension-size-2400); } +:host([loading]) sp-progress-circle { + margin-inline-start: var( + --mod-picker-spacing-text-to-alert-icon-inline-start, + var(--spectrum-picker-spacing-text-to-alert-icon-inline-start) + ); +} + +:host([size='s']) sp-progress-circle { + --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-75); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-small + ); +} + +:host([size='m']) sp-progress-circle { + --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-small + ); +} + +:host([size='l']) sp-progress-circle { + --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-200); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); +} + +:host([size='xl']) sp-progress-circle { + --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-300); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-large + ); +} + #button { width: 100%; min-width: 100%; diff --git a/packages/picker/stories/picker-sizes.stories.ts b/packages/picker/stories/picker-sizes.stories.ts index a3f08d5589b..ce7701e76e4 100644 --- a/packages/picker/stories/picker-sizes.stories.ts +++ b/packages/picker/stories/picker-sizes.stories.ts @@ -22,19 +22,47 @@ export default { component: 'sp-picker', argTypes: { onChange: { action: 'change' }, + invalid: { + name: 'invalid', + type: { name: 'boolean', required: false }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }, + loading: { + name: 'loading', + type: { name: 'boolean', required: false }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }, }, }; type StoryArgs = { onChange: (val: string) => void; + invalid: boolean; + loading: boolean; }; const picker = ({ onChange, size, + loading, + invalid, }: { onChange: (val: string) => void; size: 's' | 'm' | 'l' | 'xl'; + loading: boolean; + invalid: boolean; }): TemplateResult => { return html` @@ -48,6 +76,8 @@ const picker = ({ onChange(picker.value); }}" label="Select a Country with a very long label, too long, in fact" + ?loading="${loading}" + ?invalid="${invalid}" > Deselect Select Inverse diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts index 34ecc4f87aa..40674fb1886 100644 --- a/packages/picker/stories/picker.stories.ts +++ b/packages/picker/stories/picker.stories.ts @@ -58,6 +58,17 @@ export default { type: 'boolean', }, }, + loading: { + name: 'loading', + type: { name: 'boolean', required: false }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }, open: { name: 'open', type: { name: 'boolean', required: false }, @@ -405,6 +416,29 @@ export const custom = (args: StoryArgs): TemplateResult => { `; }; +export const Loading = (args: StoryArgs): TemplateResult => { + return html` + + Picker in loading state + + + Loading... + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `; +}; + custom.args = { open: true, }; diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index aa6cd023681..afe464a7c3d 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -286,6 +286,13 @@ export function runPickerTests(): void { expect(el.invalid).to.be.true; await expect(el).to.be.accessible(); }); + it('renders loading accessibly', async () => { + el.loading = true; + await elementUpdated(el); + + expect(el.loading).to.be.true; + await expect(el).to.be.accessible(); + }); it('renders selection accessibly', async () => { el.value = 'option-2'; await elementUpdated(el); From 60903593c0731ad520c99332e92d389359b0b2ce Mon Sep 17 00:00:00 2001 From: rmanole Date: Mon, 19 Feb 2024 12:50:51 +0200 Subject: [PATCH 02/16] chore(picker): implement the code review --- packages/picker/README.md | 38 ++++++---------- packages/picker/src/Picker.ts | 44 ++++++++++++++----- packages/picker/src/picker.css | 7 --- packages/picker/src/spectrum-config.js | 5 +++ packages/picker/src/spectrum-picker.css | 6 +-- .../picker/stories/picker-sizes.stories.ts | 12 ++--- packages/picker/stories/picker.stories.ts | 42 +++++++++--------- packages/picker/test/index.ts | 7 --- 8 files changed, 80 insertions(+), 81 deletions(-) diff --git a/packages/picker/README.md b/packages/picker/README.md index 600699e09e5..fbcda331081 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -393,41 +393,31 @@ When the `value` of an `` matches the `value` attribute or the trimme ``` -### Loading +### Pending -When given a `loading` attribute, an `` will be delivered with an `` to visually outline that it is `loading` and it will not toggle open or display its `` descendants until the attribute is removed. +When in pending state, `` elements will not respond to click events and be delivered with a `` to visually outline that it is pending. It will not toggle open or display its `` descendants until the attribute is removed. ```html Standard: - - Deselect - Select inverse - Feather... - Select and mask... - - Save selection - Make work path + + Pass through + Normal + Multiply + Screen

Quiet: - Deselect - Select inverse - Feather... - Select and mask... - - Save selection - Make work path + Pass through + Normal + Multiply + Screen ``` diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 1ee3f65c567..b39bd905945 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -24,6 +24,7 @@ import { ifDefined, StyleInfo, styleMap, + when, } from '@spectrum-web-components/base/src/directives.js'; import { property, @@ -36,7 +37,6 @@ import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevr import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import type { Tooltip } from '@spectrum-web-components/tooltip'; -import '@spectrum-web-components/progress-circle/sp-progress-circle.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js'; import '@spectrum-web-components/menu/sp-menu.js'; @@ -85,7 +85,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { public invalid = false; @property({ type: Boolean, reflect: true }) - public loading = false; + public pending = false; @property() public label?: string; @@ -172,6 +172,10 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { private pointerdownState = false; protected handleButtonPointerdown(event: PointerEvent): void { + if (this.pending) { + return; + } + if (event.button !== 0) { return; } @@ -203,6 +207,10 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { } protected handleActivate(event?: Event): void { + if (this.pending) { + return; + } + if (this.enterKeydownOn && this.enterKeydownOn !== this.button) { return; } @@ -406,22 +414,26 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { : html` `} - ${this.invalid + ${this.invalid && !this.pending ? html` ` : nothing} - ${this.loading - ? html` - - ` - : nothing} + ${when(this.pending, () => { + import( + '@spectrum-web-components/progress-circle/sp-progress-circle.js' + ); + return html` + + `; + })} diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts index 47038060363..8bf78c87537 100644 --- a/packages/picker/stories/picker.stories.ts +++ b/packages/picker/stories/picker.stories.ts @@ -476,6 +476,26 @@ export const readonly = (args: StoryArgs): TemplateResult => { `; }; +export const pending = (args: StoryArgs): TemplateResult => { + return html` + Country + + Loading... + Deselect + Select Inverse + Feather... + Select and Mask... + Save Selection + Make Work Path + + `; +}; + export const custom = (args: StoryArgs): TemplateResult => { const initialState = 'lb1-mo'; return html` @@ -516,25 +536,3 @@ custom.args = { open: true, }; custom.decorators = [isOverlayOpen]; - -export const Loading = (args: StoryArgs): TemplateResult => { - return html` - - Picker in loading state - - - Loading... - Deselect - Select Inverse - Feather... - Select and Mask... - Save Selection - Make Work Path - - `; -}; diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index 7afaefe4ac0..2a6b3948b5e 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -455,13 +455,6 @@ export function runPickerTests(): void { expect(el.invalid).to.be.true; await expect(el).to.be.accessible(); }); - it('renders loading accessibly', async () => { - el.loading = true; - await elementUpdated(el); - - expect(el.loading).to.be.true; - await expect(el).to.be.accessible(); - }); it('renders selection accessibly', async () => { el.value = 'option-2'; await elementUpdated(el); From 0b9dd0388d359f0f5bd9c5f069b83c63a6e71e9d Mon Sep 17 00:00:00 2001 From: rmanole Date: Mon, 19 Feb 2024 14:20:33 +0200 Subject: [PATCH 03/16] chore(picker): update circleci golden image hash --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 956b25c5298..7a6475fc4b3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: c3df2b2da5c455e279b0a4396c2b15ee164dd246 + default: c087d9dfa295cd6e8caed1b63ff96043f3ade522 wireit_cache_name: type: string default: wireit From 56e02744a0839652a8ca3c2553e69eaa95b960ef Mon Sep 17 00:00:00 2001 From: rmanole Date: Mon, 19 Feb 2024 15:58:32 +0200 Subject: [PATCH 04/16] chore(picker): tests + a11y --- packages/picker/src/Picker.ts | 32 +++++++---------- packages/picker/src/picker.css | 2 +- packages/picker/stories/picker.stories.ts | 13 +++---- packages/picker/test/index.ts | 43 +++++++++++++++++++++++ 4 files changed, 62 insertions(+), 28 deletions(-) diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index ed2d6d53012..00be8480e65 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -176,10 +176,6 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { private pointerdownState = false; protected handleButtonPointerdown(event: PointerEvent): void { - if (this.pending) { - return; - } - if (event.button !== 0) { return; } @@ -211,10 +207,6 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { } protected handleActivate(event?: Event): void { - if (this.pending) { - return; - } - if (this.enterKeydownOn && this.enterKeydownOn !== this.button) { return; } @@ -318,7 +310,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { } public toggle(target?: boolean): void { - if (this.readonly) { + if (this.readonly || this.pending) { return; } this.open = typeof target !== 'undefined' ? target : !this.open; @@ -430,6 +422,13 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { '@spectrum-web-components/progress-circle/sp-progress-circle.js' ); return html` + management, // await the same here. @@ -782,10 +784,6 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { private enterKeydownOn: EventTarget | null = null; protected handleEnterKeydown = (event: KeyboardEvent): void => { - if (this.pending) { - return; - } - if (event.code !== 'Enter') { return; } @@ -846,11 +844,7 @@ export class Picker extends PickerBase { protected override handleKeydown = (event: KeyboardEvent): void => { const { code } = event; this.focused = true; - - if (this.pending) { - return; - } - if (!code.startsWith('Arrow') || this.readonly) { + if (!code.startsWith('Arrow') || this.readonly || this.pending) { return; } if (code === 'ArrowUp' || code === 'ArrowDown') { diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css index 43b84271196..776cdc8d59d 100644 --- a/packages/picker/src/picker.css +++ b/packages/picker/src/picker.css @@ -122,7 +122,7 @@ sp-menu { margin-inline-start: auto; } -:host([focused]:not([quiet])) #button .picker { +:host([focused]:not([quiet], [pending])) #button .picker { /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */ color: var( --spectrum-picker-icon-color-key-focus, diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts index e689253c18e..aba4db65645 100644 --- a/packages/picker/stories/picker.stories.ts +++ b/packages/picker/stories/picker.stories.ts @@ -458,13 +458,8 @@ export const readonly = (args: StoryArgs): TemplateResult => { export const pending = (args: StoryArgs): TemplateResult => { return html` Country - - Loading... + + Select an option... Deselect Select Inverse Feather... @@ -474,6 +469,9 @@ export const pending = (args: StoryArgs): TemplateResult => { `; }; +pending.args = { + pending: true, +}; export const custom = (args: StoryArgs): TemplateResult => { const initialState = 'lb1-mo'; @@ -510,7 +508,6 @@ export const custom = (args: StoryArgs): TemplateResult => {

`; }; - custom.args = { open: true, }; diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index e0244f52bdf..62e18a54541 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -42,6 +42,7 @@ import { disabled, iconsOnly, noVisibleLabel, + pending, slottedLabel, tooltip, } from '../stories/picker.stories.js'; @@ -1829,4 +1830,46 @@ export function runPickerTests(): void { expect(this.el.open).to.be.false; }); }); + describe('pending', function () { + beforeEach(async function () { + const test = await fixture(html` +
${pending(pending.args)}
+ `); + this.label = test.querySelector('sp-field-label') as FieldLabel; + this.el = test.querySelector('sp-picker') as Picker; + await elementUpdated(this.elel); + }); + it('receives focus from an ``', async function () { + expect(this.el.focused).to.be.false; + + this.label.click(); + await elementUpdated(this.el); + + expect(this.el.focused).to.be.true; + }); + it('does not open from `click()`', async function () { + expect(this.el.open).to.be.false; + + this.el.click(); + await elementUpdated(this.el); + + expect(this.el.open).to.be.false; + }); + it('manages its "name" value in the accessibility tree when [pending]', async () => { + type NamedNode = { name: string; role: string }; + const snapshot = (await a11ySnapshot( + {} + )) as unknown as NamedNode & { + children: NamedNode[]; + }; + + expect( + findAccessibilityNode( + snapshot, + (node) => + node.name === 'Loading Select an option... Country' + ) + ).to.not.be.null; + }); + }); } From 8beeed7cdcd030972bd708948da7feae27e1af61 Mon Sep 17 00:00:00 2001 From: rmanole Date: Mon, 26 Feb 2024 14:14:49 +0200 Subject: [PATCH 05/16] chore(picker): create pendingLabel property and update a bunch of small stuff --- packages/picker/README.md | 2 +- packages/picker/package.json | 1 + packages/picker/src/Picker.ts | 7 ++- packages/picker/stories/picker.stories.ts | 56 ++++------------------- packages/picker/stories/template.ts | 1 + packages/picker/test/index.ts | 3 +- 6 files changed, 21 insertions(+), 49 deletions(-) diff --git a/packages/picker/README.md b/packages/picker/README.md index fbcda331081..244cd6be921 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -395,7 +395,7 @@ When the `value` of an `` matches the `value` attribute or the trimme ### Pending -When in pending state, `` elements will not respond to click events and be delivered with a `` to visually outline that it is pending. It will not toggle open or display its `` descendants until the attribute is removed. +When in pending state, `` elements will not respond to click events and will be delivered with a `` to visually outline that it is pending. It will not toggle open or display its `` descendants until the attribute is removed. ```html Standard: diff --git a/packages/picker/package.json b/packages/picker/package.json index 41c8a716b60..7873b2811c5 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -73,6 +73,7 @@ "@spectrum-web-components/menu": "^0.41.1", "@spectrum-web-components/overlay": "^0.41.1", "@spectrum-web-components/popover": "^0.41.1", + "@spectrum-web-components/progress-circle": "^0.41.1", "@spectrum-web-components/reactive-controllers": "^0.41.1", "@spectrum-web-components/shared": "^0.41.1", "@spectrum-web-components/tooltip": "^0.41.1", diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 00be8480e65..941b08df141 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -84,9 +84,14 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { @property({ type: Boolean, reflect: true }) public invalid = false; + /** Whether the items are currently loading. */ @property({ type: Boolean, reflect: true }) public pending = false; + /** Defines a string value that labels the Picker while it is in pending state. */ + @property({ type: String, attribute: 'pending-label' }) + public pendingLabel = 'Pending'; + @property() public label?: string; @@ -427,7 +432,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { class="visually-hidden" id="loader-label" > - Loading + ${this.pendingLabel} Template(args); +pending.args = { + pending: true, +}; + export const tooltip = (args: StoryArgs): TemplateResult => { const { open, ...rest } = args; return html` @@ -455,24 +437,6 @@ export const readonly = (args: StoryArgs): TemplateResult => { `; }; -export const pending = (args: StoryArgs): TemplateResult => { - return html` - Country - - Select an option... - Deselect - Select Inverse - Feather... - Select and Mask... - Save Selection - Make Work Path - - `; -}; -pending.args = { - pending: true, -}; - export const custom = (args: StoryArgs): TemplateResult => { const initialState = 'lb1-mo'; return html` diff --git a/packages/picker/stories/template.ts b/packages/picker/stories/template.ts index 322d10403f7..3c1a064a1fd 100644 --- a/packages/picker/stories/template.ts +++ b/packages/picker/stories/template.ts @@ -23,6 +23,7 @@ export interface StoryArgs { invalid?: boolean; open?: boolean; quiet?: boolean; + pending?: boolean; showText?: boolean; onChange?: (val: string) => void; [prop: string]: unknown; diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index 62e18a54541..467c7e82c67 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -1867,7 +1867,8 @@ export function runPickerTests(): void { findAccessibilityNode( snapshot, (node) => - node.name === 'Loading Select an option... Country' + node.name === + 'Pending Choose your neighborhood Where do you live?' ) ).to.not.be.null; }); From 70882c3c5b21fd91dc90911f046dfb6cb5bfe303 Mon Sep 17 00:00:00 2001 From: Roxana Burduja <13311865+Rocss@users.noreply.github.com> Date: Mon, 26 Feb 2024 15:20:07 +0200 Subject: [PATCH 06/16] Update config.yml --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ea785dd04e4..e7b142eebf7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 598ec4c03246440f2db5660852cf8a35422514cd + default: 8beeed7cdcd030972bd708948da7feae27e1af61 wireit_cache_name: type: string default: wireit From 5e029cabcd8fa9a268b25c5cda828c681b59319d Mon Sep 17 00:00:00 2001 From: rmanole Date: Tue, 27 Feb 2024 16:44:48 +0200 Subject: [PATCH 07/16] chore(picker): implement code review --- packages/picker/src/picker.css | 24 +++++------------------- packages/picker/stories/args.ts | 1 + 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css index 776cdc8d59d..a1da8647c31 100644 --- a/packages/picker/src/picker.css +++ b/packages/picker/src/picker.css @@ -29,6 +29,8 @@ governing permissions and limitations under the License. var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)) ); + + --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100); } :host([quiet]) { @@ -41,32 +43,16 @@ governing permissions and limitations under the License. --spectrum-picker-width: var(--spectrum-global-dimension-size-2400); } -:host([size='s']) sp-progress-circle { +:host([size='s']) { --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-75); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-small - ); } -:host([size='m']) sp-progress-circle { - --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-small - ); -} - -:host([size='l']) sp-progress-circle { +:host([size='l']) { --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-200); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); } -:host([size='xl']) sp-progress-circle { +:host([size='xl']) { --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-300); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-large - ); } :host([disabled]) { diff --git a/packages/picker/stories/args.ts b/packages/picker/stories/args.ts index 8ff6b5f76db..e6470cc33da 100644 --- a/packages/picker/stories/args.ts +++ b/packages/picker/stories/args.ts @@ -27,6 +27,7 @@ export const argTypes = { }, type: 'select', }, + options: ['s', 'm', 'l', 'xl'], }, quiet: { name: 'quiet', From ba4c1baf2f71a370f58f1dc85b13c61bbc890add Mon Sep 17 00:00:00 2001 From: rmanole Date: Tue, 27 Feb 2024 17:05:24 +0200 Subject: [PATCH 08/16] chore(picker): remove unnecessary size on sp-progress-circle --- packages/picker/src/Picker.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 941b08df141..4fbff89ffa1 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -435,7 +435,6 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { ${this.pendingLabel}