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

josercarcamo · 2024-05-02T23:17:54Z

Related Issue: #6565

Summary

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

driskull

comments!

driskull · 2024-05-03T00:01:00Z

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%;
+}


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;

}

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.

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.

…m:Esri/calcite-design-system into josercarcamo/6565-stretch-slotted-actions

github-actions · 2024-05-11T01:44:31Z

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.

driskull · 2024-05-13T17:27:16Z

How's this one going @josercarcamo?

josercarcamo · 2024-05-21T00:34:42Z

@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 · 2024-05-28T01:46:23Z

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.

alisonailea · 2024-06-21T20:17:47Z

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.

Sorry for accidental churn. I think I missed this discussion. Can we add the September milestone tag to this? @geospatialem

geospatialem · 2024-06-21T20:36:15Z

Sorry for accidental churn. I think I missed this discussion. Can we add the September milestone tag to this? @geospatialem

@alisonailea The issue was originally in September, but the above PR was initialized before the milestone started in May. We should be covered for the future work already. 💪🏻

github-actions · 2024-07-03T01:48:03Z

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.

…tory

jcfranco

Looking good, @josercarcamo! 😎

jcfranco · 2024-10-04T18:35:05Z

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

@@ -147,7 +147,10 @@

 .actions-start,
 .actions-end {
-  @apply flex items-center;
+  @apply flex items-stretch;
+  * {


I think we can skip the * rule because:

These slots are specifically for actions, which don't have children.

Overriding user styles for slotted content should be avoided.

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?

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.

jcfranco

Code changes LGTM!

jcfranco · 2024-10-07T07:16:12Z

I forgot to mention, before installing, could you update the story to ensure it catches any regression if this style is changed or removed? I didn’t notice any difference when I tested by removing it locally and comparing.

* origin/dev: (230 commits) chore: release next chore(sort-handle): add messages (#10474) feat(accordion-item): stretch slotted actions to fill its height (#9250) chore: release next feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape (#9231) chore: remove commented-out code (#10478) chore: add cssrem VSCode extension recommendation (#10300) docs(accordion-item): fix deprecation tag (#10479) chore: release next feat(stepper-item): update component's active state background color. (#10475) refactor: use `requestAnimationFrame` to replace `readTask` (#10432) chore: release next fix(tip): fix rendering tied to named-slot content (#10470) ci: compile estimate totals per milestone (#10442) chore: release next fix(modal): fix rendering tied to named-slot content (#10469) chore: release next fix(shell-center-row): fix rendering tied to named-slot content (#10451) fix(inline-editable): fix rendering tied to default slot content (#10456) fix(input, input-number, input-text): should not set slotted actions to be disabled (#10458) ...

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

d1842b4

josercarcamo requested a review from a team as a code owner May 2, 2024 23:17

github-actions bot assigned josercarcamo May 2, 2024

Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions

91c3fed

github-actions bot added the enhancement Issues tied to a new feature or request. label May 2, 2024

josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 2, 2024

driskull reviewed May 3, 2024

View reviewed changes

driskull requested a review from macandcheese May 3, 2024 16:08

josercarcamo added 4 commits May 3, 2024 11:59

Refactored code per code review and added UI test

8323d22

Added demo for slotted actions

0878654

Merge branch 'josercarcamo/6565-stretch-slotted-actions' of github.co…

4e304f8

…m:Esri/calcite-design-system into josercarcamo/6565-stretch-slotted-actions

Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions

f8dbd61

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 added 2 commits May 3, 2024 14:26

Changed the UI test

39c2f87

Merge branch 'main' into josercarcamo/6565-stretch-slotted-actions

dbc87e6

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

Trying different solution

71b53a8

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

Removed items stretch

ac8cf12

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 bot added the Stale Issues or pull requests that have not had recent activity. label May 11, 2024

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label May 21, 2024

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jun 23, 2024

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jul 3, 2024

josercarcamo added 4 commits September 26, 2024 22:50

compeonts

f4037f7

Increased specificity of actions-start and added items-stretch

ee6a1cb

Removed unnecessary rule

22c4882

Resolved conflicts

25fa2e8

josercarcamo requested review from benelan and jcfranco as code owners October 3, 2024 17:55

josercarcamo and others added 3 commits October 3, 2024 11:11

Merging

f396655

Modified solution to not stretch slot element; added actions-end to s…

e92efd8

…tory

Merge branch 'dev' into josercarcamo/6565-stretch-slotted-actions

7ddbffb

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 Oct 3, 2024

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Oct 4, 2024

jcfranco requested changes Oct 4, 2024

View reviewed changes

jcfranco approved these changes Oct 4, 2024

View reviewed changes

josercarcamo and others added 2 commits October 7, 2024 10:04

Changed scale to 'l' to ensure actions stretch to fill their space

40ee644

Merge branch 'dev' into josercarcamo/6565-stretch-slotted-actions

7cd73bf

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 Oct 7, 2024

josercarcamo merged commit ba46dc4 into dev Oct 7, 2024
13 checks passed

josercarcamo deleted the josercarcamo/6565-stretch-slotted-actions branch October 7, 2024 17:56

github-actions bot added this to the 2.13.1 patch milestone Oct 7, 2024

geospatialem modified the milestones: 2.13.1 patch, 2024-10-29 - Oct Milestone Oct 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

josercarcamo commented May 2, 2024

driskull left a comment

driskull May 3, 2024

josercarcamo May 3, 2024 •

edited

Loading

driskull May 16, 2024

github-actions bot commented May 11, 2024

driskull commented May 13, 2024

josercarcamo commented May 21, 2024

github-actions bot commented May 28, 2024

alisonailea commented Jun 21, 2024

geospatialem commented Jun 21, 2024

github-actions bot commented Jul 3, 2024

jcfranco left a comment

jcfranco Oct 4, 2024

josercarcamo Oct 4, 2024 •

edited

Loading

jcfranco Oct 4, 2024

jcfranco left a comment

jcfranco commented Oct 7, 2024

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

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

Conversation

josercarcamo commented May 2, 2024

Summary

driskull left a comment

Choose a reason for hiding this comment

driskull May 3, 2024

Choose a reason for hiding this comment

josercarcamo May 3, 2024 • edited Loading

Choose a reason for hiding this comment

driskull May 16, 2024

Choose a reason for hiding this comment

github-actions bot commented May 11, 2024

driskull commented May 13, 2024

josercarcamo commented May 21, 2024

github-actions bot commented May 28, 2024

alisonailea commented Jun 21, 2024

geospatialem commented Jun 21, 2024

github-actions bot commented Jul 3, 2024

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Oct 4, 2024

Choose a reason for hiding this comment

josercarcamo Oct 4, 2024 • edited Loading

Choose a reason for hiding this comment

jcfranco Oct 4, 2024

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco commented Oct 7, 2024

josercarcamo May 3, 2024 •

edited

Loading

josercarcamo Oct 4, 2024 •

edited

Loading