[Switch] Create SwitchUnstyled and useSwitch (#26688)

Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
mui · Jul 7, 2021 · 0230df9 · 0230df9
1 parent 8bc4f5e
commit 0230df9
Show file tree

Hide file tree

Showing 43 changed files with 2,582 additions and 19 deletions.
diff --git a/docs/pages/api-docs/switch-unstyled.js b/docs/pages/api-docs/switch-unstyled.js
@@ -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,
+  };
+};
diff --git a/docs/pages/api-docs/switch-unstyled.json b/docs/pages/api-docs/switch-unstyled.json
@@ -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
+}
diff --git a/docs/src/modules/utils/parseTest.ts b/docs/src/modules/utils/parseTest.ts
@@ -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) &&

diff --git a/docs/src/pages/components/switches/UnstyledSwitches.js b/docs/src/pages/components/switches/UnstyledSwitches.js
@@ -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>
+  );
+}
diff --git a/docs/src/pages/components/switches/UnstyledSwitches.tsx b/docs/src/pages/components/switches/UnstyledSwitches.tsx
@@ -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>
+  );
+}