feat: scoped css baseline

feat: scoped css baseline

app/src/components/components/VerticalNavigation/VerticalNavigation.tsx

@@ -113,8 +113,8 @@ export const VerticalNavigation = () => {
       <HvVerticalNavigation open={show} collapsedMode={"icon"}>
         <HvVerticalNavigationHeader
           title="Menu"
-          onExpandButtonClick={handleIsExpanded}
-          buttonProps={{
+          onCollapseButtonClick={handleIsExpanded}
+          collapseButtonProps={{
             "aria-label": "collapseButton",
             "aria-expanded": show,
           }}

app/src/generator/Content.tsx

@@ -21,7 +21,9 @@ const Content = () => {
     >
       <Router>
         <HvProvider
+          classNameKey="gen-root"
           rootElementId="gen-root"
+          cssTheme="scoped"
           themes={[customTheme]}
           colorMode={selectedMode}
         >

docs/guides/provider/Provider.stories.mdx

@@ -26,7 +26,8 @@ const MyApp = ({ children }) => {
 The `HvProvider` enables you to define your themes through the `themes` property which accepts a list of themes. Then, the `theme` and `colorMode` properties
 are used to specify the active theme and color mode. For more information, please read the [theming](/docs/guides-theming-theming--main#theming) documentation.
 
-If several `HvProvider`'s are used, you'll need to create different root elements and set the `rootElementId` property for each one of the providers.
+If several `HvProvider`'s are used, you'll need to create different root elements, set the `rootElementId` property for each one of the providers, and scope the
+theme styles to the root element with the `cssTheme` property.
 Otherwise, the styling will not work properly. Please, find an example below.
 
 <Canvas>
@@ -45,6 +46,7 @@ Otherwise, the styling will not work properly. Please, find an example below.
         <HvProvider
           classNameKey="hv-root-ds-five-dawn-docs-provider"
           rootElementId="hv-root-ds5-dawn-docs-provider"
+          cssTheme="scoped"
           colorMode="dawn"
         >
           <ProviderSample label="DS5 Dawn" />
@@ -54,6 +56,7 @@ Otherwise, the styling will not work properly. Please, find an example below.
         <HvProvider
           classNameKey="hv-root-ds-five-wicked-docs-provider"
           rootElementId="hv-root-ds5-wicked-docs-provider"
+          cssTheme="scoped"
           colorMode="wicked"
         >
           <ProviderSample label="DS5 Wicked" />
@@ -63,6 +66,7 @@ Otherwise, the styling will not work properly. Please, find an example below.
         <HvProvider
           classNameKey="hv-root-ds-three-dawn-docs-provider"
           rootElementId="hv-root-ds3-dawn-docs-provider"
+          cssTheme="scoped"
           themes={[ds3]}
           colorMode="dawn"
         >
@@ -73,6 +77,7 @@ Otherwise, the styling will not work properly. Please, find an example below.
         <HvProvider
           classNameKey="hv-root-ds-three-wicked-docs-provider"
           rootElementId="hv-root-ds3-wicked-docs-provider"
+          cssTheme="scoped"
           themes={[ds3]}
           colorMode="wicked"
         >

docs/guides/styling/Customization.tsx

@@ -130,7 +130,12 @@ export const ThemeOverride = () => {
   const id = "hv-root-theme-override";
   return (
     <div id={id}>
-      <HvProvider classNameKey={id} rootElementId={id} themes={[themeOverride]}>
+      <HvProvider
+        classNameKey={id}
+        rootElementId={id}
+        cssTheme="scoped"
+        themes={[themeOverride]}
+      >
         <HvCard id={id} selectable>
           <HvCardHeader title="NEXT UI Kit" subheader="React UI library" />
           <HvCardContent>
@@ -162,7 +167,12 @@ export const GlobalOverride = () => {
   const id = "hv-root-global-override";
   return (
     <div id={id}>
-      <HvProvider classNameKey={id} rootElementId={id} themes={[globalTheme]}>
+      <HvProvider
+        classNameKey={id}
+        rootElementId={id}
+        cssTheme="scoped"
+        themes={[globalTheme]}
+      >
         <div
           style={{
             padding: "15px",

docs/guides/theming/CreateTheme.tsx

@@ -33,7 +33,12 @@ export const CreateTheme = () => {
   const id = "hv-root-create-theme-my-theme-sand-color-mode";
   return (
     <div id={id}>
-      <HvProvider classNameKey={id} rootElementId={id} themes={[newTheme]}>
+      <HvProvider
+        classNameKey={id}
+        rootElementId={id}
+        cssTheme="scoped"
+        themes={[newTheme]}
+      >
         <HvTypography>Hello from the UI Kit team!</HvTypography>
       </HvProvider>
     </div>

docs/guides/theming/ThemeContext.tsx

@@ -39,7 +39,12 @@ export const ThemeContext = () => {
   const id = "hv-root-theme-context-use-theme-hook";
   return (
     <div id={id}>
-      <HvProvider classNameKey={id} rootElementId={id} themes={[newTheme]}>
+      <HvProvider
+        classNameKey={id}
+        rootElementId={id}
+        cssTheme="scoped"
+        themes={[newTheme]}
+      >
         <Content />
       </HvProvider>
     </div>

docs/guides/theming/Theming.stories.mdx

@@ -34,6 +34,7 @@ Each one of these versions has a specific theme with two different color modes:
       <HvProvider
         classNameKey="hv-root-ds-five-dawn-docs-default-themes"
         rootElementId="hv-root-ds5-dawn-docs-default-themes"
+        cssTheme="scoped"
         colorMode="dawn"
       >
         <ThemeSample title="Design System 5 - Dawn" />
@@ -43,6 +44,7 @@ Each one of these versions has a specific theme with two different color modes:
       <HvProvider
         classNameKey="hv-root-ds-five-wicked-docs-default-themes"
         rootElementId="hv-root-ds5-wicked-docs-default-themes"
+        cssTheme="scoped"
         colorMode="wicked"
       >
         <ThemeSample title="Design System 5 - Wicked" />
@@ -52,6 +54,7 @@ Each one of these versions has a specific theme with two different color modes:
       <HvProvider
         classNameKey="hv-root-ds-three-dawn-docs-default-themes"
         rootElementId="hv-root-ds3-dawn-docs-default-themes"
+        cssTheme="scoped"
         themes={[ds3]}
         colorMode="dawn"
       >
@@ -62,6 +65,7 @@ Each one of these versions has a specific theme with two different color modes:
       <HvProvider
         classNameKey="hv-root-ds-three-wicked-docs-default-themes"
         rootElementId="hv-root-ds3-wicked-docs-default-themes"
+        cssTheme="scoped"
         themes={[ds3]}
         colorMode="wicked"
       >
@@ -253,7 +257,7 @@ The `uikit-react-core` package provides a React context named `HvThemeContext`.
 - `selectedMode`: name of the active color mode;
 - `colorModes`: list of color modes available for the active theme;
 - `themes`: list of the available themes;
-- `rootId`: id of your root element;
+- `rootId`: id of the root element where the theme styles are being applied if scoped;
 - `activeTheme`: object with the active theme;
 - `changeTheme`: method to change the active theme and color mode.
 

docs/guides/theming/WhiteLabeling.tsx

@@ -105,6 +105,7 @@ export const WhiteLabeling = () => {
       <HvProvider
         classNameKey={id}
         rootElementId={id}
+        cssTheme="scoped"
         themes={[turquoiseTheme]}
       >
         <HvHeader position="relative">

docs/overview/GetStarted.stories.mdx

@@ -11,7 +11,7 @@ NEXT UI Kit uses [Emotion](https://emotion.sh/) as its default styling engine an
 To use NEXT UI Kit in your project, run the following command:
 
 ```
-npm install @hitachivantara/uikit-react-core @emotion/react @emotion/styled @emotion/css @mui/material
+npm install @hitachivantara/uikit-react-core @emotion/react @emotion/styled @mui/material
 ```
 
 ### Peer dependencies

docs/overview/introduction/Introduction.stories.mdx

@@ -65,4 +65,4 @@ Even though we're focused on developing a component library that is compliant wi
 
 ## License
 
-This project is licensed under the terms of the [Apache 2.0 license](/LICENSE.md).
+This project is licensed under the terms of the [Apache 2.0 license](/LICENSE.md).

docs/overview/migration/MigrationV5.stories.mdx

@@ -45,21 +45,25 @@ them to avoid errors while using this new UI Kit version.
 ## UI Kit packages <a id="ui-kit-packages" />
 
 Before proceeding to this upgrade, you should also note that **you can't use UI Kit packages v4.x and v5.x simultaneously** due to the introduction of a new theming
-system not compatible with v4.x components. Thus, if your application relies on the following packages, you'll not be able to migrate your application at the moment:
+system not compatible with v4.x components. Thus, if your application relies on the packages or components below, you'll not be able to migrate your
+application at the moment since their development are still in progress. Over time, we will align these packages with v5 and add the missing components.
 
 - `@hitachivantara/uikit-react-viz`
-- `@hitachivantara/uikit-react-compat`
 - `@hitachivantara/uikit-react-code-editor`
 - `@hitachivantara/uikit-react-lab`
-- `@hitachivantara/uikit-common-themes`: this package will not evolve beyond v4.x since it was replaced by `@hitachivantara/uikit-styles` in v5.x.
+- The following components from `@hitachivantara/uikit-react-core` are missing:
+  - `HvDatePicker`
+  - `HvSlider`
+  - `HvTimePicker`
+  - `HvScrollToHorizontal`
+  - `HvScrollToVertical`
+  - `HvFilterGroup`
+  - User preferences components: `HvUserPreferences`, `HvUserPreferencesActions`, `HvUserPreferencesAction`, `HvUserPreferencesOptions`,
+    `HvUserPreferencesOption`, `HvUserPreferencesOptionsGroup`, and `HvUserPreferencesOptionsGroupLabel`
 
-The `@hitachivantara/uikit-react-icons` package is already available on v5.x.
+The `@hitachivantara/uikit-react-compat` and `@hitachivantara/uikit-common-themes` packages are **deprecated** in v5.
 
-Regarding `@hitachivantara/uikit-react-core`, v5.x is also available but is missing the following components: `HvDatePicker`, `HvSlider`, `HvTimePicker`,
-`HvScrollToHorizontal`, `HvScrollToVertical`, `HvFilterGroup`, and the user preferences components `HvUserPreferences`, `HvUserPreferencesActions`,
-`HvUserPreferencesAction`, `HvUserPreferencesOptions`, `HvUserPreferencesOption`, `HvUserPreferencesOptionsGroup`, and `HvUserPreferencesOptionsGroupLabel`.
-
-Over time, we will align these packages with v5 and add the missing components.
+Learn more about the project status on this [page](/story/overview-project-status--page#packages).
 
 If you are able to upgrade your application despite the limitations discussed above, upgrade the UI Kit packages to the latest v5.x versions
 using the command below.
@@ -68,19 +72,10 @@ using the command below.
 npm install @hitachivantara/uikit-react-core@latest
 ```
 
-Use the same command for all UI Kit packages you need to upgrade.
-
 ## Emotion packages <a id="emotion-packages" />
 
-In UI Kit v5.x, `@emotion/css` is a new peer dependency of `uikit-react-core`. Thus, you'll need to install it with the following command
-to run your application:
-
-```
-npm install @emotion/css
-```
-
-The `@emotion/react` and `@emotion/styled` packages are also peer dependencies of `uikit-react-core` and the styled package from Emotion is also a peer dependency of
-`uikit-react-icons`. However, it is expected that you already have them installed in your project since UI Kit v4.x already required them.
+In UI Kit v5.x, the `@emotion/react` and `@emotion/styled` packages are still peer dependencies. However, it is expected that you already have them installed
+in your project since UI Kit v4.x already required them.
 
 ## MUI packages <a id="mui-packages" />
 
@@ -162,7 +157,8 @@ We expected to add these media queries to our own theme in future versions.
 #### Colors
 
 Changes were introduced to the colors in Design System v5.x. To have a better understanding of the changes between DS3 and DS5 report to the
-[colors page](/docs/foundation-colors--main) where you can switch between the design systems.
+[colors page](/docs/foundation-colors--main) where you can switch between the design systems and to this [table](#colors) where the breaking changes are
+highlighted.
 
 Regarding the shadows, you have to explicitly use the value `none` where you were previously using `theme.hv.shadows[0]`. Only the value for `theme.hv.shadows[1]` was
 added to theme and you can access it through `theme.colors.shadow` as shown in the table above.
@@ -504,8 +500,6 @@ Briefly, the following properties where removed and/or updated:
 - `disableStylesGeneration`: removed;
 - `uiKitTheme`: renamed to `colorMode`;
 - `theme`: the `themes` property is now used to define your themes and the `theme` only accepts the name of the active theme;
-- `cssBaseline`: renamed to `enableCssBaseline` to choose if the CSS should be applied globally or not applied at all. The concept of scoped CSS baseline
-  was lost but we are working toward incorporating it again;
 - `changeTheme`: removed from the provider and added to the `useTheme` hook from the `react-core-package`.
 
 ### Button <a id="button" />