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

fix(modal): handle events and focus #2889

Merged
merged 2 commits into from
Sep 7, 2023
Merged

fix(modal): handle events and focus #2889

merged 2 commits into from
Sep 7, 2023

Conversation

DorianMaliszewski
Copy link
Member

Summary

Type

  • Enhancement

Summarise concisely:

What is expected?

Handle events when modal is open to trap focus and prevent elements outisde of the modal being impacted

The following changes where made:

(Describe what you did)

Relevant logs and/or screenshots

Page Before After
url screenshot screenshot
url screenshot screenshot

@changeset-bot
Copy link

changeset-bot bot commented Sep 7, 2023

🦋 Changeset detected

Latest commit: e19dd06

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@ultraviolet/ui Patch
@ultraviolet/form Patch
@examples/next-advanced Patch
@examples/next-simple Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2023

size-limit report 📦

Path Size
packages/form/dist/index.js, packages/icons/dist/index.js, packages/themes/dist/index.js, packages/form/dist/helpers/pickValidators.js, packages/form/dist/hooks/useFormField.js, packages/form/dist/hooks/useOnFieldChange.js, packages/form/dist/hooks/useValidation.js, packages/form/dist/validators/index.js, packages/form/dist/validators/max.js, packages/form/dist/validators/maxDate.js, packages/form/dist/validators/maxLength.js, packages/form/dist/validators/min.js, packages/form/dist/validators/minDate.js, packages/form/dist/validators/minLength.js, packages/form/dist/validators/regex.js, packages/form/dist/validators/required.js, packages/icons/dist/utils/capitalize.js, packages/ui/dist/src/index.js, packages/form/dist/components/CheckboxField/index.js, packages/form/dist/components/CheckboxGroupField/index.js, packages/form/dist/components/DateField/index.js, packages/form/dist/components/Form/index.js, packages/form/dist/components/NumberInputField/index.js, packages/form/dist/components/RadioField/index.js, packages/form/dist/components/RadioGroupField/index.js, packages/form/dist/components/SelectInputField/index.js, packages/form/dist/components/SelectableCardField/index.js, packages/form/dist/components/Submit/index.js, packages/form/dist/components/SubmitErrorAlert/index.js, packages/form/dist/components/TagInputField/index.js, packages/form/dist/components/TextInputField/index.js, packages/form/dist/components/TimeField/index.js, packages/form/dist/components/ToggleField/index.js, packages/form/dist/providers/ErrorContext/index.js, packages/icons/dist/components/CategoryIcon/Icons.js, packages/icons/dist/components/CategoryIcon/index.js, packages/icons/dist/components/Icon/index.js, packages/icons/dist/components/ProductIcon/Icons.js, packages/icons/dist/components/ProductIcon/index.js, packages/themes/dist/themes/console/dark.js, packages/themes/dist/themes/console/darker.js, packages/themes/dist/themes/console/index.js, packages/themes/dist/themes/console/light.js, packages/ui/dist/react-datepicker/dist/react-datepicker.min.css.js, packages/ui/dist/react-toastify/dist/ReactToastify.min.css.js, packages/ui/dist/src/helpers/isJSON.js, packages/ui/dist/src/helpers/legend.js, packages/ui/dist/src/helpers/recursivelyGetChildrenString.js, packages/ui/dist/src/theme/index.js, packages/ui/dist/src/utils/animations.js, packages/ui/dist/src/utils/capitalize.js, packages/ui/dist/src/utils/ids.js, packages/ui/dist/src/utils/normalize.js, packages/ui/dist/src/components/ActionBar/index.js, packages/ui/dist/src/components/Alert/index.js, packages/ui/dist/src/components/Avatar/index.js, packages/ui/dist/src/components/Badge/index.js, packages/ui/dist/src/components/Banner/index.js, packages/ui/dist/src/components/BarChart/Tooltip.js, packages/ui/dist/src/components/BarChart/index.js, packages/ui/dist/src/components/BarStack/index.js, packages/ui/dist/src/components/Breadcrumbs/index.js, packages/ui/dist/src/components/Bullet/index.js, packages/ui/dist/src/components/Button/index.js, packages/ui/dist/src/components/Card/index.js, packages/ui/dist/src/components/Carousel/index.js, packages/ui/dist/src/components/Checkbox/index.js, packages/ui/dist/src/components/CheckboxGroup/index.js, packages/ui/dist/src/components/CopyButton/index.js, packages/ui/dist/src/components/DateInput/index.js, packages/ui/dist/src/components/EmptyState/index.js, packages/ui/dist/src/components/Expandable/index.js, packages/ui/dist/src/components/LineChart/CustomLegend.js, packages/ui/dist/src/components/LineChart/Tooltip.js, packages/ui/dist/src/components/LineChart/helpers.js, packages/ui/dist/src/components/LineChart/index.js, packages/ui/dist/src/components/Link/index.js, packages/ui/dist/src/components/List/Body.js, packages/ui/dist/src/components/List/Cell.js, packages/ui/dist/src/components/List/HeaderCell.js, packages/ui/dist/src/components/List/HeaderRow.js, packages/ui/dist/src/components/List/ListContext.js, packages/ui/dist/src/components/List/Row.js, packages/ui/dist/src/components/List/SelectBar.js, packages/ui/dist/src/components/List/SkeletonRows.js, packages/ui/dist/src/components/List/constants.js, packages/ui/dist/src/components/List/index.js, packages/ui/dist/src/components/Loader/index.js, packages/ui/dist/src/components/Menu/Item.js, packages/ui/dist/src/components/Menu/index.js, packages/ui/dist/src/components/Meter/Meter.js, packages/ui/dist/src/components/Modal/Dialog.js, packages/ui/dist/src/components/Modal/Disclosure.js, packages/ui/dist/src/components/Modal/Modal.js, packages/ui/dist/src/components/Modal/constants.js, packages/ui/dist/src/components/Notice/index.js, packages/ui/dist/src/components/NumberInput/helpers.js, packages/ui/dist/src/components/NumberInput/index.js, packages/ui/dist/src/components/Pagination/getPageNumbers.js, packages/ui/dist/src/components/Pagination/index.js, packages/ui/dist/src/components/PasswordCheck/index.js, packages/ui/dist/src/components/PasswordStrengthMeter/index.js, packages/ui/dist/src/components/PieChart/Legends.js, packages/ui/dist/src/components/PieChart/Tooltip.js, packages/ui/dist/src/components/PieChart/index.js, packages/ui/dist/src/components/Popover/index.js, packages/ui/dist/src/components/ProgressBar/index.js, packages/ui/dist/src/components/Radio/index.js, packages/ui/dist/src/components/RadioGroup/index.js, packages/ui/dist/src/components/Row/index.js, packages/ui/dist/src/components/SelectInput/index.js, packages/ui/dist/src/components/SelectableCard/index.js, packages/ui/dist/src/components/Separator/index.js, packages/ui/dist/src/components/Skeleton/Block.js, packages/ui/dist/src/components/Skeleton/Blocks.js, packages/ui/dist/src/components/Skeleton/BoxWithIcon.js, packages/ui/dist/src/components/Skeleton/Donut.js, packages/ui/dist/src/components/Skeleton/IconSkeleton.js, packages/ui/dist/src/components/Skeleton/Line.js, packages/ui/dist/src/components/Skeleton/List.js, packages/ui/dist/src/components/Skeleton/Slider.js, packages/ui/dist/src/components/Skeleton/index.js, packages/ui/dist/src/components/Snippet/index.js, packages/ui/dist/src/components/Stack/index.js, packages/ui/dist/src/components/Status/index.js, packages/ui/dist/src/components/StepList/index.js, packages/ui/dist/src/components/Stepper/index.js, packages/ui/dist/src/components/SwitchButton/FocusOverlay.js, packages/ui/dist/src/components/SwitchButton/index.js, packages/ui/dist/src/components/Table/Body.js, packages/ui/dist/src/components/Table/Cell.js, packages/ui/dist/src/components/Table/Header.js, packages/ui/dist/src/components/Table/HeaderCell.js, packages/ui/dist/src/components/Table/HeaderRow.js, packages/ui/dist/src/components/Table/Row.js, packages/ui/dist/src/components/Table/SelectBar.js, packages/ui/dist/src/components/Table/SkeletonRows.js, packages/ui/dist/src/components/Table/TableContext.js, packages/ui/dist/src/components/Table/index.js, packages/ui/dist/src/components/Tabs/Tab.js, packages/ui/dist/src/components/Tabs/TabMenu.js, packages/ui/dist/src/components/Tabs/TabMenuItem.js, packages/ui/dist/src/components/Tabs/TabsContext.js, packages/ui/dist/src/components/Tabs/index.js, packages/ui/dist/src/components/Tag/index.js, packages/ui/dist/src/components/TagInput/index.js, packages/ui/dist/src/components/TagList/index.js, packages/ui/dist/src/components/Text/index.js, packages/ui/dist/src/components/TextInput/index.js, packages/ui/dist/src/components/TimeInput/index.js, packages/ui/dist/src/components/Toaster/index.js, packages/ui/dist/src/components/Toggle/index.js, packages/ui/dist/src/components/ToggleGroup/index.js, packages/ui/dist/src/components/Tooltip/index.js, packages/ui/dist/src/components/VerificationCode/index.js, packages/ui/dist/src/internalComponents/Popup/helpers.js, packages/ui/dist/src/internalComponents/Popup/index.js, packages/ui/dist/src/utils/responsive/Breakpoint.js, packages/ui/dist/src/utils/responsive/utilities.js, packages/ui/dist/src/components/Banner/assets/default-image-small.svg.js, packages/ui/dist/src/components/Banner/assets/default-image.svg.js, packages/ui/dist/src/components/Banner/assets/intro-compact-left-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/intro-compact-right-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/intro-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-compact-left-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-compact-right-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-pattern.svg.js 191.6 KB (+0.21% 🔺)

@codecov
Copy link

codecov bot commented Sep 7, 2023

Codecov Report

Merging #2889 (6067c87) into main (f51ec03) will decrease coverage by 0.69%.
The diff coverage is 41.66%.

❗ Current head 6067c87 differs from pull request most recent head e19dd06. Consider uploading reports for the commit e19dd06 to get more accurate results

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2889      +/-   ##
==========================================
- Coverage   94.16%   93.47%   -0.69%     
==========================================
  Files         154      154              
  Lines        3170     3204      +34     
  Branches      409      416       +7     
==========================================
+ Hits         2985     2995      +10     
- Misses        117      141      +24     
  Partials       68       68              
Files Changed Coverage Δ
packages/ui/src/components/Modal/Dialog.tsx 69.01% <36.36%> (-30.99%) ⬇️
packages/ui/src/components/Modal/Disclosure.tsx 100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f51ec03...e19dd06. Read the comment docs.

@matthprost matthprost merged commit d6bb06a into main Sep 7, 2023
9 checks passed
@matthprost matthprost deleted the feat/modal-events branch September 7, 2023 12:17
@github-actions github-actions bot mentioned this pull request Sep 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants