New Admin UI - Dialog Component #4468
Open
+782
−5,240
Conversation
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
…into feat/dialog # Conflicts: # yarn.lock
…o feat/dialog # Conflicts: # packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx
…into feat/dialog # Conflicts: # packages/admin-ui/src/index.ts # packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemMeta.tsx
…into feat/dialog # Conflicts: # packages/admin-ui/src/index.ts # yarn.lock
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
This PR creates the Dialog component. Here are a couple of screenshots.
Extra Changes
1. Alerts - Default Variant Change
I changed the default variant from 'subtle' to 'strong'.
Felt it was just a bit too much seeing those flashy colors. Let's see along the way how that will look like and revert if needed.
2. Larger Buttons
I removed
small={true}from these. Looks nice IMO.3. Minor Cleanups on Dialog Components
Removed usage of
emotionand itscssutil in a couple of places:https://github.com/webiny/webiny-js/pull/4468/files#diff-81d1c874d39cd9f3f7695ec45c0dc7207d0e8eb80c1d8db4f4e56888623b15c5
https://github.com/webiny/webiny-js/pull/4468/files#diff-6b146a1a388811e719571c4ea24d939474e57ad1efc1535b4133df0a17311c1c
https://github.com/webiny/webiny-js/pull/4468/files#diff-564e985ae1ec27ccae95bb9fa00f2d24823065e198418d0d8799a82c0bb5ad0a
4.
packages/ui/src/Grid/Grid.tsxUpdated deprecation comments.
5. Updated Text Sizes
Spoke to Kreso about a couple of missing tokens. Now, text sizes are fully tokenized (previously there were a couple of hardcoded pixels in there).
6. Added
inline-blockCSS Class To Dropdown Menu Trigger WrapperdivThis is required because otherwise, we end up with the following issue:
It's not an ideal solution, but this will all not be needed when we finally resolve that issue where ref forwarding doesn't work on
makeDecoratablecomponents.7. Updated
@radix-ui/react-dialog/@radix-ui/react-dropdownPackagesUpdating these packages fixed important dropdown menu rendering-related issues that would occur when showing the menu in a dialog and drawer components.
Notes
1. Tabs in Dialog
We had a discussion on tabs being rendered in an opened dialog. There were a couple of options here, but, ultimately, I've done it in a way where you pass
bodyPadding: falseprop to theDialogcomponent. That way, the body has no padding, and tabs can be used within the dialog as imagined in Figma designs (they taking the full width of the dialog).We still do need to revisit tokens on Tabs, but overall, I think it'll do.