Skip to content

Commit b137e9c

Browse files
castastrophecastastrophe
committed
feat(accordion): rework styles to leverage existing CSS
1 parent 7c87fe8 commit b137e9c

12 files changed

+664
-726
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"new-package": "cd projects/templates && plop",
4848
"postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js",
4949
"postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"",
50-
"postinstall": "patch-package && yarn get-ready",
50+
"postinstall": "patch-package",
5151
"postlerna-publish": "yarn publish:react",
5252
"postpublish:react": "git reset --hard HEAD^ && git prune",
5353
"precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:",
@@ -173,7 +173,7 @@
173173
"lit-analyzer": "^2.0.3",
174174
"lit-html": "^2.4.0 || ^3.1.3",
175175
"mocha-junit-reporter": "^2.0.2",
176-
"netlify-cli": "^17.33.5",
176+
"netlify-cli": "^17.37.2",
177177
"next": "^14",
178178
"node-fetch": "^3.1.0",
179179
"npm-run-all2": "^6.0.0",

‎packages/accordion/package.json

-2
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",

‎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--${this.size}`]:
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

+39-22
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ 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
import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
@@ -28,33 +31,33 @@ import styles from './accordion-item.css.js';
2831

2932
const chevronIcon: Record<string, () => TemplateResult> = {
3033
s: () => html`
31-
<span class="iconContainer">
34+
<span class="spectrum-Accordion-itemIconContainer">
3235
<sp-icon-chevron100
33-
class="indicator spectrum-UIIcon-ChevronRight75"
36+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight75"
3437
slot="icon"
3538
></sp-icon-chevron100>
3639
</span>
3740
`,
3841
m: () => html`
39-
<span class="iconContainer">
42+
<span class="spectrum-Accordion-itemIconContainer">
4043
<sp-icon-chevron100
41-
class="indicator spectrum-UIIcon-ChevronRight100"
44+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight100"
4245
slot="icon"
4346
></sp-icon-chevron100>
4447
</span>
4548
`,
4649
l: () => html`
47-
<span class="iconContainer">
50+
<span class="spectrum-Accordion-itemIconContainer">
4851
<sp-icon-chevron100
49-
class="indicator spectrum-UIIcon-ChevronRight200"
52+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight200"
5053
slot="icon"
5154
></sp-icon-chevron100>
5255
</span>
5356
`,
5457
xl: () => html`
55-
<span class="iconContainer">
58+
<span class="spectrum-Accordion-itemIconContainer">
5659
<sp-icon-chevron100
57-
class="indicator spectrum-UIIcon-ChevronRight300"
60+
class="spectrum-Accordion-itemIndicator spectrum-UIIcon-ChevronRight300"
5861
slot="icon"
5962
></sp-icon-chevron100>
6063
</span>
@@ -114,20 +117,34 @@ export class AccordionItem extends SizedMixin(Focusable, {
114117

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

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

-36
This file was deleted.

‎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)