[Feature] Refactor theming of Admin components to remove legacy @mui/styles package
#1376
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
Instead of requiring all props when setting the `defaultProps` of a component.
Co-authored-by: Thomas Dax <thomas.dax@vivid-planet.com> Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Extending a Comet Admin component using `styled()` requires the `className` prop to be passed through to the components `root` slot. Also added the `ThemedComponentBaseProps` type to use as a base for components props. This abstracts away the need to manually define the `sx`, `className` and `slotProps` props in every component.
Merge next into feature/refactor-admin-component-theming
Copying the styling and `overridesResolver` from MUIs TooltipPopper is required because when overriding the Tooltips Popper we cannot extend the existing Popper. Overriding the Popper is required to implement our variant-specific styling, as we cannot set the styles from the Root element, as the Popper is not rendered as a child of the Tooltip in the DOM.
Refactoring to a function-component is not possible, as there is no alternative to `componentDidCatch`, according to the [React Docs](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary): > There is currently no way to write an error boundary as a function component.
To use `ownerState` and lowercase slot names.
johnnyomair
changed the title
@mui/styles package@mui/styles package
1 task
Co-authored-by: Johannes Obermair <johannes.obermair@vivid-planet.com>
jamesricky
force-pushed
the
feature/refactor-admin-component-theming
branch
from
63ae79c to
b87c3c2
Compare
…n-component-theming
--------- Co-authored-by: Ricky James Smith <jamesricky@me.com> Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
<img width="171" alt="Screenshot 2024-01-15 at 16 57 45" src="https://github.com/vivid-planet/comet/assets/72875628/a4312857-dc93-4a39-a45f-386b83c6d0d9">
<img width="769" alt="Screenshot 2024-01-11 at 13 53 34" src="https://github.com/vivid-planet/comet/assets/72875628/d879c8ee-f444-471c-8943-bdb6414e86a1"> I couldn't find how to use focusVisible and [`.${inputAdornmentClasses.positionEnd}:last-child &`], please comment --------- Co-authored-by: Ricky James Smith <jamesricky@me.com>
Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
<img width="1661" alt="Screenshot 2024-01-23 at 13 43 12" src="https://github.com/vivid-planet/comet/assets/109900447/422a7389-ddae-429a-87cc-97ebc0ee9a6a"> Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
<details><summary>Video of Rte:</summary> <p> https://github.com/vivid-planet/comet/assets/122883866/6496ca9e-8697-4caf-afae-53d9c7fc4a8c </p> </details> <details><summary>Video of disabled Rte:</summary> <p> https://github.com/vivid-planet/comet/assets/122883866/28563d3f-5ae4-4e5a-82a2-f5b0ace65ea8 </p> </details>
 --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky James Smith <jamesricky@me.com>
Desktop: https://github.com/vivid-planet/comet/assets/109900447/b3063077-0e9e-4e56-94b7-1ef8d7fa3986 Mobile: https://github.com/vivid-planet/comet/assets/109900447/4ca466df-7acd-4b93-a9ba-b0050ac04c2c --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
<img width="336" alt="Screenshot 2024-01-22 at 14 19 12" src="https://github.com/vivid-planet/comet/assets/109900447/d1322d17-723b-469d-9021-23cd23a4e7b3"> --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
<details>
<summary>CopyToClipboardButton</summary>
https://github.com/vivid-planet/comet/assets/71731085/049cccc2-4c97-4d43-a426-9fef891da0c3
</details>
<details>
<summary>Themed CopyToClipboardButton</summary>
</details>
---------
Co-authored-by: Stefanie Kaltenhauser <stefanie.kaltenhauser@vivid-planet.com>
<img width="675" alt="Screenshot 2024-02-20 at 11 03 52" src="https://github.com/vivid-planet/comet/assets/109900447/6ef65283-10de-4736-bbd2-5d24fc365a27"> <img width="681" alt="Screenshot 2024-02-20 at 11 03 59" src="https://github.com/vivid-planet/comet/assets/109900447/a0663357-328d-4850-88df-bb9685c9865d"> --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky James Smith <jamesricky@me.com> Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
<img width="553" alt="Screenshot 2024-02-01 at 14 12 05" src="https://github.com/vivid-planet/comet/assets/109900447/388cb711-d910-431c-a238-958126e73420"> --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky James Smith <jamesricky@me.com>
<details>
<summary>CopyToClipboardButton</summary>
https://github.com/vivid-planet/comet/assets/71731085/431f432b-4ac0-42b4-8b4d-e2e005f8c9a9
</details>
<details>
<summary>Themed CopyToClipboardButton</summary>
https://github.com/vivid-planet/comet/assets/71731085/c1d4b458-8670-4501-bb83-a519f558fffc
</details>
Co-authored-by: Stefanie Kaltenhauser <stefanie.kaltenhauser@vivid-planet.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky Smith <rs@vivid-planet.com>
…n-component-theming
…factor-admin-component-theming Merge `next` into `feature/refactor-admin-component-theming`
…entation of `DefaultTheme` (#1758) ### Refactor theming of remaining admin-components - COM-487: `FieldSet` (Also added a dev-story) - COM-488: `Alert` - COM-489: `DatePickerNavigation` ### Remove module augmentation of `DefaultTheme` type As the `@mui/styles` package is no longer used for the styling-implementation of admin-components the `DefaultTheme` from `@mui/styles/defaultTheme` is no longer needed and would cause a typescript error when augmented.
…factor-admin-component-theming Merge `next` into `feature/refactor-admin-component-theming`
Merge `next` into `feature/refactor-admin-component-theming`
Components where the `Root` slot extends from a MUI component are affected by this issue. Previously `withStyles()` would have added the class-names and `styleOverrides` for every `ClassKey`, even if defined in MUI instead of in Comet.
…mponentSlot()` (#1809) E.g. the `Root` slot of `MainContent` will now alway the className `CometAdminMainContent-root`. If the `fullHeight` prop is set to true, the className `CometAdminMainContent-fullHeight` also will be added. This was previously done automatically, when using `withStyles()` from the legacy `@mui/styles` package, which was removed during the theming refactor: #1376 This now matches the behavior of Comet-Admin components before the theming refactor and MUI components.
johnnyomair
approved these changes
Mar 19, 2024
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.
No description provided.