Skip to content

Commit b4fd473

Browse files
castastrophecastastrophe
committed
chore: resolve rendering warnings
1 parent 69c29ff commit b4fd473

File tree

12 files changed

+227
-1265
lines changed

12 files changed

+227
-1265
lines changed

‎.browserslistrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
defaults
2+
last 2 Edge versions
3+
last 2 Chrome versions
4+
last 2 Firefox versions
5+
last 2 Safari versions
6+
last 2 iOS versions
7+
not IE 11

‎package.json

+1-13
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,6 @@
139139
"@web/dev-server-rollup": "^0.6.4",
140140
"@web/rollup-plugin-copy": "^0.5.1",
141141
"@web/rollup-plugin-html": "^2.3.0",
142-
"@web/rollup-plugin-import-meta-assets": "^1.0.8",
143-
"@web/storybook-builder": "^0.2.1",
144-
"@web/storybook-utils": "^1.1.1",
145142
"@web/test-runner": "^0.18.3",
146143
"@web/test-runner-commands": "^0.9.0",
147144
"@web/test-runner-junit-reporter": "^0.7.2",
@@ -183,7 +180,7 @@
183180
"lit-html": "^2.4.0 || ^3.1.3",
184181
"mocha-junit-reporter": "^2.0.2",
185182
"netlify-cli": "^17.38.0",
186-
"next": "^14.0.0",
183+
"next": "^14.2.26",
187184
"node-fetch": "^3.1.0",
188185
"npm-run-all2": "^6.0.0",
189186
"patch-package": "^8.0.0",
@@ -445,15 +442,6 @@
445442
"tools/*",
446443
"react/*"
447444
],
448-
"browserslist": [
449-
"defaults",
450-
"last 2 Edge versions",
451-
"last 2 Chrome versions",
452-
"last 2 Firefox versions",
453-
"last 2 Safari versions",
454-
"last 2 iOS versions",
455-
"not IE 11"
456-
],
457445
"packageManager": "yarn@4.6.0",
458446
"license": "Apache-2.0",
459447
"author": "Adobe",

‎packages/action-button/stories/action-button.stories.ts

+4-10
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,13 @@ export default {
2323
};
2424

2525
function renderButtonsSelected(args: Properties): TemplateResult {
26-
const disabled = Object.assign({}, args, { disabled: true });
27-
const selected = Object.assign({}, args, { selected: true });
2826
return html`
2927
<sp-action-group
3028
?emphasized="${!!args.emphasized}"
3129
?quiet="${!!args.quiet}"
3230
>
33-
${renderButton(args)} ${renderButton(selected)}
34-
${renderButton(disabled)}
31+
${renderButton(args)} ${renderButton({ ...args, selected: true })}
32+
${renderButton({ ...args, disabled: true })}
3533
</sp-action-group>
3634
`;
3735
}
@@ -40,16 +38,12 @@ export const toggles = (args: Properties): TemplateResult =>
4038
renderButtonsSelected(args);
4139
toggles.args = {
4240
toggles: true,
43-
icon: html`
44-
<sp-icon-edit hidden slot="icon"></sp-icon-edit>
45-
`,
41+
icon: `<sp-icon-edit hidden slot="icon"></sp-icon-edit>`,
4642
};
4743

4844
export const href = (args: Properties): TemplateResult =>
4945
renderButtonsSelected(args);
5046
href.args = {
5147
href: 'https://github.com/adobe/spectrum-web-components',
52-
icon: html`
53-
<sp-icon-edit hidden slot="icon"></sp-icon-edit>
54-
`,
48+
icon: `<sp-icon-edit hidden slot="icon"></sp-icon-edit>`,
5549
};

‎packages/action-button/stories/index.ts

+18-17
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
import { html, TemplateResult } from '@spectrum-web-components/base';
14-
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
13+
import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
14+
import {
15+
ifDefined,
16+
unsafeHTML,
17+
} from '@spectrum-web-components/base/src/directives.js';
1518
import '@spectrum-web-components/action-group/sp-action-group.js';
1619
import '@spectrum-web-components/icon/sp-icon.js';
1720
import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
@@ -28,13 +31,17 @@ export interface Properties {
2831
size?: 's' | 'm' | 'l' | 'xl';
2932
staticColor?: 'white' | 'black';
3033
holdAffordance?: boolean;
31-
icon?: TemplateResult;
34+
icon?: string;
3235
label?: string;
3336
[prop: string]: unknown;
3437
href: undefined;
3538
}
3639

