Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(accordion): core token migration #3300

Merged
merged 18 commits into from
Jun 27, 2023
Merged

feat(accordion): core token migration #3300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
bcd0e81
feat(accordion): accordion core token migration
venkateshjo Jun 8, 2023
03d4e2c
chore(accordion): updating the storybook
venkateshjo Jun 11, 2023
3109bd1
chore(accordion): minor fixes
venkateshjo Jun 12, 2023
ee80496
chore(accordion): updating new beta package
venkateshjo Jun 12, 2023
5c78600
feat(accordion): addressing review suggestions
venkateshjo Jun 19, 2023
ac05ef5
chore: chevron sizing approach
castastrophe Jun 21, 2023
debde21
chore(accordion): removing ununsed code
venkateshjo Jun 22, 2023
75a4b25
feat(accordion): addressing review suggestions
venkateshjo Jun 23, 2023
9b21102
feat(accordion): updating the default variables
venkateshjo Jun 23, 2023
5f0d53a
feat(accordion): minor fix
venkateshjo Jun 23, 2023
7a18f54
feat(accordion): updating the documentation
venkateshjo Jun 23, 2023
ae1eb57
feat(accordion): updating the storybook
venkateshjo Jun 23, 2023
8c2caaa
feat(accordion)!: updating the golden hash
venkateshjo Jun 26, 2023
8cfd28b
feat(accordion)!: removing regular references
venkateshjo Jun 26, 2023
84d86fe
feat(accordion)!: addressing review comments
venkateshjo Jun 26, 2023
24586ff
feat(accordion)!: minor lint fixes
venkateshjo Jun 27, 2023
a6c63e8
feat(accordion)!: minor fixes
venkateshjo Jun 27, 2023
80d392a
feat(accordion)!: minor fixes
venkateshjo Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: d55f3744c025ef7ff20183e23afa141e98130a4e
default: 8eda90e60eb073d6b78741e5b3457324ca155d59
wireit_cache_name:
type: string
default: wireit
Expand Down
271 changes: 271 additions & 0 deletions packages/accordion/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,274 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
</sp-accordion-item>
</sp-accordion>
```

## Sizes

<sp-tabs selected="m" auto label="Size Attribute Options">
<sp-tab value="s">Small</sp-tab>
<sp-tab-panel value="s">

```html
<sp-accordion size="s">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="m">Medium</sp-tab>
<sp-tab-panel value="m">

```html
<sp-accordion size="m">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="l">Large</sp-tab>
<sp-tab-panel value="l">

```html
<sp-accordion size="l">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="xl">Extra Large</sp-tab>
<sp-tab-panel value="xl">

```html
<sp-accordion size="xl">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
</sp-tabs>

## Density

The `density` property, when applied, accepts the values of `compact` or `spacious`.

### Compact

<sp-tabs selected="m" auto label="Size Attribute Options">
<sp-tab value="s">Small</sp-tab>
<sp-tab-panel value="s">

```html
<sp-accordion density="compact" size="s">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="m">Medium</sp-tab>
<sp-tab-panel value="m">

```html
<sp-accordion density="compact" size="m">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="l">Large</sp-tab>
<sp-tab-panel value="l">

```html
<sp-accordion density="compact" size="l">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="xl">Extra Large</sp-tab>
<sp-tab-panel value="xl">

```html
<sp-accordion density="compact" size="xl">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
</sp-tabs>

### Spacious

<sp-tabs selected="m" auto label="Size Attribute Options">
<sp-tab value="s">Small</sp-tab>
<sp-tab-panel value="s">

```html
<sp-accordion density="spacious" size="s">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="m">Medium</sp-tab>
<sp-tab-panel value="m">

```html
<sp-accordion density="spacious" size="m">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="l">Large</sp-tab>
<sp-tab-panel value="l">

```html
<sp-accordion density="spacious" size="l">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
<sp-tab value="xl">Extra Large</sp-tab>
<sp-tab-panel value="xl">

```html
<sp-accordion density="spacious" size="xl">
<sp-accordion-item label="Heading 1">
<div>Item 1</div>
</sp-accordion-item>
<sp-accordion-item disabled label="Heading 2">
<div>Item 2</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 3">
<div>Item 3</div>
</sp-accordion-item>
<sp-accordion-item label="Heading 4">
<div>Item 4</div>
</sp-accordion-item>
</sp-accordion>
```

</sp-tab-panel>
</sp-tabs>
2 changes: 1 addition & 1 deletion packages/accordion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
"@spectrum-web-components/shared": "^0.33.2"
},
"devDependencies": {
"@spectrum-css/accordion": "^3.0.49"
"@spectrum-css/accordion": "^4.0.0"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
27 changes: 26 additions & 1 deletion packages/accordion/src/Accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ governing permissions and limitations under the License.
import {
CSSResultArray,
html,
PropertyValues,
SizedMixin,
SpectrumElement,
TemplateResult,
} from '@spectrum-web-components/base';
Expand All @@ -30,7 +32,9 @@ import styles from './accordion.css.js';
* @element sp-accordion
* @slot - The sp-accordion-item children to display.
*/
export class Accordion extends SpectrumElement {
export class Accordion extends SizedMixin(SpectrumElement, {
noDefaultSize: true,
}) {
public static override get styles(): CSSResultArray {
return [styles];
}
Expand All @@ -41,6 +45,12 @@ export class Accordion extends SpectrumElement {
@property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })
public allowMultiple = false;

/**
* Sets the spacing between the content to borders of an accordion item
*/
@property({ type: String, reflect: true })
public density?: 'compact' | 'spacious';

@queryAssignedNodes()
private defaultNodes!: NodeListOf<AccordionItem>;

Expand Down Expand Up @@ -85,6 +95,21 @@ export class Accordion extends SpectrumElement {

private handleSlotchange(): void {
this.focusGroupController.clearElementCache();
this.items.forEach((item) => {
item.size = this.size;
});
}

protected override updated(changed: PropertyValues<this>): void {
super.updated(changed);
if (
changed.has('size') &&
(!!changed.get('size') || this.size !== 'm')
) {
this.items.forEach((item) => {
item.size = this.size;
});
}
}

protected override render(): TemplateResult {
Expand Down