@opengeoweb/theme 9.8.0 → 9.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -14,7 +14,7 @@ The aim of this library is to make sure all MUI components look as specified in
14
14
  - [Folder structure](#folder-structure)
15
15
  - [Icons `(lib/components/Icons/Icons.tsx)`](#icons---lib-components-icons-iconstsx--)
16
16
  - [types `(lib/components/Theme/types.ts)`](#types---lib-components-theme-typests--)
17
- - [themes `(lib/components/Theme/darkTheme.ts, .../lightTheme.ts, .../gwTheme.ts)`](#themes---lib-components-theme-darkthemets---lightthemets---gwthemets--)
17
+ - [themes `(lib/components/Theme/darkTheme.ts, .../lightTheme.ts)`](#themes---lib-components-theme-darkthemets---lightthemets--)
18
18
  - [ThemeContext `(lib/components/Theme/ThemeContext)`](#themecontext---lib-components-theme-themecontext--)
19
19
  - [utils `(lib/components/Theme/utils.ts)`](#utils---lib-components-theme-utilsts--)
20
20
  - [stories `(lib/stories)`](#stories---lib-stories--)
@@ -195,7 +195,7 @@ const drawBackground = (
195
195
 
196
196
  ### Using themes in stories
197
197
 
198
- When using a component which relies on theme styling, wrap the main component of your story with the `ThemeWrapper` component instead of `ThemeProvider`. `ThemeWrapper` will later get an extra `StyleEngineProvider` parent component (see https://mui.com/guides/migration-v4/#style-library). For components with old GWTheme styline, you can use `ThemeWrapperOldTheme`.
198
+ When using a component which relies on theme styling, wrap the main component of your story with the `ThemeWrapper` component instead of `ThemeProvider`. `ThemeWrapper` will later get an extra `StyleEngineProvider` parent component (see https://mui.com/guides/migration-v4/#style-library).
199
199
 
200
200
  If you need to show multiple stories and don't want to see the default background, use the `disableCssBaseline` property to prevent that.
201
201
 
@@ -221,7 +221,6 @@ export const TableDark = (): React.ReactElement => (
221
221
  // lib/components/Icons/Icons.tsx
222
222
  // lib/components/Theme/darkTheme.ts
223
223
  // lib/components/Theme/lighTheme.ts
224
- // lib/components/Theme/gwTheme.ts
225
224
  // lib/components/Theme/utils.ts
226
225
  // lib/components/Theme/types.ts
227
226
  // lib/components/Theme/ThemeContext.tsx
@@ -239,15 +238,15 @@ All icons are defined here.
239
238
 
240
239
  Defines the color palette of the theme.
241
240
 
242
- #### themes `(lib/components/Theme/darkTheme.ts, .../lightTheme.ts, .../gwTheme.ts)`
241
+ #### themes `(lib/components/Theme/darkTheme.ts, .../lightTheme.ts)`
243
242
 
244
- Exports files containing all the values per theme. Every color added to light or dark will automatically be inserted into gwTheme to maintain backwards compatibility while finishing the theme colors.
243
+ Exports files containing all the values per theme.
245
244
 
246
245
  #### ThemeContext `(lib/components/Theme/ThemeContext)`
247
246
 
248
247
  - exports `ThemeProvider` wrapper for all MUI components including a `CssBaseline` component of MUI.
249
248
  - exports an `useThemeContext` to switch themes.
250
- - exports `ThemeWrapper` wrapper for stories and `ThemeWrapperOldTheme` wrapper for stories with old GWTheme (to be deprecated)
249
+ - exports `ThemeWrapper` wrapper for stories
251
250
 
252
251
  #### utils `(lib/components/Theme/utils.ts)`
253
252
 
@@ -459,22 +458,9 @@ This footer is only used for when the wrapper is resizable. Therefore it would m
459
458
  ## Known issues
460
459
 
461
460
  - **Expect unit tests to fail** when using components with the theme. This is easily fixed by wrapping your test with the `ThemeProvider` from the `theme` lib. Don't import the ThemeProvider wrapper in the failed test, but use the `CoreThemeProvider` or `CoreThemeStoreProvider` found in [`libs/core/src/lib/components/Providers/Providers.tsx`](https://gitlab.com/opengeoweb/opengeoweb/-/blob/master/libs/core/src/lib/components/Providers/Providers.tsx#L36)
462
- - There are some **storybook bugs** with stories with Themes. When switching stories with new and old theme, it could be possible that some colors are rendered wrong. This is probably happening because one of the stories with old theme has `React.Strictmode` activated. This is only happening in storybook, and when refreshing page the colors should be correct. This will fix itself when we have `gwTheme` removed.
463
461
  - **MUI 5** makes it easy to add custom variants to components, so we should wait for that release before investing more heavy in theme stories: https://next.material-ui.com/customization/theme-components/#adding-new-component-variants . Check the progress of the release of [v5 here](https://github.com/mui-org/material-ui/milestone/44)
464
462
  - The `ThemeProvider` imports the **CssBaseline** components which allows us to set a body background and also resets some initial browser styling values. One thing it's resetting is the css **box-sizing** property. If you experience misaligning in (canvas) components, this might be the property you want to check out.
465
463
 
466
- ## Roadmap
467
-
468
- Theming will be never be finished as it is an ongoing progress. The goal is to have the `gwTheme` removed, and only use `lightTheme` and `darkTheme` throughout all libs and apps. The following points need to be done to reach that:
469
-
470
- Other libs where `ThemeProvider` from `theme` should be used and `gwTheme` should be replaced:
471
-
472
- - [ ] airmet/sigmet (**TICKET TO BE CREATED**)
473
- - [ ] spaceweather (**TICKET TO BE CREATED**)
474
- - [ ] taf (**TICKET TO BE CREATED**)
475
- - [ ] form-fields (**TICKET TO BE CREATED**)
476
- - [ ] shared (**TICKET TO BE CREATED**)
477
-
478
464
  ## Unit testing
479
465
 
480
466
  ```