37-
export function renderButton(properties: Properties): TemplateResult {
40+
export function renderButton({
41+
icon,
42+
label,
43+
...properties
44+
}: Properties): TemplateResult {
3845
return html`
3946
<sp-action-button
4047
href=${ifDefined(properties.href)}
@@ -48,17 +55,15 @@ export function renderButton(properties: Properties): TemplateResult {
4855
?hold-affordance=${!!properties.holdAffordance}
4956
?active=${!!properties.active}
5057
>
51-
${properties.icon}${properties.label}
58+
${icon ? unsafeHTML(icon) : nothing}${label}
5259
</sp-action-button>
5360
`;
5461
}
5562

5663
function renderGroup(properties: Properties): TemplateResult {
5764
const label = 'Edit';
5865
const holdAffordance = true;
59-
const icon = html`
60-
<sp-icon-edit slot="icon"></sp-icon-edit>
61-
`;
66+
const icon = `<sp-icon-edit slot="icon"></sp-icon-edit>`;
6267
return html`
6368
<sp-action-group
6469
?quiet="${!!properties.quiet}"
@@ -89,27 +94,23 @@ function renderGroup(properties: Properties): TemplateResult {
8994
}
9095

9196
export function renderButtons(properties: Properties): TemplateResult {
92-
const selected = true;
93-
const disabled = true;
9497
return html`
9598
<div
9699
style="display: flex; flex-direction: column; gap: calc(var(--spectrum-spacing-100) * var(--swc-scale-factor));"
97100
>
101+
${renderGroup(properties)}
98102
${renderGroup({
99103
...properties,
104+
selected: true,
100105
})}
101106
${renderGroup({
102107
...properties,
103-
selected,
104-
})}
105-
${renderGroup({
106-
...properties,
107-
disabled,
108+
disabled: true,
108109
})}
109110
${renderGroup({
110111
...properties,
111-
disabled,
112-
selected,
112+
disabled: true,
113+
selected: true,
113114
})}
114115
</div>
115116
`;

‎packages/action-menu/stories/action-menu.stories.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ interface StoryArgs {
174174
visibleLabel?: string;
175175
disabled?: boolean;
176176
open?: boolean;
177-
customIcon?: string | TemplateResult;
177+
customIcon?: string | undefined;
178178
selects?: 'single';
179179
selected?: boolean;
180180
quiet?: boolean;
@@ -299,9 +299,7 @@ tooltipDescriptionAndPlacement.args = {
299299

300300
export const customIcon = (args: StoryArgs): TemplateResult => Template(args);
301301
customIcon.args = {
302-
customIcon: html`
303-
<sp-icon-settings slot="icon"></sp-icon-settings>
304-
`,
302+
customIcon: `<sp-icon-settings slot="icon"></sp-icon-settings>`,
305303
visibleLabel: '',
306304
};
307305

‎packages/action-menu/stories/index.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
14-
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
14+
import {
15+
ifDefined,
16+
unsafeHTML,
17+
} from '@spectrum-web-components/base/src/directives.js';
1518

1619
import type { ActionMenu } from '@spectrum-web-components/action-menu';
1720
import '@spectrum-web-components/action-menu/sp-action-menu.js';
@@ -32,7 +35,7 @@ export const ActionMenuMarkup = ({
3235
quiet = false,
3336
staticValue = '',
3437
visibleLabel = '',
35-
customIcon = '' as string | TemplateResult,
38+
customIcon = '' as string,
3639
size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
3740
selects = '' as 'single',
3841
selected = false,
@@ -62,7 +65,7 @@ export const ActionMenuMarkup = ({
6265
align === 'end' ? 'float: inline-end;' : undefined
6366
)}
6467
>
65-
${customIcon ? customIcon : nothing}
68+
${customIcon ? unsafeHTML(customIcon) : nothing}
6669
${visibleLabel
6770
? html`
6871
<span slot="label">${visibleLabel}</span>

‎packages/picker-button/stories/index.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
14-
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
14+
import {
15+
ifDefined,
16+
unsafeHTML,
17+
} from '@spectrum-web-components/base/src/directives.js';
1518

1619
export type StoryArgs = {
1720
active: boolean;
18-
icon: TemplateResult;
21+
icon?: string | undefined;
1922
invalid: boolean;
2023
label: boolean | string;
2124
open: boolean;
@@ -46,7 +49,7 @@ export const Template = ({
4649
?rounded=${rounded}
4750
size=${size}
4851
>
49-
${icon ? icon : nothing}
52+
${icon ? unsafeHTML(icon) : nothing}
5053
${label
5154
? html`
5255
<span slot="label">

‎packages/picker-button/stories/picker-button.stories.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
import { html, TemplateResult } from '@spectrum-web-components/base';
13+
import { TemplateResult } from '@spectrum-web-components/base';
1414

1515
import { argTypes, StoryArgs, Template } from './index.js';
1616
import '@spectrum-web-components/picker-button/sp-picker-button.js';
@@ -28,12 +28,7 @@ active.args = { active: true };
2828

2929
export const customIcon = (args: StoryArgs): TemplateResult => Template(args);
3030
customIcon.args = {
31-
icon: html`
32-
<sp-icon-add
33-
slot="icon"
34-
class="spectrum-PickerButton-icon spectrum-Icon"
35-
></sp-icon-add>
36-
`,
31+
icon: `<sp-icon-add slot="icon" class="spectrum-PickerButton-icon spectrum-Icon"></sp-icon-add>`,
3732
};
3833

3934
export const invalid = (args: StoryArgs): TemplateResult => Template(args);

0 commit comments

Comments
 (0)