Skip to content

Commit 3b2a9ef

Browse files
castastrophecastastrophe
committed
feat(accordion): rework styles to leverage existing CSS
1 parent 672ca87 commit 3b2a9ef

14 files changed

+379
-1343
lines changed

‎packages/accordion/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@
3333
"development": "./src/AccordionItem.dev.js",
3434
"default": "./src/AccordionItem.js"
3535
},
36-
"./src/accordion-item-overrides.css.js": "./src/accordion-item-overrides.css.js",
3736
"./src/accordion-item.css.js": "./src/accordion-item.css.js",
38-
"./src/accordion-overrides.css.js": "./src/accordion-overrides.css.js",
3937
"./src/accordion.css.js": "./src/accordion.css.js",
4038
"./src/index.js": {
4139
"development": "./src/index.dev.js",
@@ -75,7 +73,7 @@
7573
"@spectrum-web-components/shared": "^1.2.0"
7674
},
7775
"devDependencies": {
78-
"@spectrum-css/accordion": "6.0.0-s2-foundations.16"
76+
"@spectrum-css/accordion": "7.1.0"
7977
},
8078
"types": "./src/index.d.ts",
8179
"customElements": "custom-elements.json",

‎packages/accordion/src/Accordion.ts

+16-4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
property,
2323
queryAssignedNodes,
2424
} from '@spectrum-web-components/base/src/decorators.js';
25+
import { classMap } from '@spectrum-web-components/base/src/directives.js';
2526
import { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';
2627

2728
import { AccordionItem } from './AccordionItem.js';
@@ -114,10 +115,21 @@ export class Accordion extends SizedMixin(SpectrumElement, {
114115

115116
protected override render(): TemplateResult {
116117
return html`
117-
<slot
118-
@slotchange=${this.handleSlotchange}
119-
@sp-accordion-item-toggle=${this.onToggle}
120-
></slot>
118+
<div
119+
class=${classMap({
120+
'spectrum-Accordion': true,
121+
[`spectrum-Accordion--size${this.size?.toUpperCase()}`]:
122+
typeof this.size !== 'undefined',
123+
'spectrum-Accordion--compact': this.density === 'compact',
124+
'spectrum-Accordion--spacious': this.density === 'spacious',
125+
})}
126+
role="region"
127+
>
128+
<slot
129+
@slotchange=${this.handleSlotchange}
130+
@sp-accordion-item-toggle=${this.onToggle}
131+
></slot>
132+
</div>
121133
`;
122134
}
123135
}

‎packages/accordion/src/AccordionItem.ts

+53-39
Original file line numberDiff line numberDiff line change
@@ -19,44 +19,39 @@ import {
1919
} from '@spectrum-web-components/base';
2020
import { property } from '@spectrum-web-components/base/src/decorators.js';
2121
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
22-
import { when } from '@spectrum-web-components/base/src/directives.js';
22+
import {
23+
classMap,
24+
when,
25+
} from '@spectrum-web-components/base/src/directives.js';
2326
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
2427
import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
2528

2629
import styles from './accordion-item.css.js';
2730

2831
const chevronIcon: Record<string, () => TemplateResult> = {
2932
s: () => html`
30-
<span class="iconContainer">
31-
<sp-icon-chevron100
32-
class="indicator spectrum-UIIcon-ChevronRight75"
33-
slot="icon"
34-
></sp-icon-chevron100>
35-
</span>
33+
<sp-icon-chevron100
34+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight75"
35+
slot="icon"
36+
></sp-icon-chevron100>
3637
`,
3738
m: () => html`
38-
<span class="iconContainer">
39-
<sp-icon-chevron100
40-
class="indicator spectrum-UIIcon-ChevronRight100"
41-
slot="icon"
42-
></sp-icon-chevron100>
43-
</span>
39+
<sp-icon-chevron100
40+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight100"
41+
slot="icon"
42+
></sp-icon-chevron100>
4443
`,
4544
l: () => html`
46-
<span class="iconContainer">
47-
<sp-icon-chevron100
48-
class="indicator spectrum-UIIcon-ChevronRight200"
49-
slot="icon"
50-
></sp-icon-chevron100>
51-
</span>
45+
<sp-icon-chevron100
46+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight200"
47+
slot="icon"
48+
></sp-icon-chevron100>
5249
`,
5350
xl: () => html`
54-
<span class="iconContainer">
55-
<sp-icon-chevron100
56-
class="indicator spectrum-UIIcon-ChevronRight300"
57-
slot="icon"
58-
></sp-icon-chevron100>
59-
</span>
51+
<sp-icon-chevron100
52+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight300"
53+
slot="icon"
54+
></sp-icon-chevron100>
6055
`,
6156
};
6257

@@ -108,25 +103,44 @@ export class AccordionItem extends SizedMixin(Focusable, {
108103
}
109104

110105
protected renderChevronIcon = (): TemplateResult => {
111-
return chevronIcon[this.size || 'm']();
106+
return html`
107+
<span class="spectrum-Accordion-itemIconContainer">
108+
${chevronIcon[this.size || 'm']()}
109+
</span>
110+
`;
112111
};
113112

114113
protected override render(): TemplateResult {
115114
return html`
116-
<h3 id="heading">
117-
${when(this.size, this.renderChevronIcon)}
118-
<button
119-
id="header"
120-
@click=${this.onClick}
121-
aria-expanded=${this.open}
122-
aria-controls="content"
123-
?disabled=${this.disabled}
115+
<div
116+
class=${classMap({
117+
'spectrum-Accordion-item': true,
118+
'is-open': this.open && !this.disabled,
119+
'is-disabled': this.disabled,
120+
})}
121+
role="presentation"
122+
>
123+
<h3 id="heading" class="spectrum-Accordion-itemHeading">
124+
<button
125+
id="header"
126+
class="spectrum-Accordion-itemHeader"
127+
@click=${this.onClick}
128+
aria-expanded=${this.open ? 'true' : 'false'}
129+
aria-controls="content"
130+
?disabled=${this.disabled}
131+
>
132+
${this.label}
133+
</button>
134+
${when(this.size, this.renderChevronIcon)}
135+
</h3>
136+
<div
137+
id="content"
138+
role="region"
139+
aria-labelledby="header"
140+
class="spectrum-Accordion-itemContent"
124141
>
125-
${this.label}
126-
</button>
127-
</h3>
128-
<div id="content" role="region" aria-labelledby="header">
129-
<slot></slot>
142+
<slot></slot>
143+
</div>
130144
</div>
131145
`;
132146
}

‎packages/accordion/src/accordion-item-overrides.css

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

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
.spectrum-Accordion--sizeM {
15-
--spectrum-accordion-item-height: var(
16-
--system-accordion-size-m-item-height
17-
);
18-
--spectrum-accordion-disclosure-indicator-height: var(
19-
--system-accordion-size-m-disclosure-indicator-height
20-
);
21-
--spectrum-accordion-component-edge-to-text: var(
22-
--system-accordion-size-m-component-edge-to-text
23-
);
24-
--spectrum-accordion-item-header-font-size: var(
25-
--system-accordion-size-m-item-header-font-size
26-
);
27-
--spectrum-accordion-item-content-font-size: var(
28-
--system-accordion-size-m-item-content-font-size
29-
);
30-
--spectrum-accordion-item-header-top-to-text-space: var(
31-
--system-accordion-size-m-item-header-top-to-text-space
32-
);
33-
--spectrum-accordion-item-header-bottom-to-text-space: var(
34-
--system-accordion-size-m-item-header-bottom-to-text-space
35-
);
36-
}

‎packages/accordion/src/accordion-item.css

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

1313
@import url('./spectrum-accordion-item.css');
14-
15-
:host {
16-
display: block;
17-
}
18-
19-
#heading {
20-
/* .spectrum-Accordion-itemHeading */
21-
height: auto;
22-
position: relative;
23-
}
24-
25-
:host([disabled]) #heading .indicator {
26-
color: var(
27-
--mod-accordion-item-header-disabled-color,
28-
var(--spectrum-accordion-item-header-disabled-color)
29-
);
30-
}

0 commit comments

Comments
 (0)