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

[Modal] Provide sticky slots adjacent to content slot #4800

Closed
Tracked by #5529
macandcheese opened this issue Jun 23, 2022 · 7 comments
Closed
Tracked by #5529

[Modal] Provide sticky slots adjacent to content slot #4800

macandcheese opened this issue Jun 23, 2022 · 7 comments
Assignees
@Elijbet
Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request.
Milestone
2023 February Pri...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jun 23, 2022 •
edited
Loading

Description

A common request we get is to provide styling / css for a sticky portion of content above the content slot in a modal. Similarly this could be applicable to a bottom content section.

Because there are internally rendered / shadow DOM divs, it's tricky for a consumer to create this styling on their own. A proposal can be made to add sticky top / bottom slots to a modal that surround the content slot - that provide this with built in styles.

Acceptance Criteria

Sticky top / bottom slot/s are added to the modal to provide this styling.

Relevant Info

No response

Which Component

Modal

Example Use Case

Users often want to provide a bit of contextual information (besides the header) above scrolling content within a modal. This is often the case when tabs / a data grid is used in the content slot.
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 23, 2022
@macandcheese macandcheese self-assigned this Jun 23, 2022
@macandcheese macandcheese changed the title [Modal] Provide sticky header / footer slots adjacent to content slot [Modal] Provide sticky slots adjacent to content slot Jun 23, 2022
@shawnmgoulet
Copy link

Here's a practical example:

image

@geospatialem geospatialem mentioned this issue Oct 20, 2022
Closed
6 tasks
@Elijbet Elijbet self-assigned this Nov 6, 2022
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Nov 6, 2022
@geospatialem
Copy link
Member

The design for the enhancement is in the works, and we plan to address in the February release.

@macandcheese macandcheese removed their assignment Dec 15, 2022
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jan 18, 2023
@geospatialem
Copy link
Member

@ashetland @SkyeSeitz - Dev is looking to address this in the February release, are there any design changes or recommendations needed before proceeding?

@ashetland
Copy link

Yes, we need to take another quick pass at it. I'll dig up the file to put eyes on it again.

@ashetland
Copy link

Final spec available in Figma. Sending link to @Elijbet.

@Elijbet Elijbet mentioned this issue Feb 16, 2023
Merged
Elijbet added a commit that referenced this issue Mar 2, 2023
@Elijbet
feat(modal): provides content-top and content-bottom slots (#6490)
4a511ba 
**Related Issue:** #4800

## Summary
Provides `content-top` and `content-bottom` slots. 

For simplicity, we matched the `padding` on the `content-top` and
`content-bottom` to the `content`, with one public prop for the latter.
This can further be developed if requested.

We decided to move forward with `content-top` and `content-bottom`
naming, as this should provide enough context and also aligns with
existing `<x>-start/<x>-end` naming.
@Elijbet Elijbet 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 Mar 2, 2023
@geospatialem geospatialem 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 Mar 15, 2023
@geospatialem
Copy link
Member

Verified on Storybook.

image

@macandcheese
Copy link
Contributor Author

@geospatialem can we add an issue on AFD to add a sample of this to Modal?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Elijbet Elijbet

Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request.
Projects
None yet
Milestone
2023 February Priorities - 1.1.0 - No...
Development

No branches or pull requests
6 participants
@shawnmgoulet @alisonailea @macandcheese @geospatialem @Elijbet @ashetland