feat: add mode updater to SaltTheme

jpmorganchase · Apr 10, 2024 · dc4f795 · dc4f795
1 parent ed32f6e
commit dc4f795
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx
@@ -6,6 +6,7 @@ import React, {
   ReactNode,
   useContext,
   useMemo,
+  useState,
 } from "react";
 import { AriaAnnouncerProvider } from "../aria-announcer";
 import { Breakpoints, DEFAULT_BREAKPOINTS } from "../breakpoints";
@@ -37,6 +38,10 @@ export interface ThemeContextProps {
   UNSTABLE_corner: UNSTABLE_Corner;
 }
 
+export interface ThemeContextValue extends ThemeContextProps {
+  setMode: (mode: Mode) => void;
+}
+
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
 
 export const ThemeContext = createContext<ThemeContextProps>({
@@ -185,9 +190,9 @@ function InternalSaltProvider({
   const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
   const themeName =
     themeProp ?? (inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme);
-  const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
+  const [mode, setMode] = useState<Mode>(modeProp ?? inheritedMode);
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -199,13 +204,14 @@ function InternalSaltProvider({
     window: targetWindow,
   });
 
-  const themeContextValue = useMemo(
+  const themeContextValue = useMemo<ThemeContextValue>(
     () => ({
       theme: themeName,
       mode,
       window: targetWindow,
       themeNext: Boolean(themeNext),
       UNSTABLE_corner: corner,
+      setMode,
     }),
     [themeName, mode, targetWindow, themeNext, corner]
   );
@@ -311,11 +317,11 @@ export function UNSTABLE_SaltProviderNext({
   );
 }
 
-export const useTheme = (): ThemeContextProps => {
+export const useTheme = (): ThemeContextValue => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { window, ...contextWithoutWindow } = useContext(ThemeContext);
 
-  return contextWithoutWindow;
+  return contextWithoutWindow as ThemeContextValue;
 };
 
 /**

diff --git a/packages/core/stories/salt-provider/salt-provider.stories.tsx b/packages/core/stories/salt-provider/salt-provider.stories.tsx
@@ -8,6 +8,7 @@ import {
   SaltProvider,
   ToggleButton,
   ToggleButtonGroup,
+  useTheme,
 } from "@salt-ds/core";
 
 import "docs/story.css";
@@ -31,7 +32,7 @@ export const Default = () => {
 };
 
 export const ToggleTheme = () => {
-  const [mode, setMode] = useState<Mode>("light");
+  const { mode, setMode } = useTheme();
 
   const handleChangeTheme = (event: SyntheticEvent<HTMLButtonElement>) => {
     setMode(event.currentTarget.value as Mode);
@@ -50,6 +51,14 @@ export const ToggleTheme = () => {
               Dark
             </ToggleButton>
           </ToggleButtonGroup>
+          <ToggleButtonGroup onChange={handleChangeTheme} value={mode}>
+            <ToggleButton aria-label="light theme" value="light">
+              Light
+            </ToggleButton>
+            <ToggleButton aria-label="dark theme" value="dark">
+              Dark
+            </ToggleButton>
+          </ToggleButtonGroup>
           <p>{`This Card is wrapped with a SaltProvider, mode is ${mode}`}</p>
 
           <Checkbox label="Example Choice 1" />