docs: ensure styles order on documentation

lumada-design · Jan 15, 2025 · 78975e8 · 78975e8
1 parent 304e257
commit 78975e8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/apps/docs/src/components/Main.tsx b/apps/docs/src/components/Main.tsx
@@ -1,7 +1,14 @@
+import createCache from "@emotion/cache";
 import { useTheme } from "nextra-theme-docs";
 import { ds5, HvProvider, pentahoPlus } from "@hitachivantara/uikit-react-core";
 import { HvVizProvider } from "@hitachivantara/uikit-react-viz";
 
+const emotionCache = createCache({
+  key: "hv-docs",
+  prepend: true,
+  container: typeof document !== "undefined" ? document.head : undefined,
+});
+
 export const Main = ({ children }: { children: React.ReactNode }) => {
   const { resolvedTheme } = useTheme();
 
@@ -10,6 +17,7 @@ export const Main = ({ children }: { children: React.ReactNode }) => {
       themes={[pentahoPlus, ds5]}
       theme="pentahoPlus"
       colorMode={resolvedTheme === "dark" ? "wicked" : "dawn"}
+      emotionCache={emotionCache}
     >
       <HvVizProvider>{children}</HvVizProvider>
     </HvProvider>

diff --git a/apps/docs/src/components/code/Controls.tsx b/apps/docs/src/components/code/Controls.tsx
@@ -81,7 +81,11 @@ export const Controls = ({ prop, state, control, onChange }: ControlsProps) => {
         maxPointValue={max}
         markStep={1}
         divisionQuantity={max - 1}
-        className="w-full px-2 pt-0"
+        className="w-full pt-0"
+        classes={{
+          sliderContainer: "px-sm",
+          labelContainer: "mx-0",
+        }}
         values={[
           findCurrentIndex(String(state[prop])) ||
             findCurrentIndex(String(control.defaultValue)),

diff --git a/apps/docs/src/pages/components/avatar.mdx b/apps/docs/src/pages/components/avatar.mdx
@@ -170,7 +170,12 @@ An avatar should be interacted with by wrapping it in an interactable element, s
       BM
     </HvAvatar>
   </HvButton>
-  <HvButton icon overrideIconColors={false} aria-label="Business Manager">
+  <HvButton
+    icon
+    overrideIconColors={false}
+    aria-label="Business Manager"
+    classes={{ root: "rounded-none" }}
+  >
     <HvAvatar
       backgroundColor="sema19"
       size="md"
@@ -188,7 +193,12 @@ An avatar should be interacted with by wrapping it in an interactable element, s
       status="positive"
     />
   </HvButton>
-  <HvButton icon overrideIconColors={false} aria-label="Clara Soul profile">
+  <HvButton
+    icon
+    overrideIconColors={false}
+    aria-label="Clara Soul profile"
+    classes={{ root: "rounded-none" }}
+  >
     <HvAvatar
       alt="Clara Soul"
       src="https://i.imgur.com/6sYhSb6.png"

diff --git a/packages/core/src/Avatar/Avatar.stories.tsx b/packages/core/src/Avatar/Avatar.stories.tsx
@@ -244,7 +244,12 @@ export const Actions: StoryObj<HvAvatarProps> = {
             BM
           </HvAvatar>
         </HvButton>
-        <HvButton icon overrideIconColors={false} aria-label="Business Manager">
+        <HvButton
+          icon
+          overrideIconColors={false}
+          aria-label="Business Manager"
+          classes={{ root: "rounded-none" }}
+        >
           <HvAvatar
             backgroundColor="sema19"
             size="md"
@@ -270,6 +275,7 @@ export const Actions: StoryObj<HvAvatarProps> = {
           icon
           overrideIconColors={false}
           aria-label="Clara Soul profile"
+          classes={{ root: "rounded-none" }}
         >
           <HvAvatar
             alt="Clara Soul"