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.

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

[Panel & Flow Item]: Refactor "footer" slot to account for modal #8981

Closed
1 of 5 tasks
geospatialem opened this issue Mar 21, 2024 · 11 comments
Closed
1 of 5 tasks

[Panel & Flow Item]: Refactor "footer" slot to account for modal #8981

geospatialem opened this issue Mar 21, 2024 · 11 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. refactor Issues tied to code that needs to be significantly reworked. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.

Comments

@geospatialem
Copy link
Member

geospatialem commented Mar 21, 2024

Description

Currently the panel and flow-item have a "footer" slot, however to accommodate the Dialog + Modal component effort in #7886, we may need to account of additional footer slots, such as "footer-start" and "footer-end" to match the "back / secondary / start" currently offered in the modal component.

Acceptance Criteria

Refactor panel and flow-item footer to include footer-end & footer-start slots with no built in spacing between or within slots

Which Component

  • panel
  • flow-item

Relevant Info

A dependency needed for the Dialog + Modal component effort in #7886

See Figma file for specs
image

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components
@geospatialem geospatialem added refactor Issues tied to code that needs to be significantly reworked. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Mar 21, 2024
@github-actions github-actions bot added the calcite-components Issues specific to the @esri/calcite-components package. label Mar 21, 2024
@geospatialem geospatialem added design Issues that need design consultation prior to development. Calcite (design) Issues logged by Calcite designers. enhancement Issues tied to a new feature or request. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed needs triage Planning workflow - pending design/dev review. labels Mar 21, 2024
@macandcheese
Copy link
Contributor

Not sure if this applies to Card cc @ashetland @SkyeSeitz - I think it may have just been mentioned as a component that has footer-start/end slots.

@SkyeSeitz
Copy link

Agreed. I believe the idea was to confirm if we wanted more consistency between footers across components or if Card should be unique.

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 15, 2024
@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Apr 25, 2024
@SkyeSeitz SkyeSeitz removed their assignment Apr 25, 2024
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Apr 25, 2024
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem removed the 1 - assigned Issues that are assigned to a sprint and a team member. label Apr 25, 2024
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 5 A few days of work, definitely requires updates to tests. and removed needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Apr 25, 2024
@SkyeSeitz SkyeSeitz changed the title [Card/Panel]: Refactor "footer" slot to account for modal [Panel]: Refactor "footer" slot to account for modal Apr 25, 2024
@SkyeSeitz SkyeSeitz changed the title [Panel]: Refactor "footer" slot to account for modal [Panel & Flow Item]: Refactor "footer" slot to account for modal May 13, 2024
@Elijbet Elijbet added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 16, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned Elijbet Jun 25, 2024
Copy link
Contributor

Installed and assigned for verification.

@geospatialem
Copy link
Member Author

The panel is good to go in 2.10.0-next.10 via https://codepen.io/geospatialem/pen/PovBzKM 👍🏻 , but it looks like the flow-item's slots are reversed as depicted in https://codepen.io/geospatialem/pen/pomZbwE.

image

Sending back to development for follow-up prior to release.

@geospatialem geospatialem assigned Elijbet and unassigned geospatialem and DitwanP Jun 25, 2024
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jun 25, 2024
@geospatialem geospatialem assigned jcfranco and unassigned Elijbet Jun 25, 2024
jcfranco added a commit that referenced this issue Jun 25, 2024
**Related Issue:** #8981

## Summary

Fixes DOM order of flow-item footer start/end slots.

Note: `flow-item` and `panel` stories were updated to make footer slot
content easier to review.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jun 25, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Jun 25, 2024
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Jun 25, 2024

🍡 Verified locally on dev.

flow-item slots are ordered correctly now 👌image

@DitwanP DitwanP closed this as completed Jun 25, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jun 25, 2024
jcfranco added a commit that referenced this issue Jun 26, 2024
#9682)

**Related Issue:** #8981

## Summary

Updates panel story to capture default space between footer start/end
slots, which was lost in #9681.
benelan pushed a commit that referenced this issue Jun 27, 2024
#9682)

**Related Issue:** #8981

## Summary

Updates panel story to capture default space between footer start/end
slots, which was lost in #9681.
@driskull
Copy link
Member

driskull commented Jul 9, 2024

@DitwanP @geospatialem this introduced a regression. The following CSS prop isn't being honored anymore: 3def3ea#r144045487

--calcite-panel-footer-padding

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. refactor Issues tied to code that needs to be significantly reworked. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Development

No branches or pull requests

8 participants