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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 10 commits into from
+51 −0

Conversation

josercarcamo
Copy link
Contributor

Related Issue: #6565

Summary

Made the height of the action item 100% so that it fills its available height.

@josercarcamo josercarcamo requested a review from a team as a code owner May 2, 2024 23:17
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label May 2, 2024
@josercarcamo josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 2, 2024
driskull
driskull reviewed May 3, 2024
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

comments!

packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -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

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.

@driskull driskull requested a review from macandcheese May 3, 2024 16:08
@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 3, 2024
@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 3, 2024
@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 3, 2024
@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 3, 2024
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 11, 2024
@driskull
Copy link
Member

How's this one going @josercarcamo?

@josercarcamo
Copy link
Contributor Author

@driskull as we discussed on teams, I'll pick this up when the September release nears or I'll try to squeeze it in during down time in some other release.

@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label May 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull left review comments

@macandcheese macandcheese Awaiting requested review from macandcheese

At least 1 approving review is required to merge this pull request.

Assignees

@josercarcamo josercarcamo

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing. Stale Issues or pull requests that have not had recent activity.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@josercarcamo @driskull