Skip to content

feat(accordion-item): stretch slotted actions to fill its height #9250

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

Merged
josercarcamo merged 19 commits into from
Oct 7, 2024
Merged

feat(accordion-item): stretch slotted actions to fill its height #9250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d1842b4
feat(accordion-item): stretch slotted actions to fill its height
josercarcamo May 2, 2024
91c3fed
Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions
josercarcamo May 2, 2024
8323d22
Refactored code per code review and added UI test
josercarcamo May 3, 2024
0878654
Added demo for slotted actions
josercarcamo May 3, 2024
4e304f8
Merge branch 'josercarcamo/6565-stretch-slotted-actions' of github.co…
josercarcamo May 3, 2024
f8dbd61
Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions
josercarcamo May 3, 2024
39c2f87
Changed the UI test
josercarcamo May 3, 2024
dbc87e6
Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions
josercarcamo May 3, 2024
71b53a8
Trying different solution
josercarcamo May 3, 2024
ac8cf12
Removed items stretch
josercarcamo May 3, 2024
f4037f7
compeonts
josercarcamo Sep 27, 2024
ee6a1cb
Increased specificity of actions-start and added items-stretch
josercarcamo Oct 3, 2024
22c4882
Removed unnecessary rule
josercarcamo Oct 3, 2024
25fa2e8
Resolved conflicts
josercarcamo Oct 3, 2024
f396655
Merging
josercarcamo Oct 3, 2024
e92efd8
Modified solution to not stretch slot element; added actions-end to s…
josercarcamo Oct 3, 2024
7ddbffb
Merge branch 'dev' into josercarcamo/6565-stretch-slotted-actions
josercarcamo Oct 3, 2024
40ee644
Changed scale to 'l' to ensure actions stretch to fill their space
josercarcamo Oct 7, 2024
7cd73bf
Merge branch 'dev' into josercarcamo/6565-stretch-slotted-actions
josercarcamo Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/accordion-item/accordion-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,10 @@

.actions-start,
.actions-end {
@apply flex items-center;
@apply flex items-stretch;
* {
Copy link
Copy Markdown
Member

@jcfranco jcfranco Oct 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can skip the * rule because:

  1. These slots are specifically for actions, which don't have children.
  2. Overriding user styles for slotted content should be avoided.

Copy link
Copy Markdown
Contributor Author

@josercarcamo josercarcamo Oct 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The thing is that

calcite-design-system/packages/calcite-components/src/components/accordion-item/accordion-item.scss

Line 92 in 7ddbffb

* {
causes all elements below header to have "items-center" so it has to be overridden which is what this line change does. How should we proceed?

Copy link
Copy Markdown
Member

@jcfranco jcfranco Oct 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies! I thought this was targeting the slotted content. 😅

Sidebar: I still think we can tidy this up to avoid having to override the universal selector elsewhere. We should consider swapping out the universal selector for explicit ones in a follow-up PR.

@apply items-stretch;
}
}

.icon {
Expand Down
11 changes: 11 additions & 0 deletions packages/calcite-components/src/components/accordion/accordion.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,3 +217,14 @@ const accordionItemsIconHeaderUseCases = iconHeaderUseCasesArr
export const longHeading_MediumIconForLargeAccordionItem_TestOnly = (): string => html`
<calcite-accordion scale="l" style="width: 600px"> ${accordionItemsIconHeaderUseCases} </calcite-accordion>
`;
export const slottedItemsStretched = (): string => html`
<calcite-accordion scale="l">
<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-action slot="actions-start" icon="smile"> </calcite-action>
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
<calcite-action slot="actions-end" icon="smile"></calcite-action>
</calcite-accordion-item>
</calcite-accordion>
`;
33 changes: 33 additions & 0 deletions packages/calcite-components/src/demos/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -904,6 +904,39 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
</calcite-accordion>
</div>
</div>
<div class="parent">
<div class="child right-aligned-text">Slotted Actions</div>
<div class="child">
<calcite-accordion scale="s">
<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-action slot="actions-start" icon="smile"> </calcite-action>
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-accordion-item>
</calcite-accordion>
</div>
<div class="child">
<calcite-accordion scale="m">
<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-action slot="actions-start" icon="smile"> </calcite-action>
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-accordion-item>
</calcite-accordion>
</div>
<div class="child">
<calcite-accordion scale="l">
<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-action slot="actions-start" icon="smile"> </calcite-action>
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-accordion-item>
</calcite-accordion>
</div>
</div>

<!-- Theme-ing -->
<demo-theme
Expand Down