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-item): stretch slotted actions to fill its height #9250

Merged
merged 19 commits into from
Oct 7, 2024
+48 −1
Merged

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

Show file tree
Hide file tree
Changes from 10 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
4 changes: 4 additions & 0 deletions 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 @@ -192,6 +192,10 @@
@apply flex items-center;
}

slot[name="actions-start"] {
block-size: 100%;
}
Copy link
Member

Choose a reason for hiding this comment

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

Is this working @josercarcamo? Do we need some new screenshot tests to account for these changes?

I would have expected either align-items:stretch or align-self:stretch needs to be used to stretch the items by either using the ::slotted selector or some element within the shadow DOM of the component.

Something like:

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

Line 78 in b069284

items-stretch

or

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

Lines 190 to 193 in b069284

calcite-action,
calcite-handle {
@apply self-stretch;
}

Copy link
Contributor Author

@josercarcamo josercarcamo May 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Yes, it is working, at least with manual testing. I tried the "align-items: stretch" but it didn't work in this case. I actually tried to use the solution in alert.scss as shown below, but it didn't work.

.actions-end { @apply flex self-stretch; }

EDIT: Actually, your suggestion led me to a simpler solution. Testing and will push soon.

Copy link
Member

Choose a reason for hiding this comment

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

I'm just wondering why this is doing anything. A slot element is just a placeholder and really isn't an element that needs to be styled.


@media (forced-colors: active) {
:host([expanded]) {
& .header {
Expand Down
10 changes: 10 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 @@ -296,3 +296,13 @@ 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="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>
`;
4 changes: 4 additions & 0 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
--calcite-action-color-transparent-press: var(--calcite-color-transparent-press);
}

:host([slot="actions-start"]) {
block-size: 100%;
}

@mixin action-indicator() {
position: relative;
&::after {
Expand Down
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>
</demo-dom-swapper>
</body>
</html>
Loading