RTL FIXES (#32828)

microsoft · Sep 22, 2024 · e389a7c · e389a7c
1 parent bafba6f
commit e389a7c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/...react-charts-preview/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx b/...react-charts-preview/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx
@@ -11,7 +11,6 @@ import {
   InputProps,
   InputOnChangeData,
 } from '@fluentui/react-components';
-import { StackShim } from '@fluentui/react-migration-v8-v9';
 
 export const VCAxisTooltip = () => {
   const [selectedCallout, setSelectedCallout] = React.useState<string>('showTooltip');
@@ -113,7 +112,7 @@ export const VCAxisTooltip = () => {
         </div>
         <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <label htmlFor="input-maxbarwidth" style={{ fontWeight: 400 }}>
-            maxBarWidth:
+            maxBarWidth:&nbsp;
           </label>
           <Input
             type="number"
@@ -125,7 +124,7 @@ export const VCAxisTooltip = () => {
           />
         </div>
       </div>
-      <div style={{ display: 'flex', gap: '20px' }}>
+      <div style={{ display: 'flex', gap: '20px', marginTop: '20px' }}>
         <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <Checkbox
             label="xAxisInnerPadding:&nbsp;"
@@ -161,7 +160,7 @@ export const VCAxisTooltip = () => {
           <span>&nbsp;{xAxisOuterPadding}</span>
         </div>
       </div>
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', marginTop: '20px' }}>
         <Field label="Pick one">
           <RadioGroup defaultValue="showTooltip" onChange={(_ev, option) => option && setSelectedCallout(option.value)}>
             <Radio value="WrapTickValues" label="Wrap X Axis Ticks" />

diff --git a/...nts/react-charts-preview/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx b/...nts/react-charts-preview/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx
@@ -172,14 +172,14 @@ export const VCDynamic = () => {
 
   return (
     <>
-      <StackShim horizontal wrap tokens={{ childrenGap: '15 30' }}>
-        <StackShim horizontal verticalAlign="center">
+      <div style={{ display: 'flex', gap: '15px 30px' }}>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <label htmlFor="input-width" style={{ fontWeight: 400 }}>
             width:&nbsp;
           </label>
           <input type="range" value={width} min={200} max={1000} onChange={_onWidthChange} id="input-width" />
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <Checkbox
             label="barWidth:&nbsp;"
             checked={typeof barWidth === 'number'}
@@ -191,8 +191,8 @@ export const VCDynamic = () => {
           ) : (
             <code>{`${barWidth}`}</code>
           )}
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <label htmlFor="input-maxbarwidth" style={{ fontWeight: 400 }}>
             maxBarWidth:&nbsp;
           </label>
@@ -204,8 +204,10 @@ export const VCDynamic = () => {
             id="input-maxbarwidth"
             onChange={_onMaxBarWidthChange}
           />
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: '20px', marginTop: '20px' }}>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <Checkbox
             label="xAxisInnerPadding:&nbsp;"
             checked={xAxisInnerPaddingEnabled}
@@ -222,8 +224,8 @@ export const VCDynamic = () => {
             disabled={!xAxisInnerPaddingEnabled}
           />
           <span>&nbsp;{xAxisInnerPadding}</span>
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <Checkbox
             label="xAxisOuterPadding:&nbsp;"
             checked={xAxisOuterPaddingEnabled}
@@ -240,17 +242,19 @@ export const VCDynamic = () => {
             disabled={!xAxisOuterPaddingEnabled}
           />
           <span>&nbsp;{xAxisOuterPadding}</span>
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <Checkbox label="enableReflow" checked={enableReflow} onChange={_onEnableReflowCheckChange} />
-        </StackShim>
-        <StackShim horizontal verticalAlign="center">
+        </div>
+      </div>
+      <div style={{ display: 'flex', marginTop: '20px' }}>
+        <div style={{ justifyContent: 'center', verticalAlign: 'center' }}>
           <label htmlFor="input-datasize" style={{ fontWeight: 400 }}>
             Data Size:&nbsp;
           </label>
           <input type="range" value={dataSize} min={0} max={50} onChange={_onDataSizeChange} id="input-datasize" />
-        </StackShim>
-      </StackShim>
+        </div>
+      </div>
       <div style={{ marginTop: '20px' }}>
         <Field label="X-Axis type:">
           <RadioGroup onChange={_onAxisTypeChange}>