Skip to content

Commit ca913e7

Browse files
mlaursenmlaursen
committed
feat(grid): added new cloneStyles prop so grid styles can be applied to any child
It can be useful to not force every Grid to be a `<div>` and just apply the styles to an existing component.
1 parent 49ac9bb commit ca913e7

7 files changed

Lines changed: 112 additions & 19 deletions

File tree

‎packages/documentation/src/components/Demos/Layout/ConfigurableLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ const ConfigurableLayout: FC = () => {
7171
// documentation site's Layout component
7272
mainProps={{ component: "div" }}
7373
>
74-
<Form>
75-
<Grid clone columns={2} desktopColumns={4}>
74+
<Grid cloneStyles columns={2} desktopColumns={4}>
75+
<Form>
7676
<Select
7777
id="phone-layout-type"
7878
label="Phone Layout"
@@ -128,8 +128,8 @@ const ConfigurableLayout: FC = () => {
128128
}
129129
}}
130130
/>
131-
</Grid>
132-
</Form>
131+
</Form>
132+
</Grid>
133133
</Layout>
134134
);
135135
};

‎packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurationForm.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const ConfigurationForm: FC<Omit<TabConfiguration, "tabs">> = ({
3030
customTransition,
3131
handleTransitionChange,
3232
}) => (
33-
<Form>
34-
<Grid clone columns={1} tabletColumns={2} largeDesktopColumns={3}>
33+
<Grid cloneStyles columns={1} tabletColumns={2} largeDesktopColumns={3}>
34+
<Form>
3535
<Fieldset legend="Tabs Options">
3636
<Checkbox
3737
id="configurable-tabs-theme"
@@ -131,8 +131,8 @@ const ConfigurationForm: FC<Omit<TabConfiguration, "tabs">> = ({
131131
disabled={persistent}
132132
/>
133133
</Fieldset>
134-
</Grid>
135-
</Form>
134+
</Form>
135+
</Grid>
136136
);
137137

138138
export default ConfigurationForm;

‎packages/documentation/src/constants/sandboxes/Layout-ConfigurableLayout.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"isBinary": false
4848
},
4949
"src/Demo.tsx": {
50-
"content": "import React, { FC, useState } from \"react\";\nimport { Form, Select } from \"@react-md/form\";\nimport {\n DEFAULT_DESKTOP_LAYOUT,\n DEFAULT_LANDSCAPE_TABLET_LAYOUT,\n DEFAULT_PHONE_LAYOUT,\n Layout,\n SupportedPhoneLayout,\n SupportedTabletLayout,\n SupportedWideLayout,\n} from \"@react-md/layout\";\nimport { Text } from \"@react-md/typography\";\nimport { Grid } from \"@react-md/utils\";\n\nimport CloseButton from \"./CloseButton\";\n\nconst PHONE_LAYOUTS: SupportedPhoneLayout[] = [\"temporary\"];\nconst TABLET_LAYOUTS: SupportedTabletLayout[] = [\n ...PHONE_LAYOUTS,\n \"toggleable\",\n];\nconst WIDE_LAYOUTS: SupportedWideLayout[] = [\n ...TABLET_LAYOUTS,\n \"clipped\",\n \"floating\",\n \"full-height\",\n];\n\nconst Demo: FC = () => {\n const [phoneLayout, setPhoneLayout] = useState<SupportedPhoneLayout>(\n DEFAULT_PHONE_LAYOUT\n );\n const [tabletLayout, setTabletLayout] = useState<SupportedTabletLayout>(\n DEFAULT_LANDSCAPE_TABLET_LAYOUT\n );\n const [landscapeTabletLayout, setLandscapeTabletLayout] = useState<\n SupportedTabletLayout\n >(DEFAULT_LANDSCAPE_TABLET_LAYOUT);\n const [desktopLayout, setDesktopLayout] = useState<SupportedWideLayout>(\n DEFAULT_DESKTOP_LAYOUT\n );\n const [largeDesktopLayout, setLargeDesktopLayout] = useState<\n SupportedWideLayout\n >(DEFAULT_DESKTOP_LAYOUT);\n\n return (\n <Layout\n id=\"configurable-layout\"\n title=\"Configurable Layout Title\"\n navHeaderTitle=\"Another Title\"\n phoneLayout={phoneLayout}\n tabletLayout={tabletLayout}\n landscapeTabletLayout={landscapeTabletLayout}\n desktopLayout={desktopLayout}\n navProps={{\n children: (\n <>\n <CloseButton />\n <Text style={{ padding: \"1rem\" }}>\n Here is some amazing content that should normally be a navigation\n tree. You can actually still display a navigation tree along with\n any custom content you want by using the{\" \"}\n <code>navProps.children</code>\n </Text>\n </>\n ),\n }}\n // this is only required since I already have a main element due to the\n // documentation site's Layout component\n mainProps={{ component: \"div\" }}\n >\n <Form>\n <Grid clone columns={2} desktopColumns={4}>\n <Select\n id=\"phone-layout-type\"\n label=\"Phone Layout\"\n value={phoneLayout}\n options={PHONE_LAYOUTS}\n onChange={(nextValue) => {\n if (PHONE_LAYOUTS.includes(nextValue as SupportedPhoneLayout)) {\n setPhoneLayout(nextValue as SupportedPhoneLayout);\n }\n }}\n />\n <Select\n id=\"tablet-layout-type\"\n label=\"Tablet Layout\"\n value={tabletLayout}\n options={TABLET_LAYOUTS}\n onChange={(nextValue) => {\n if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {\n setTabletLayout(nextValue as SupportedTabletLayout);\n }\n }}\n />\n <Select\n id=\"landscape-tablet-layout-type\"\n label=\"Landscape Tablet Layout\"\n value={landscapeTabletLayout}\n options={TABLET_LAYOUTS}\n onChange={(nextValue) => {\n if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {\n setLandscapeTabletLayout(nextValue as SupportedTabletLayout);\n }\n }}\n />\n <Select\n id=\"desktop-layout-type\"\n label=\"Desktop Layout\"\n value={desktopLayout}\n options={WIDE_LAYOUTS}\n onChange={(nextValue) => {\n if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {\n setDesktopLayout(nextValue as SupportedWideLayout);\n }\n }}\n />\n <Select\n id=\"large-desktop-layout-type\"\n label=\"Large Desktop Layout\"\n value={largeDesktopLayout}\n options={WIDE_LAYOUTS}\n onChange={(nextValue) => {\n if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {\n setLargeDesktopLayout(nextValue as SupportedWideLayout);\n }\n }}\n />\n </Grid>\n </Form>\n </Layout>\n );\n};\n\nexport default Demo;\n",
50+
"content": "import React, { FC, useState } from \"react\";\nimport { Form, Select } from \"@react-md/form\";\nimport {\n DEFAULT_DESKTOP_LAYOUT,\n DEFAULT_LANDSCAPE_TABLET_LAYOUT,\n DEFAULT_PHONE_LAYOUT,\n Layout,\n SupportedPhoneLayout,\n SupportedTabletLayout,\n SupportedWideLayout,\n} from \"@react-md/layout\";\nimport { Text } from \"@react-md/typography\";\nimport { Grid } from \"@react-md/utils\";\n\nimport CloseButton from \"./CloseButton\";\n\nconst PHONE_LAYOUTS: SupportedPhoneLayout[] = [\"temporary\"];\nconst TABLET_LAYOUTS: SupportedTabletLayout[] = [\n ...PHONE_LAYOUTS,\n \"toggleable\",\n];\nconst WIDE_LAYOUTS: SupportedWideLayout[] = [\n ...TABLET_LAYOUTS,\n \"clipped\",\n \"floating\",\n \"full-height\",\n];\n\nconst Demo: FC = () => {\n const [phoneLayout, setPhoneLayout] = useState<SupportedPhoneLayout>(\n DEFAULT_PHONE_LAYOUT\n );\n const [tabletLayout, setTabletLayout] = useState<SupportedTabletLayout>(\n DEFAULT_LANDSCAPE_TABLET_LAYOUT\n );\n const [landscapeTabletLayout, setLandscapeTabletLayout] = useState<\n SupportedTabletLayout\n >(DEFAULT_LANDSCAPE_TABLET_LAYOUT);\n const [desktopLayout, setDesktopLayout] = useState<SupportedWideLayout>(\n DEFAULT_DESKTOP_LAYOUT\n );\n const [largeDesktopLayout, setLargeDesktopLayout] = useState<\n SupportedWideLayout\n >(DEFAULT_DESKTOP_LAYOUT);\n\n return (\n <Layout\n id=\"configurable-layout\"\n title=\"Configurable Layout Title\"\n navHeaderTitle=\"Another Title\"\n phoneLayout={phoneLayout}\n tabletLayout={tabletLayout}\n landscapeTabletLayout={landscapeTabletLayout}\n desktopLayout={desktopLayout}\n navProps={{\n children: (\n <>\n <CloseButton />\n <Text style={{ padding: \"1rem\" }}>\n Here is some amazing content that should normally be a navigation\n tree. You can actually still display a navigation tree along with\n any custom content you want by using the{\" \"}\n <code>navProps.children</code>\n </Text>\n </>\n ),\n }}\n // this is only required since I already have a main element due to the\n // documentation site's Layout component\n mainProps={{ component: \"div\" }}\n >\n <Grid cloneStyles columns={2} desktopColumns={4}>\n <Form>\n <Select\n id=\"phone-layout-type\"\n label=\"Phone Layout\"\n value={phoneLayout}\n options={PHONE_LAYOUTS}\n onChange={(nextValue) => {\n if (PHONE_LAYOUTS.includes(nextValue as SupportedPhoneLayout)) {\n setPhoneLayout(nextValue as SupportedPhoneLayout);\n }\n }}\n />\n <Select\n id=\"tablet-layout-type\"\n label=\"Tablet Layout\"\n value={tabletLayout}\n options={TABLET_LAYOUTS}\n onChange={(nextValue) => {\n if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {\n setTabletLayout(nextValue as SupportedTabletLayout);\n }\n }}\n />\n <Select\n id=\"landscape-tablet-layout-type\"\n label=\"Landscape Tablet Layout\"\n value={landscapeTabletLayout}\n options={TABLET_LAYOUTS}\n onChange={(nextValue) => {\n if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {\n setLandscapeTabletLayout(nextValue as SupportedTabletLayout);\n }\n }}\n />\n <Select\n id=\"desktop-layout-type\"\n label=\"Desktop Layout\"\n value={desktopLayout}\n options={WIDE_LAYOUTS}\n onChange={(nextValue) => {\n if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {\n setDesktopLayout(nextValue as SupportedWideLayout);\n }\n }}\n />\n <Select\n id=\"large-desktop-layout-type\"\n label=\"Large Desktop Layout\"\n value={largeDesktopLayout}\n options={WIDE_LAYOUTS}\n onChange={(nextValue) => {\n if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {\n setLargeDesktopLayout(nextValue as SupportedWideLayout);\n }\n }}\n />\n </Form>\n </Grid>\n </Layout>\n );\n};\n\nexport default Demo;\n",
5151
"isBinary": false
5252
},
5353
"src/CloseButton.tsx": {

‎packages/documentation/src/constants/sandboxes/Tabs-ConfigurableTabs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"isBinary": false
6363
},
6464
"src/ConfigurationForm.tsx": {
65-
"content": "import React, { FC } from \"react\";\nimport { Checkbox, Fieldset, Form, Radio } from \"@react-md/form\";\nimport { Grid } from \"@react-md/utils\";\n\nimport { TabConfiguration } from \"./useConfiguration\";\n\nconst ConfigurationForm: FC<Omit<TabConfiguration, \"tabs\">> = ({\n // Tabs config\n themed,\n handleThemedChange,\n padded,\n handlePaddedChange,\n automatic,\n handleAutomaticChange,\n\n // Tab config\n noIcon,\n onlyIcon,\n includeIcon,\n handleIconChange,\n stacked,\n handleStackedChange,\n iconAfter,\n handleIconAfterChange,\n\n // TabPanel config\n persistent,\n handlePersistentChange,\n disableTransition,\n customTransition,\n handleTransitionChange,\n}) => (\n <Form>\n <Grid clone columns={1} tabletColumns={2} largeDesktopColumns={3}>\n <Fieldset legend=\"Tabs Options\">\n <Checkbox\n id=\"configurable-tabs-theme\"\n name=\"themed\"\n label=\"Themed\"\n checked={themed}\n onChange={handleThemedChange}\n />\n <Checkbox\n id=\"configurable-tabs-padded\"\n name=\"padded\"\n label=\"Padded\"\n checked={padded}\n onChange={handlePaddedChange}\n />\n <Checkbox\n id=\"configurable-tabs-automatic\"\n name=\"automatic\"\n label=\"Automatic Keyboard Selection\"\n checked={automatic}\n onChange={handleAutomaticChange}\n />\n </Fieldset>\n <Fieldset legend=\"Icon Options\">\n <Radio\n id=\"configurable-tabs-icons-none\"\n name=\"icons\"\n label=\"No Icon\"\n value=\"none\"\n checked={noIcon}\n onChange={handleIconChange}\n />\n <Radio\n id=\"configurable-tabs-icons-include\"\n name=\"icons\"\n value=\"include\"\n label=\"Include\"\n checked={includeIcon}\n onChange={handleIconChange}\n />\n <Radio\n id=\"configurable-tabs-icons-only\"\n name=\"icons\"\n value=\"only\"\n label=\"Only Icons\"\n checked={onlyIcon}\n onChange={handleIconChange}\n />\n <Checkbox\n id=\"configurable-tabs-stacked\"\n name=\"stacked\"\n label=\"Stacked\"\n checked={stacked}\n onChange={handleStackedChange}\n disabled={!includeIcon}\n />\n <Checkbox\n id=\"configurable-tabs-icon-after\"\n name=\"iconAfter\"\n label=\"Icon After\"\n checked={iconAfter}\n onChange={handleIconAfterChange}\n disabled={!includeIcon}\n />\n </Fieldset>\n <Fieldset legend=\"Tab Panel Options\">\n <Checkbox\n id=\"configurable-tabs-panel-rendering\"\n name=\"persistent\"\n label=\"Persistent Tabs\"\n checked={persistent}\n onChange={handlePersistentChange}\n />\n <Radio\n id=\"configurable-tabs-transition-enabled\"\n name=\"transition\"\n value=\"enabled\"\n label=\"Transition Enabled\"\n checked={!disableTransition && !customTransition}\n onChange={handleTransitionChange}\n />\n <Radio\n id=\"configurable-tabs-transition-disabled\"\n name=\"transition\"\n value=\"disabled\"\n label=\"Transition Disabled\"\n checked={disableTransition}\n onChange={handleTransitionChange}\n />\n <Radio\n id=\"configurable-tabs-transition-custom\"\n name=\"transition\"\n value=\"custom\"\n label=\"Custom Transition\"\n checked={customTransition}\n onChange={handleTransitionChange}\n disabled={persistent}\n />\n </Fieldset>\n </Grid>\n </Form>\n);\n\nexport default ConfigurationForm;\n",
65+
"content": "import React, { FC } from \"react\";\nimport { Checkbox, Fieldset, Form, Radio } from \"@react-md/form\";\nimport { Grid } from \"@react-md/utils\";\n\nimport { TabConfiguration } from \"./useConfiguration\";\n\nconst ConfigurationForm: FC<Omit<TabConfiguration, \"tabs\">> = ({\n // Tabs config\n themed,\n handleThemedChange,\n padded,\n handlePaddedChange,\n automatic,\n handleAutomaticChange,\n\n // Tab config\n noIcon,\n onlyIcon,\n includeIcon,\n handleIconChange,\n stacked,\n handleStackedChange,\n iconAfter,\n handleIconAfterChange,\n\n // TabPanel config\n persistent,\n handlePersistentChange,\n disableTransition,\n customTransition,\n handleTransitionChange,\n}) => (\n <Grid cloneStyles columns={1} tabletColumns={2} largeDesktopColumns={3}>\n <Form>\n <Fieldset legend=\"Tabs Options\">\n <Checkbox\n id=\"configurable-tabs-theme\"\n name=\"themed\"\n label=\"Themed\"\n checked={themed}\n onChange={handleThemedChange}\n />\n <Checkbox\n id=\"configurable-tabs-padded\"\n name=\"padded\"\n label=\"Padded\"\n checked={padded}\n onChange={handlePaddedChange}\n />\n <Checkbox\n id=\"configurable-tabs-automatic\"\n name=\"automatic\"\n label=\"Automatic Keyboard Selection\"\n checked={automatic}\n onChange={handleAutomaticChange}\n />\n </Fieldset>\n <Fieldset legend=\"Icon Options\">\n <Radio\n id=\"configurable-tabs-icons-none\"\n name=\"icons\"\n label=\"No Icon\"\n value=\"none\"\n checked={noIcon}\n onChange={handleIconChange}\n />\n <Radio\n id=\"configurable-tabs-icons-include\"\n name=\"icons\"\n value=\"include\"\n label=\"Include\"\n checked={includeIcon}\n onChange={handleIconChange}\n />\n <Radio\n id=\"configurable-tabs-icons-only\"\n name=\"icons\"\n value=\"only\"\n label=\"Only Icons\"\n checked={onlyIcon}\n onChange={handleIconChange}\n />\n <Checkbox\n id=\"configurable-tabs-stacked\"\n name=\"stacked\"\n label=\"Stacked\"\n checked={stacked}\n onChange={handleStackedChange}\n disabled={!includeIcon}\n />\n <Checkbox\n id=\"configurable-tabs-icon-after\"\n name=\"iconAfter\"\n label=\"Icon After\"\n checked={iconAfter}\n onChange={handleIconAfterChange}\n disabled={!includeIcon}\n />\n </Fieldset>\n <Fieldset legend=\"Tab Panel Options\">\n <Checkbox\n id=\"configurable-tabs-panel-rendering\"\n name=\"persistent\"\n label=\"Persistent Tabs\"\n checked={persistent}\n onChange={handlePersistentChange}\n />\n <Radio\n id=\"configurable-tabs-transition-enabled\"\n name=\"transition\"\n value=\"enabled\"\n label=\"Transition Enabled\"\n checked={!disableTransition && !customTransition}\n onChange={handleTransitionChange}\n />\n <Radio\n id=\"configurable-tabs-transition-disabled\"\n name=\"transition\"\n value=\"disabled\"\n label=\"Transition Disabled\"\n checked={disableTransition}\n onChange={handleTransitionChange}\n />\n <Radio\n id=\"configurable-tabs-transition-custom\"\n name=\"transition\"\n value=\"custom\"\n label=\"Custom Transition\"\n checked={customTransition}\n onChange={handleTransitionChange}\n disabled={persistent}\n />\n </Fieldset>\n </Form>\n </Grid>\n);\n\nexport default ConfigurationForm;\n",
6666
"isBinary": false
6767
},
6868
"src/PanelContent.module.scss": {

0 commit comments

Comments
 (0)