diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/packages/components/src/components/post-collapsible/post-collapsible.scss index 9e634b450c..83d99816a3 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.scss +++ b/packages/components/src/components/post-collapsible/post-collapsible.scss @@ -2,8 +2,16 @@ :host { display: block; +} + +.accordion-button { + cursor: pointer; - .accordion-button > ::slotted(.text-truncate) { + > ::slotted(.text-truncate) { display: block; } } + +post-collapsible + post-collapsible::part(accordion-item) { + border-block-start: 0!important; +} diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 3cce479c2b..8aff5fc2ae 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -1,4 +1,15 @@ -import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core'; +import { + Component, + Element, + Event, + EventEmitter, + h, + Host, + Method, + Prop, + State, + Watch, +} from '@stencil/core'; import { version } from '../../../package.json'; import { collapse, expand } from '../../animations/collapse'; import { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils'; @@ -27,7 +38,11 @@ export class PostCollapsible { @Watch('collapsed') validateCollapsed(newValue = this.collapsed) { - checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.'); + checkEmptyOrType( + newValue, + 'boolean', + 'The `collapsed` property of the `post-collapsible` must be a boolean.', + ); } /** @@ -37,7 +52,11 @@ export class PostCollapsible { @Watch('headingLevel') validateHeadingLevel(newValue = this.headingLevel) { - checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.'); + checkEmptyOrOneOf( + newValue, + HEADING_LEVELS, + 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.', + ); } /** @@ -73,7 +92,7 @@ export class PostCollapsible { this.isOpen = !this.isOpen; if (this.isLoaded) this.collapseChange.emit(); - const animation = open ? expand(this.collapsible): collapse(this.collapsible); + const animation = open ? expand(this.collapsible) : collapse(this.collapsible); if (!this.isLoaded || isMotionReduced()) animation.finish(); @@ -90,14 +109,14 @@ export class PostCollapsible { aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined} class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`} id={`${this.id}--collapse`} - ref={el => this.collapsible = el} + ref={el => (this.collapsible = el)} > {this.hasHeader ? (
- +
) : ( - + )} ); @@ -105,7 +124,7 @@ export class PostCollapsible { return ( {this.hasHeader ? ( -
+
{collapse}
- ) : collapse} + ) : ( + collapse + )} ); } diff --git a/packages/components/src/components/post-collapsible/readme.md b/packages/components/src/components/post-collapsible/readme.md index 247bced42e..85922e96bb 100644 --- a/packages/components/src/components/post-collapsible/readme.md +++ b/packages/components/src/components/post-collapsible/readme.md @@ -35,6 +35,13 @@ Type: `Promise` +## Shadow Parts + +| Part | Description | +| ------------------ | ----------- | +| `"accordion-item"` | | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*