From 5a220b4f77c040a60ff798ea3bac52ff29dac455 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 12:35:05 +0530 Subject: [PATCH 01/11] chore: added system aware icons story in menu fast follows --- packages/menu/stories/menu.stories.ts | 57 ++++++++++++++++++--------- 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index f57d70d93b4..7eb372a776b 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -9,7 +9,12 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { + html, + LitElement, + PropertyValues, + TemplateResult, +} from '@spectrum-web-components/base'; import type { Menu, MenuItem } from '@spectrum-web-components/menu'; import '@spectrum-web-components/menu/sp-menu.js'; @@ -200,25 +205,41 @@ export const menuItemWithDescription = (): TemplateResult => { `; }; +export class SystemAwareMenu extends LitElement { + protected override update(changes: PropertyValues): void { + super.update(changes); + } + + protected override render(): TemplateResult { + return html` + + + + + Quick export + + + + Open a copy + + + + Share link + + Enable comments and download + + + + + `; + } +} + +customElements.define('system-aware-menu', SystemAwareMenu); + export const selectsWithIcons = (): TemplateResult => { return html` - - - - - Quick export - - - - Open a copy - - - - Share link - Enable comments and download - - - + `; }; From 0a5afe42fb4db38688bb10c42fe3cdc50bbe6ca6 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 13:34:00 +0530 Subject: [PATCH 02/11] chore: storybook decorator fixed height for overlay stories --- projects/story-decorator/decorator.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/projects/story-decorator/decorator.ts b/projects/story-decorator/decorator.ts index 6676dd8ac43..9e7abb64e94 100644 --- a/projects/story-decorator/decorator.ts +++ b/projects/story-decorator/decorator.ts @@ -20,10 +20,6 @@ export const themeStyles = html` #root { padding: 0; } - sp-story-decorator::part(container) { - min-height: auto; - position: relative; - } sp-story-decorator::part(controls) { position: absolute; } @@ -78,10 +74,6 @@ export const swcThemeDecorator = (story: StoryFn, context: StoryContext) => { #root { padding: 0; } - sp-story-decorator::part(container) { - min-height: auto; - position: relative; - } sp-story-decorator::part(controls) { position: absolute; } From ec0608fbea8bee85128a345b633dc8b97c7e6f7e Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 14:05:54 +0530 Subject: [PATCH 03/11] chore: storybook docs page only css --- storybook/preview-head.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/storybook/preview-head.html b/storybook/preview-head.html index 1d2fad0873f..c208d774056 100644 --- a/storybook/preview-head.html +++ b/storybook/preview-head.html @@ -26,4 +26,8 @@ width: 100%; min-height: 200px; } + /* Style only the Docs page */ + .sbdocs-preview sp-story-decorator::part(container) { + min-height: 100px; + } From f2919949f095716c1b216bef68693cbf7227542c Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 15:54:22 +0530 Subject: [PATCH 04/11] chore: skipping from vrt --- packages/menu/stories/menu.stories.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index 7eb372a776b..6d6d9be6001 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -243,6 +243,10 @@ export const selectsWithIcons = (): TemplateResult => { `; }; +selectsWithIcons.swc_vrt = { + skip: true, +}; + export const headersAndIcons = (): TemplateResult => { return html` From f19dd9352ee0dc555922c8aaff1affe5e43a8fcc Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 16:05:29 +0530 Subject: [PATCH 05/11] chore: fixed exports --- packages/menu/stories/menu.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index 6d6d9be6001..f5bae351792 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -205,7 +205,7 @@ export const menuItemWithDescription = (): TemplateResult => { `; }; -export class SystemAwareMenu extends LitElement { +class SystemAwareMenu extends LitElement { protected override update(changes: PropertyValues): void { super.update(changes); } From 8d090ddb52271e712a3c2be3a6f736d25b625f00 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 25 Apr 2025 19:00:45 +0530 Subject: [PATCH 06/11] chore: revert selectsmenu icons story --- packages/menu/stories/menu.stories.ts | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index f5bae351792..df28adf8e28 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -237,16 +237,38 @@ class SystemAwareMenu extends LitElement { customElements.define('system-aware-menu', SystemAwareMenu); -export const selectsWithIcons = (): TemplateResult => { +export const menuWithIcons = (): TemplateResult => { return html` `; }; -selectsWithIcons.swc_vrt = { +menuWithIcons.swc_vrt = { skip: true, }; +export const selectsWithIcons = (): TemplateResult => { + return html` + + + + + Quick export + + + + Open a copy + + + + Share link + Enable comments and download + + + + `; +}; + export const headersAndIcons = (): TemplateResult => { return html` From 9776c2cbb58157d357833ce9f5b292ef71703106 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 9 May 2025 15:17:32 +0530 Subject: [PATCH 07/11] chore: updated menu stories with icons to class to accept proper rendering cycles --- packages/menu/stories/menu.stories.ts | 205 ++++++++++++-------------- 1 file changed, 93 insertions(+), 112 deletions(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index df28adf8e28..56cdaf9d902 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -12,7 +12,6 @@ governing permissions and limitations under the License. import { html, LitElement, - PropertyValues, TemplateResult, } from '@spectrum-web-components/base'; @@ -165,59 +164,61 @@ controlled.parameters = { chromatic: { disableSnapshot: true }, }; -export const menuItemWithDescription = (): TemplateResult => { - return html` - - - - Quick export - Share a snapshot - - - - Open a copy - Illustrator for iPad - - - - Share link - Enable comments and download - - - - - - Deselect - - Select Inverse - Enable inverse selection +class MenuItemWithDescription extends LitElement { + render(): TemplateResult { + return html` + + + + Quick export + Share a snapshot + + + + Open a copy + Illustrator for iPad - Feather... - Select and Mask... - - Save Selection - Make Work Path - Create a reusable work path + + Share link + Enable comments and download - - `; -}; -class SystemAwareMenu extends LitElement { - protected override update(changes: PropertyValues): void { - super.update(changes); + + + Deselect + + Select Inverse + Enable inverse selection + + Feather... + Select and Mask... + + Save Selection + + Make Work Path + + Create a reusable work path + + + + + `; } +} + +customElements.define('menu-item-with-description', MenuItemWithDescription); - protected override render(): TemplateResult { +export const menuItemWithDescription = (): TemplateResult => html` + +`; + +class WithIcons extends LitElement { + render(): TemplateResult { return html` - + - - - Quick export - Open a copy @@ -235,77 +236,57 @@ class SystemAwareMenu extends LitElement { } } -customElements.define('system-aware-menu', SystemAwareMenu); +customElements.define('menu-with-icons', WithIcons); -export const menuWithIcons = (): TemplateResult => { - return html` - - `; -}; +export const SelectsWithIcons = (): TemplateResult => html` + +`; -menuWithIcons.swc_vrt = { - skip: true, -}; +class HeadersAndIcons extends LitElement { + render(): TemplateResult { + return html` + + + + Section Heading + Action 1 + Action 2 + Action 3 + + + + Section Heading + + + Save + + + + Download + + + + Share link + Enable comments + + + + + `; + } +} -export const selectsWithIcons = (): TemplateResult => { - return html` - - - - - Quick export - - - - Open a copy - - - - Share link - Enable comments and download - - - - `; -}; +customElements.define('headers-and-icons', HeadersAndIcons); -export const headersAndIcons = (): TemplateResult => { - return html` - - - - Section Heading - Action 1 - Action 2 - Action 3 - - - - Section Heading - - - Save - - - - Download - - - - Share link - Enable comments - - - - - `; -}; +export const headersAndIcons = (): TemplateResult => html` + +`; headersAndIcons.storyName = 'Headers and Icons'; From 2732ea898ef5e267da560e66471a4dd0716efb2b Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 9 May 2025 15:23:23 +0530 Subject: [PATCH 08/11] chore: added changeset --- .changeset/dark-rivers-live.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/dark-rivers-live.md diff --git a/.changeset/dark-rivers-live.md b/.changeset/dark-rivers-live.md new file mode 100644 index 00000000000..2182ea635b8 --- /dev/null +++ b/.changeset/dark-rivers-live.md @@ -0,0 +1,6 @@ +--- +'@spectrum-web-components/menu': patch +--- + +**Fixes**: Icons in menu stories weren't properly responding to theme changes when used in functional story components. +Switching to class-based LitElement components ensures proper component lifecycle hooks and shadow DOM context for icon initialization and theme integration. From 4b659857f01ec4e24f707eb510ee2e3c4d9ca810 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 9 May 2025 18:18:46 +0530 Subject: [PATCH 09/11] chore: fix linting on storybook stories --- packages/menu/stories/menu.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index 56cdaf9d902..ece1ca81429 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -165,7 +165,7 @@ controlled.parameters = { }; class MenuItemWithDescription extends LitElement { - render(): TemplateResult { + public overriderender(): TemplateResult { return html` @@ -215,7 +215,7 @@ export const menuItemWithDescription = (): TemplateResult => html` `; class WithIcons extends LitElement { - render(): TemplateResult { + public override render(): TemplateResult { return html` @@ -243,7 +243,7 @@ export const SelectsWithIcons = (): TemplateResult => html` `; class HeadersAndIcons extends LitElement { - render(): TemplateResult { + public override render(): TemplateResult { return html` From dccc6d9a804a8660a943674aeb5416bceda2640c Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 9 May 2025 18:33:42 +0530 Subject: [PATCH 10/11] chore: adding same format to selects with icons story --- packages/menu/stories/menu.stories.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index ece1ca81429..f589ee73dbd 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -217,8 +217,12 @@ export const menuItemWithDescription = (): TemplateResult => html` class WithIcons extends LitElement { public override render(): TemplateResult { return html` - + + + + Quick export + Open a copy From ed1b9a21d6b6c0cc6fa664e526ce2dde9ca7d8c9 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Mon, 12 May 2025 11:57:04 +0530 Subject: [PATCH 11/11] chore: updated golden image cache --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 240b5f738c2..70f90123698 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -14,7 +14,7 @@ parameters: # 3. Commit this change to the PR branch where the changes exist. current_golden_images_hash: type: string - default: b3342a5f378ee473443510bcbd28f80c10e29460 + default: a6fdd13f78f7931bbf15af5aef3c79f0423df3b5 wireit_cache_name: type: string default: wireit