Workday · mannycarrera4 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git a/modules/react/_examples/stories/mdx/Density.mdx b/modules/react/_examples/stories/mdx/Density.mdx
@@ -1,5 +1,6 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import {Density} from './examples/Density';
+import {DensityComponents} from './examples/DensityComponents';
 
 <Meta title="Examples/Forms/Density and Alignment" />
 
@@ -10,3 +11,7 @@ options to users, especially in the context of forms. Below is an example of how
 from elements to achieve the desired density.
 
 <ExampleCodeBlock code={Density} />
+
+To view how density is being applied to components, view below.
+
+<ExampleCodeBlock code={DensityComponents} />
diff --git a/modules/preview-react/segmented-control/stories/examples/RTL.tsx b/modules/preview-react/segmented-control/stories/examples/RTL.tsx
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';

 export const RTL = () => (
  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
    <SegmentedControl initialValue="list-detail">
      <SegmentedControl.List aria-label="View type">
        <SegmentedControl.Item data-id="table" icon={gridIcon}>
diff --git a/modules/react/common/lib/responsive/useResponsiveContainerStyles.ts b/modules/react/common/lib/responsive/useResponsiveContainerStyles.ts
  width: number,
  theme = {}
 ) {
  const canvasTheme = useTheme(theme);
  const breakpoints = canvasTheme.canvas.breakpoints.values;

  const size = getSize(width, breakpoints);
diff --git a/modules/react/common/lib/theming/useTheme.ts b/modules/react/common/lib/theming/useTheme.ts
  const windowTheme = typeof window !== 'undefined' && (window as any)?.workday?.canvas?.theme;

  if (windowTheme) {
    return getFilledTheme({canvas: windowTheme});
  }

  return {canvas: defaultCanvasTheme};
 }

 /**
diff --git a/modules/react/tabs/stories/examples/RightToLeft.tsx b/modules/react/tabs/stories/examples/RightToLeft.tsx

 export const RightToLeft = () => {
  return (
    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
      <Tabs>
        <Tabs.List>
          <Tabs.Item>ראשון</Tabs.Item>
diff --git a/utils/storybook/CanvasProviderDecorator.tsx b/utils/storybook/CanvasProviderDecorator.tsx
  wrapper: (storyFn, context, {parameters = {}}) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [args] = useArgs();
    const theme: PartialEmotionCanvasTheme = {
      canvas: parameters.theme || args.theme || defaultCanvasTheme,
    };
    return <CanvasProvider theme={theme}>{storyFn(context) as React.ReactNode}</CanvasProvider>;
	import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';

	export const RTL = () => (
	<CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
Check failure on line 12 in modules/preview-react/segmented-control/stories/examples/RTL.tsx GitHub Actions / check `Property 'custom' is missing in type '{ canvas: { direction: ContentDirection.RTL; }; }' but required in type 'PartialEmotionCanvasTheme'.`
	<SegmentedControl initialValue="list-detail">
	<SegmentedControl.List aria-label="View type">
	<SegmentedControl.Item data-id="table" icon={gridIcon}>
	width: number,
	theme = {}
	) {
	const canvasTheme = useTheme(theme);
Check failure on line 123 in modules/react/common/lib/responsive/useResponsiveContainerStyles.ts GitHub Actions / check `Argument of type '{}' is not assignable to parameter of type 'PartialEmotionCanvasTheme'.`
	const breakpoints = canvasTheme.canvas.breakpoints.values;

	const size = getSize(width, breakpoints);
	const windowTheme = typeof window !== 'undefined' && (window as any)?.workday?.canvas?.theme;

	if (windowTheme) {
	return getFilledTheme({canvas: windowTheme});
Check failure on line 58 in modules/react/common/lib/theming/useTheme.ts GitHub Actions / check `Argument of type '{ canvas: any; }' is not assignable to parameter of type 'PartialEmotionCanvasTheme'.`
	}

	return {canvas: defaultCanvasTheme};
Check failure on line 61 in modules/react/common/lib/theming/useTheme.ts GitHub Actions / check `Property 'custom' is missing in type '{ canvas: CanvasTheme; }' but required in type 'EmotionCanvasTheme'.`
	}

	/**

	export const RightToLeft = () => {
	return (
	<CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
Check failure on line 9 in modules/react/tabs/stories/examples/RightToLeft.tsx GitHub Actions / check `Property 'custom' is missing in type '{ canvas: { direction: ContentDirection.RTL; }; }' but required in type 'PartialEmotionCanvasTheme'.`
	<Tabs>
	<Tabs.List>
	<Tabs.Item>ראשון</Tabs.Item>
	wrapper: (storyFn, context, {parameters = {}}) => {
	// eslint-disable-next-line react-hooks/rules-of-hooks
	const [args] = useArgs();
	const theme: PartialEmotionCanvasTheme = {
Check failure on line 16 in utils/storybook/CanvasProviderDecorator.tsx GitHub Actions / check `Property 'custom' is missing in type '{ canvas: any; }' but required in type 'PartialEmotionCanvasTheme'.`
	canvas: parameters.theme \|\| args.theme \|\| defaultCanvasTheme,
	};
	return <CanvasProvider theme={theme}>{storyFn(context) as React.ReactNode}</CanvasProvider>;