Skip to content

Commit

Permalink
feat(grid): added new cloneStyles prop so grid styles can be applie…
Browse files Browse the repository at this point in the history 
…d 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.
  • Loading branch information
@mlaursen
mlaursen committed Aug 30, 2020
1 parent 49ac9bb commit ca913e7
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 19 deletions.
8 changes: 4 additions & 4 deletions packages/documentation/src/components/Demos/Layout/ConfigurableLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ const ConfigurableLayout: FC = () => {
// documentation site's Layout component
mainProps={{ component: "div" }}
>
<Form>
<Grid clone columns={2} desktopColumns={4}>
<Grid cloneStyles columns={2} desktopColumns={4}>
<Form>
<Select
id="phone-layout-type"
label="Phone Layout"
Expand Down Expand Up @@ -128,8 +128,8 @@ const ConfigurableLayout: FC = () => {
}
}}
/>
</Grid>
</Form>
</Form>
</Grid>
</Layout>
);
};
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const ConfigurationForm: FC<Omit<TabConfiguration, "tabs">> = ({
customTransition,
handleTransitionChange,
}) => (
<Form>
<Grid clone columns={1} tabletColumns={2} largeDesktopColumns={3}>
<Grid cloneStyles columns={1} tabletColumns={2} largeDesktopColumns={3}>
<Form>
<Fieldset legend="Tabs Options">
<Checkbox
id="configurable-tabs-theme"
Expand Down Expand Up @@ -131,8 +131,8 @@ const ConfigurationForm: FC<Omit<TabConfiguration, "tabs">> = ({
disabled={persistent}
/>
</Fieldset>
</Grid>
</Form>
</Form>
</Grid>
);

export default ConfigurationForm;
2 changes: 1 addition & 1 deletion packages/documentation/src/constants/sandboxes/Layout-ConfigurableLayout.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"isBinary": false
},
"src/Demo.tsx": {
"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",
"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",
"isBinary": false
},
"src/CloseButton.tsx": {
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/src/constants/sandboxes/Tabs-ConfigurableTabs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"isBinary": false
},
"src/ConfigurationForm.tsx": {
"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",
"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",
"isBinary": false
},
"src/PanelContent.module.scss": {
Expand Down
Loading

0 comments on commit ca913e7

Please sign in to comment.