Skip to content

Commit 3aeafdd

Browse files
RajdeepcRajdeep Chandra
Rajdeepc
and
Rajdeep Chandra
authored
fix(menu): convert menu icon stories to class-based components for proper theme rendering (#5402)
* chore: added system aware icons story in menu fast follows * chore: storybook decorator fixed height for overlay stories * chore: storybook docs page only css * chore: skipping from vrt * chore: fixed exports * chore: revert selectsmenu icons story * chore: updated menu stories with icons to class to accept proper rendering cycles * chore: added changeset * chore: fix linting on storybook stories * chore: adding same format to selects with icons story * chore: updated golden image cache --------- Co-authored-by: Rajdeep Chandra <[email protected]>
1 parent ee7f3e5 commit 3aeafdd

File tree

3 files changed

+121
-83
lines changed

3 files changed

+121
-83
lines changed

‎.changeset/dark-rivers-live.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@spectrum-web-components/menu': patch
3+
---
4+
5+
**Fixes**: Icons in menu stories weren't properly responding to theme changes when used in functional story components.
6+
Switching to class-based LitElement components ensures proper component lifecycle hooks and shadow DOM context for icon initialization and theme integration.

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ parameters:
1414
# 3. Commit this change to the PR branch where the changes exist.
1515
current_golden_images_hash:
1616
type: string
17-
default: b3342a5f378ee473443510bcbd28f80c10e29460
17+
default: a6fdd13f78f7931bbf15af5aef3c79f0423df3b5
1818
wireit_cache_name:
1919
type: string
2020
default: wireit

‎packages/menu/stories/menu.stories.ts‎

Lines changed: 114 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import { html, TemplateResult } from '@spectrum-web-components/base';
12+
import {
13+
html,
14+
LitElement,
15+
TemplateResult,
16+
} from '@spectrum-web-components/base';
1317

1418
import type { Menu, MenuItem } from '@spectrum-web-components/menu';
1519
import '@spectrum-web-components/menu/sp-menu.js';
@@ -160,105 +164,133 @@ controlled.parameters = {
160164
chromatic: { disableSnapshot: true },
161165
};
162166

163-
export const menuItemWithDescription = (): TemplateResult => {
164-
return html`
165-
<sp-menu>
166-
<sp-menu-item>
167-
<sp-icon-export slot="icon"></sp-icon-export>
168-
Quick export
169-
<span slot="description">Share a snapshot</span>
170-
</sp-menu-item>
171-
<sp-menu-item>
172-
<sp-icon-folder-open slot="icon"></sp-icon-folder-open>
173-
Open a copy
174-
<span slot="description">Illustrator for iPad</span>
175-
</sp-menu-item>
176-
<sp-menu-item disabled>
177-
<sp-icon-share slot="icon"></sp-icon-share>
178-
Share link
179-
<span slot="description">Enable comments and download</span>
180-
</sp-menu-item>
181-
</sp-menu>
182-
183-
<sp-popover open>
184-
<sp-menu selects="multiple">
185-
<sp-menu-item>Deselect</sp-menu-item>
186-
<sp-menu-item selected>
187-
Select Inverse
188-
<span slot="description">Enable inverse selection</span>
189-
</sp-menu-item>
190-
<sp-menu-item>Feather...</sp-menu-item>
191-
<sp-menu-item selected>Select and Mask...</sp-menu-item>
192-
<sp-menu-divider></sp-menu-divider>
193-
<sp-menu-item>Save Selection</sp-menu-item>
194-
<sp-menu-item disabled>
195-
Make Work Path
196-
<span slot="description">Create a reusable work path</span>
197-
</sp-menu-item>
198-
</sp-menu>
199-
</sp-popover>
200-
`;
201-
};
202-
203-
export const selectsWithIcons = (): TemplateResult => {
204-
return html`
205-
<sp-popover open>
206-
<sp-menu selects="single">
167+
class MenuItemWithDescription extends LitElement {
168+
public overriderender(): TemplateResult {
169+
return html`
170+
<sp-menu>
207171
<sp-menu-item>
208172
<sp-icon-export slot="icon"></sp-icon-export>
209173
Quick export
174+
<span slot="description">Share a snapshot</span>
210175
</sp-menu-item>
211-
<sp-menu-item selected>
176+
<sp-menu-item>
212177
<sp-icon-folder-open slot="icon"></sp-icon-folder-open>
213178
Open a copy
179+
<span slot="description">Illustrator for iPad</span>
214180
</sp-menu-item>
215-
<sp-menu-item>
181+
<sp-menu-item disabled>
216182
<sp-icon-share slot="icon"></sp-icon-share>
217183
Share link
218184
<span slot="description">Enable comments and download</span>
219185
</sp-menu-item>
220186
</sp-menu>
221-
</sp-popover>
222-
`;
223-
};
224187
225-
export const headersAndIcons = (): TemplateResult => {
226-
return html`
227-
<sp-popover open>
228-
<sp-menu selects="single">
229-
<sp-menu-group>
230-
<span slot="header">Section Heading</span>
231-
<sp-menu-item>Action 1</sp-menu-item>
232-
<sp-menu-item>Action 2</sp-menu-item>
233-
<sp-menu-item>Action 3</sp-menu-item>
234-
</sp-menu-group>
235-
<sp-menu-divider></sp-menu-divider>
236-
<sp-menu-group>
237-
<span slot="header">Section Heading</span>
238-
<sp-menu-item>
239-
<sp-icon-checkmark-circle
240-
slot="icon"
241-
></sp-icon-checkmark-circle>
242-
Save
188+
<sp-popover open>
189+
<sp-menu selects="multiple">
190+
<sp-menu-item>Deselect</sp-menu-item>
191+
<sp-menu-item selected>
192+
Select Inverse
193+
<span slot="description">Enable inverse selection</span>
243194
</sp-menu-item>
195+
<sp-menu-item>Feather...</sp-menu-item>
196+
<sp-menu-item selected>Select and Mask...</sp-menu-item>
197+
<sp-menu-divider></sp-menu-divider>
198+
<sp-menu-item>Save Selection</sp-menu-item>
244199
<sp-menu-item disabled>
245-
<sp-icon-checkmark-circle
246-
slot="icon"
247-
></sp-icon-checkmark-circle>
248-
Download
200+
Make Work Path
201+
<span slot="description">
202+
Create a reusable work path
203+
</span>
249204
</sp-menu-item>
250-
<sp-menu-item disabled>
251-
<sp-icon-checkmark-circle
252-
slot="icon"
253-
></sp-icon-checkmark-circle>
205+
</sp-menu>
206+
</sp-popover>
207+
`;
208+
}
209+
}
210+
211+
customElements.define('menu-item-with-description', MenuItemWithDescription);
212+
213+
export const menuItemWithDescription = (): TemplateResult => html`
214+
<menu-item-with-description></menu-item-with-description>
215+
`;
216+
217+
class WithIcons extends LitElement {
218+
public override render(): TemplateResult {
219+
return html`
220+
<sp-popover open>
221+
<sp-menu selects="single">
222+
<sp-menu-item>
223+
<sp-icon-export slot="icon"></sp-icon-export>
224+
Quick export
225+
</sp-menu-item>
226+
<sp-menu-item selected>
227+
<sp-icon-folder-open slot="icon"></sp-icon-folder-open>
228+
Open a copy
229+
</sp-menu-item>
230+
<sp-menu-item>
231+
<sp-icon-share slot="icon"></sp-icon-share>
254232
Share link
255-
<span slot="description">Enable comments</span>
233+
<span slot="description">
234+
Enable comments and download
235+
</span>
256236
</sp-menu-item>
257-
</sp-menu-group>
258-
</sp-menu>
259-
</sp-popover>
260-
`;
261-
};
237+
</sp-menu>
238+
</sp-popover>
239+
`;
240+
}
241+
}
242+
243+
customElements.define('menu-with-icons', WithIcons);
244+
245+
export const SelectsWithIcons = (): TemplateResult => html`
246+
<menu-with-icons></menu-with-icons>
247+
`;
248+
249+
class HeadersAndIcons extends LitElement {
250+
public override render(): TemplateResult {
251+
return html`
252+
<sp-popover open>
253+
<sp-menu selects="single">
254+
<sp-menu-group>
255+
<span slot="header">Section Heading</span>
256+
<sp-menu-item>Action 1</sp-menu-item>
257+
<sp-menu-item>Action 2</sp-menu-item>
258+
<sp-menu-item>Action 3</sp-menu-item>
259+
</sp-menu-group>
260+
<sp-menu-divider></sp-menu-divider>
261+
<sp-menu-group>
262+
<span slot="header">Section Heading</span>
263+
<sp-menu-item>
264+
<sp-icon-checkmark-circle
265+
slot="icon"
266+
></sp-icon-checkmark-circle>
267+
Save
268+
</sp-menu-item>
269+
<sp-menu-item disabled>
270+
<sp-icon-checkmark-circle
271+
slot="icon"
272+
></sp-icon-checkmark-circle>
273+
Download
274+
</sp-menu-item>
275+
<sp-menu-item disabled>
276+
<sp-icon-checkmark-circle
277+
slot="icon"
278+
></sp-icon-checkmark-circle>
279+
Share link
280+
<span slot="description">Enable comments</span>
281+
</sp-menu-item>
282+
</sp-menu-group>
283+
</sp-menu>
284+
</sp-popover>
285+
`;
286+
}
287+
}
288+
289+
customElements.define('headers-and-icons', HeadersAndIcons);
290+
291+
export const headersAndIcons = (): TemplateResult => html`
292+
<headers-and-icons></headers-and-icons>
293+
`;
262294

263295
headersAndIcons.storyName = 'Headers and Icons';
264296

0 commit comments

Comments
 (0)