-
Notifications
You must be signed in to change notification settings - Fork 535
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Dialog: Full screen & Bottom sheet support (#4048)
* Kickoff * Start adding action-sheet * WIP * Fix dragging * Improvements * Add hover state * Remove unused backdropRef * Remove listeners * Fix warnings * Reduce code * Fix reduce motion * Add open animation * Improvements * Improve the docs * Make the storybook easier to manage * Fix * Make it easier to get the code for custom renderes * Revert * Remove unused imports * Use ' instead * Remove unused props * Improve accessibility further * Fix typescript warnings * Remove more warnings * Remove more warnings * Fix * Update docs * Fix * Use a slider instead of resizing * Improve code * Fix * Fix dragging * Create rare-geese-melt.md * Update rare-geese-melt.md * Fixes for FireFox * Fix: Type number trivially inferred from a number literal, remove type annotation * Switch refs to const * Fix linter warnings * Add missing props back * Increase the hit target on mobile * Add preventDefault() for Firefox * Add support for setting overflow area height * Rename ActionSheet to BottomSheet and add max-width * Remove minHeight * Fix merge conflicts * Fix close button interactions * Remove gestures we won't use * Fix copy * Remove overkill isReduced * Auto focus on close button if no buttons * Remove gestures * Revert * Fix JEST files * Update exports.test.ts.snap * Fix isReduced function * Keep dialog open * Remove Truncate * Fix test * Fix close button in custom UI * Update Dialog.tsx * Fix test * test(vrt): update snapshots * Add more snapshots * test(vrt): update snapshots * Can't get this to work * Update src/Dialog/DialogBottomSheet.tsx Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com> * Remove test * Push it real good * Remove test * Adress PR feedback * Revert PR suggestions * Fix * Fix close button * adds an option to render tests using testing-library render in behavesAsComponent * Add a simple test * Update snapshot * Push * Add test for expanding * Add more tests based on Mike's * Add more tests and update snapshot * Add another test * Linter fixes * Fix border in dark mode * Fix linter * test(vrt): update snapshots --------- Co-authored-by: Mike Perrotti <mperrotti@github.com> Co-authored-by: maximedegreve <maximedegreve@users.noreply.github.com> Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>
- Loading branch information
1 parent
2d9435d
commit b99e5ff
Showing
99 changed files
with
1,811 additions
and
237 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@primer/react": minor | ||
--- | ||
|
||
Dialog: `full-screen` and `action-sheet` variants |
Binary file added
BIN
+85.4 KB
...mponents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+85.4 KB
...s/components/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+84.9 KB
...nents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+83.4 KB
...napshots/components/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+85.4 KB
...mponents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+83.5 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+83.9 KB
...ents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+83.3 KB
...apshots/components/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-light-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+83.5 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Bottom-Sheet-light-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+147 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Full-Screen-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+146 KB
...ts/components/Dialog.test.ts-snapshots/Dialog-Full-Screen-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+146 KB
...onents/Dialog.test.ts-snapshots/Dialog-Full-Screen-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+144 KB
...snapshots/components/Dialog.test.ts-snapshots/Dialog-Full-Screen-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+147 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Full-Screen-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+146 KB
...mponents/Dialog.test.ts-snapshots/Dialog-Full-Screen-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+147 KB
...nents/Dialog.test.ts-snapshots/Dialog-Full-Screen-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+146 KB
...napshots/components/Dialog.test.ts-snapshots/Dialog-Full-Screen-light-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+146 KB
...mponents/Dialog.test.ts-snapshots/Dialog-Full-Screen-light-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.8 KB
...onents/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+33.3 KB
...components/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+28.1 KB
...nts/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.6 KB
...pshots/components/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.8 KB
...onents/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.9 KB
...nents/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.9 KB
...ts/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+27.9 KB
...shots/components/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+27.9 KB
...nents/Dialog.test.ts-snapshots/Dialog-Non-Declaritve-light-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...components/Dialog.test.ts-snapshots/Dialog-Responsive-dark-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+165 KB
...ots/components/Dialog.test.ts-snapshots/Dialog-Responsive-dark-dimmed-linux.png
Oops, something went wrong.
Binary file added
BIN
+158 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Responsive-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+156 KB
.../snapshots/components/Dialog.test.ts-snapshots/Dialog-Responsive-dark-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...components/Dialog.test.ts-snapshots/Dialog-Responsive-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+157 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Responsive-light-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+158 KB
...onents/Dialog.test.ts-snapshots/Dialog-Responsive-light-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+157 KB
...snapshots/components/Dialog.test.ts-snapshots/Dialog-Responsive-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+157 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Responsive-light-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+163 KB
...components/Dialog.test.ts-snapshots/Dialog-Size-Large-dark-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+169 KB
...ots/components/Dialog.test.ts-snapshots/Dialog-Size-Large-dark-dimmed-linux.png
Oops, something went wrong.
Binary file added
BIN
+161 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Size-Large-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+159 KB
.../snapshots/components/Dialog.test.ts-snapshots/Dialog-Size-Large-dark-linux.png
Oops, something went wrong.
Binary file added
BIN
+163 KB
...components/Dialog.test.ts-snapshots/Dialog-Size-Large-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Size-Large-light-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...onents/Dialog.test.ts-snapshots/Dialog-Size-Large-light-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...snapshots/components/Dialog.test.ts-snapshots/Dialog-Size-Large-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+160 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Size-Large-light-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+79.2 KB
...components/Dialog.test.ts-snapshots/Dialog-Size-Small-dark-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+84.8 KB
...ots/components/Dialog.test.ts-snapshots/Dialog-Size-Small-dark-dimmed-linux.png
Oops, something went wrong.
Binary file added
BIN
+78.8 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Size-Small-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+77.8 KB
.../snapshots/components/Dialog.test.ts-snapshots/Dialog-Size-Small-dark-linux.png
Oops, something went wrong.
Binary file added
BIN
+79.2 KB
...components/Dialog.test.ts-snapshots/Dialog-Size-Small-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+78.1 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Size-Small-light-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+78.2 KB
...onents/Dialog.test.ts-snapshots/Dialog-Size-Small-light-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+78 KB
...snapshots/components/Dialog.test.ts-snapshots/Dialog-Size-Small-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+78.1 KB
...omponents/Dialog.test.ts-snapshots/Dialog-Size-Small-light-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+179 KB
...nts/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-dark-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+184 KB
...ponents/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-dark-dimmed-linux.png
Oops, something went wrong.
Binary file added
BIN
+177 KB
.../Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+174 KB
...ots/components/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-dark-linux.png
Oops, something went wrong.
Binary file added
BIN
+179 KB
...nts/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file added
BIN
+175 KB
...ts/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-light-colorblind-linux.png
Oops, something went wrong.
Binary file added
BIN
+175 KB
...Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-light-high-contrast-linux.png
Oops, something went wrong.
Binary file added
BIN
+175 KB
...ts/components/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+175 KB
...ts/Dialog.test.ts-snapshots/Dialog-Size-X-Large-Test-light-tritanopia-linux.png
Oops, something went wrong.
Binary file modified
BIN
+85 Bytes
(100%)
...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
Oops, something went wrong.
Binary file modified
BIN
-161 Bytes
(100%)
...ts/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
Oops, something went wrong.
Binary file modified
BIN
+240 Bytes
(100%)
...onents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file modified
BIN
+20 Bytes
(100%)
...snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
Oops, something went wrong.
Binary file modified
BIN
+80 Bytes
(100%)
...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file modified
BIN
-132 Bytes
(100%)
...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
Oops, something went wrong.
Binary file modified
BIN
-108 Bytes
(100%)
...nents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
Oops, something went wrong.
Binary file modified
BIN
-156 Bytes
(100%)
...napshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
Oops, something went wrong.
Binary file modified
BIN
-133 Bytes
(100%)
...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
Oops, something went wrong.
Binary file modified
BIN
+301 Bytes
(100%)
...Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png
Oops, something went wrong.
Binary file modified
BIN
+270 Bytes
(100%)
...nts/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png
Oops, something went wrong.
Binary file modified
BIN
+275 Bytes
(100%)
...log.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png
Oops, something went wrong.
Binary file modified
BIN
+231 Bytes
(100%)
...components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png
Oops, something went wrong.
Binary file modified
BIN
+288 Bytes
(100%)
...Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png
Oops, something went wrong.
Binary file modified
BIN
+228 Bytes
(100%)
...ialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png
Oops, something went wrong.
Binary file modified
BIN
+197 Bytes
(100%)
...og.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png
Oops, something went wrong.
Binary file modified
BIN
+223 Bytes
(100%)
...omponents/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png
Oops, something went wrong.
Binary file modified
BIN
+319 Bytes
(100%)
...ialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.