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

Create modal pop up including greyed out background #162

Closed
UXdave-alexander opened this issue Feb 8, 2024 · 6 comments · Fixed by #176
Closed

Create modal pop up including greyed out background #162

UXdave-alexander opened this issue Feb 8, 2024 · 6 comments · Fixed by #176
Assignees
@UKHOGreg
Labels
enhancement New feature or request

Comments

@UXdave-alexander
Copy link

Is your feature request related to a problem? Please describe.
This new component is needed for Data Upload and as a component to prevent user error

Describe the solution you'd like
image
image
Images show desktop and mobile to include breakpoint at tablet. Background is #333333 with 65% capacity.

Describe alternatives you've considered
Thoroughly checked and designed so no alterntives

Additional context
As above
See Katie Paige as Designer
@UXdave-alexander UXdave-alexander added the enhancement New feature or request label Feb 8, 2024
@UKHOGreg UKHOGreg assigned UKHOGreg and unassigned ecstaticrainbow Mar 14, 2024
@UKHOGreg
Copy link
Contributor

UKHOGreg commented Mar 19, 2024 •
edited

Talked with @ecstaticrainbow

Plan is:

  • prop for the heading text (don't use h elements)
  • component with two named slots
    • One for the content
    • One for the action buttons
  • ensure that there is a storybook story for restricted width

@UKHOGreg UKHOGreg linked a pull request Mar 19, 2024 that will close this issue
feat: Add Modal Dialog #176
Merged
@UKHOGreg
Copy link
Contributor

WIP

image

@UKHOGreg
Copy link
Contributor

Latest WIP:

image

@UKHOGreg
Copy link
Contributor

UKHOGreg commented Apr 9, 2024

Chat with @ecstaticrainbow

  • Can use media queries/breakpoints to determine size of the modal, but could google for a better solution.
  • Escape key to close modal?

@UKHOGreg
Copy link
Contributor

Agreed with @KatiePUX to make responsiveness out of scope due to technical difficulties with implementing it (the issue being incorrect CSS being generated from SCSS)

@UKHOGreg
Copy link
Contributor

Agreed with @KatiePUX to make a correctly functioning doc website page out of scope .

Currently the modal dialog hijacks the page.

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

@UKHOGreg UKHOGreg

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Add Modal Dialog UKHO/admiralty-design-system
3 participants
@ecstaticrainbow @UKHOGreg @UXdave-alexander