fix(table): fix table demo

fix navigationJumpTo demo
chanzuckerberg · Feb 29, 2024 · 6e10869 · 6e10869
1 parent 9145f0f
commit 6e10869
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 91 deletions.
diff --git a/packages/components/src/core/NavigationJumpTo/index.stories.tsx b/packages/components/src/core/NavigationJumpTo/index.stories.tsx
@@ -239,7 +239,7 @@ export const JumpToNavDemo = {
       disabledRules: [ARIA_VALID_ATTR_VALUE],
     },
     controls: {
-      exclude: ExcludedControls,
+      exclude: ["items"],
       expanded: true,
     },
   },

diff --git a/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap
@@ -418,106 +418,98 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           role="radiogroup"
         >
           <label
-            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
           >
-            <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
+            <span
+              caption="Caption I"
+              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
+              intent="default"
+              label="Option I"
+            >
+              <input
+                checked=""
+                class="PrivateSwitchBase-input css-1m9pwf3"
+                name="radio-buttons-group"
+                type="radio"
+                value="1"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-file-name="IconRadioChecked"
+                data-testid="IconRadioChecked"
+                fillcontrast="white"
+                focusable="false"
+                viewBox="0 0 16 16"
+              />
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
               <span
-                class="MuiButtonBase-root MuiRadio-root MuiRadio-colorDefault PrivateSwitchBase-root MuiRadio-root MuiRadio-colorDefault MuiRadio-root MuiRadio-colorDefault css-gmwahz-MuiButtonBase-root-MuiRadio-root"
-                intent="default"
-                label="Option-1-radio"
-                stage="unchecked"
+                class="css-1ddu512"
               >
-                <input
-                  class="PrivateSwitchBase-input css-1m9pwf3"
-                  name="radio-buttons-group"
-                  type="radio"
-                  value=""
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                  data-file-name="IconRadioUnchecked"
-                  data-testid="IconRadioUnchecked"
-                  fillcontrast="white"
-                  focusable="false"
-                  viewBox="0 0 16 16"
-                />
                 <span
-                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                />
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
-              >
+                  class="css-1dr5e88"
+                >
+                  Option I
+                </span>
                 <span
-                  class="css-1ddu512"
+                  class="css-1mg4zid"
                 >
-                  <span
-                    class="css-1dr5e88"
-                  >
-                    Option-1-radio
-                  </span>
+                  Caption I
                 </span>
               </span>
-            </label>
-            <span
-              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
-            >
-              Option-1
             </span>
           </label>
           <label
-            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
           >
-            <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
+            <span
+              caption="Caption II"
+              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
+              intent="default"
+              label="Option II"
+            >
+              <input
+                class="PrivateSwitchBase-input css-1m9pwf3"
+                name="radio-buttons-group"
+                type="radio"
+                value="2"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-file-name="IconRadioUnchecked"
+                data-testid="IconRadioUnchecked"
+                fillcontrast="white"
+                focusable="false"
+                viewBox="0 0 16 16"
+              />
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
               <span
-                class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
-                intent="default"
-                label="Option-2-radio"
-                stage="checked"
+                class="css-1ddu512"
               >
-                <input
-                  checked=""
-                  class="PrivateSwitchBase-input css-1m9pwf3"
-                  name="radio-buttons-group"
-                  type="radio"
-                  value=""
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                  data-file-name="IconRadioChecked"
-                  data-testid="IconRadioChecked"
-                  fillcontrast="white"
-                  focusable="false"
-                  viewBox="0 0 16 16"
-                />
                 <span
-                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                />
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
-              >
+                  class="css-1dr5e88"
+                >
+                  Option II
+                </span>
                 <span
-                  class="css-1ddu512"
+                  class="css-1mg4zid"
                 >
-                  <span
-                    class="css-1dr5e88"
-                  >
-                    Option-2-radio
-                  </span>
+                  Caption II
                 </span>
               </span>
-            </label>
-            <span
-              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
-            >
-              Option-2
             </span>
           </label>
         </div>

diff --git a/packages/components/src/core/Table/index.stories.tsx b/packages/components/src/core/Table/index.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import styled from "@emotion/styled";
-import { FormControlLabel, RadioGroup } from "@mui/material";
+import { RadioGroup } from "@mui/material";
 import { Args, Meta } from "@storybook/react";
 import CellBasic from "../CellBasic";
 import CellComponent from "../CellComponent";
@@ -123,17 +123,10 @@ const Table = (props: Args): JSX.Element => {
             <RadioGroup
               aria-labelledby="demo-radio-buttons-group-label"
               name="radio-buttons-group"
+              defaultValue="1"
             >
-              <FormControlLabel
-                control={
-                  <InputRadio label="Option-1-radio" stage="unchecked" />
-                }
-                label="Option-1"
-              />
-              <FormControlLabel
-                control={<InputRadio label="Option-2-radio" stage="checked" />}
-                label="Option-2"
-              />
+              <InputRadio label="Option I" caption="Caption I" value="1" />
+              <InputRadio label="Option II" caption="Caption II" value="2" />
             </RadioGroup>
           </CellComponent>
           <CellBasic