Skip to content

Commit

Permalink
[Switch] Create SwitchUnstyled and useSwitch (#26688)
Browse files Browse the repository at this point in the history
Co-authored-by: Marija Najdova <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>
  • Loading branch information
3 people authored Jul 7, 2021
1 parent 8bc4f5e commit 0230df9
Show file tree
Hide file tree
Showing 43 changed files with 2,582 additions and 19 deletions.
23 changes: 23 additions & 0 deletions docs/pages/api-docs/switch-unstyled.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import * as React from 'react';
import ApiPage from 'docs/src/modules/components/ApiPage';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import jsonPageContent from './switch-unstyled.json';

export default function Page(props) {
const { descriptions, pageContent } = props;
return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
}

Page.getInitialProps = () => {
const req = require.context(
'docs/translations/api-docs/switch-unstyled',
false,
/switch-unstyled.*.json$/,
);
const descriptions = mapApiPageTranslations(req);

return {
descriptions,
pageContent: jsonPageContent,
};
};
29 changes: 29 additions & 0 deletions docs/pages/api-docs/switch-unstyled.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"props": {
"checked": { "type": { "name": "bool" } },
"className": { "type": { "name": "string" } },
"component": { "type": { "name": "elementType" } },
"components": {
"type": {
"name": "shape",
"description": "{ Input?: elementType, Root?: elementType, Thumb?: elementType }"
},
"default": "{}"
},
"componentsProps": { "type": { "name": "object" }, "default": "{}" },
"defaultChecked": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"onChange": { "type": { "name": "func" } },
"readOnly": { "type": { "name": "bool" } },
"required": { "type": { "name": "bool" } }
},
"name": "SwitchUnstyled",
"styles": { "classes": [], "globalClasses": {}, "name": null },
"spread": true,
"forwardsRefTo": "HTMLSpanElement",
"filename": "/packages/material-ui-unstyled/src/SwitchUnstyled/SwitchUnstyled.tsx",
"inheritance": null,
"demos": "<ul><li><a href=\"/components/switches/\">Switches</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
5 changes: 1 addition & 4 deletions docs/src/modules/utils/parseTest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@ function findConformanceDescriptor(file: babel.ParseResult): babel.types.ObjectE
CallExpression(babelPath) {
const { node: callExpression } = babelPath;
const { callee } = callExpression;
if (
t.isIdentifier(callee) &&
(callee.name === 'describeConformance' || callee.name === 'describeConformanceV5')
) {
if (t.isIdentifier(callee) && callee.name.startsWith('describeConformance')) {
const [, optionsFactory] = callExpression.arguments;
if (
t.isArrowFunctionExpression(optionsFactory) &&
Expand Down
73 changes: 73 additions & 0 deletions docs/src/pages/components/switches/UnstyledSwitches.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import { styled } from '@material-ui/system';
import SwitchUnstyled, {
switchUnstyledClasses,
} from '@material-ui/unstyled/SwitchUnstyled';

const Root = styled('span')(`
font-size: 0;
position: relative;
display: inline-block;
width: 32px;
height: 20px;
background: #B3C3D3;
border-radius: 10px;
margin: 10px;
cursor: pointer;
&.${switchUnstyledClasses.disabled} {
opacity: 0.4;
cursor: not-allowed;
}
&.${switchUnstyledClasses.checked} {
background: #007FFF;
}
& .${switchUnstyledClasses.thumb} {
display: block;
width: 14px;
height: 14px;
top: 3px;
left: 3px;
border-radius: 16px;
background-color: #FFF;
position: relative;
transition: all 200ms ease;
}
&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} {
background-color: rgba(255,255,255,1);
box-shadow: 0 0 1px 8px rgba(0,0,0,0.25);
}
&.${switchUnstyledClasses.checked} .${switchUnstyledClasses.thumb} {
left: 14px;
top: 3px;
background-color: #FFF;
}
& .${switchUnstyledClasses.input} {
cursor: inherit;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
margin: 0;
}`);

export default function UnstyledSwitches() {
const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } };

return (
<div>
<SwitchUnstyled component={Root} {...label} defaultChecked />
<SwitchUnstyled component={Root} {...label} />
<SwitchUnstyled component={Root} {...label} defaultChecked disabled />
<SwitchUnstyled component={Root} {...label} disabled />
</div>
);
}
73 changes: 73 additions & 0 deletions docs/src/pages/components/switches/UnstyledSwitches.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import { styled } from '@material-ui/system';
import SwitchUnstyled, {
switchUnstyledClasses,
} from '@material-ui/unstyled/SwitchUnstyled';

const Root = styled('span')(`
font-size: 0;
position: relative;
display: inline-block;
width: 32px;
height: 20px;
background: #B3C3D3;
border-radius: 10px;
margin: 10px;
cursor: pointer;
&.${switchUnstyledClasses.disabled} {
opacity: 0.4;
cursor: not-allowed;
}
&.${switchUnstyledClasses.checked} {
background: #007FFF;
}
& .${switchUnstyledClasses.thumb} {
display: block;
width: 14px;
height: 14px;
top: 3px;
left: 3px;
border-radius: 16px;
background-color: #FFF;
position: relative;
transition: all 200ms ease;
}
&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} {
background-color: rgba(255,255,255,1);
box-shadow: 0 0 1px 8px rgba(0,0,0,0.25);
}
&.${switchUnstyledClasses.checked} .${switchUnstyledClasses.thumb} {
left: 14px;
top: 3px;
background-color: #FFF;
}
& .${switchUnstyledClasses.input} {
cursor: inherit;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
margin: 0;
}`);

export default function UnstyledSwitches() {
const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } };

return (
<div>
<SwitchUnstyled component={Root} {...label} defaultChecked />
<SwitchUnstyled component={Root} {...label} />
<SwitchUnstyled component={Root} {...label} defaultChecked disabled />
<SwitchUnstyled component={Root} {...label} disabled />
</div>
);
}
Loading

0 comments on commit 0230df9

Please sign in to comment.