[Button] Create ButtonUnstyled and useButton

docs/pages/api-docs/button-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 './button-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/button-unstyled',
+    false,
+    /button-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/button-unstyled.json

@@ -0,0 +1,25 @@
+{
+  "props": {
+    "action": {
+      "type": {
+        "name": "union",
+        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
+      }
+    },
+    "component": { "type": { "name": "elementType" }, "default": "'button'" },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "disabled": { "type": { "name": "bool" } }
+  },
+  "name": "ButtonUnstyled",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/material-ui-unstyled/src/ButtonUnstyled/ButtonUnstyled.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/buttons/\">Buttons</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/src/pages/components/buttons/UnstyledButtonCustom.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+} from '@material-ui/unstyled/ButtonUnstyled';
+import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import { styled } from '@material-ui/system';
+
+const ButtonRoot = React.forwardRef((props, ref) => {
+  const { children, ...other } = props;
+
+  return (
+    <svg width="200" height="50" {...other} ref={ref}>
+      <polygon points="0,50 20,0 200,0 180,50" />
+      <foreignObject x="20" y="0" width="160" height="50">
+        <div>{children}</div>
+      </foreignObject>
+    </svg>
+  );
+});
+
+ButtonRoot.propTypes = {
+  children: PropTypes.node,
+};
+
+const StyledButtonRoot = styled(ButtonRoot)(`
+  overflow: visible;
+  cursor: pointer;
+
+  & polygon {
+    stroke: #0059b2;
+    stroke-width: 2;
+    stroke-dasharray: 600,600;
+    stroke-dashoffset: -600;
+    stroke-linecap: round;
+    fill: #007fff;
+    transition: all 700ms ease;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
+  }
+
+  &:hover polygon {
+    stroke-dashoffset: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    outline: none;
+    & polygon {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  &.${buttonUnstyledClasses.active} polygon {
+    fill: #004386;
+  }
+
+  & foreignObject {
+    pointer-events: none;
+
+    & > div {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    & svg {
+      margin: 0 5px;
+    }
+  }
+`);
+
+const SvgButton = React.forwardRef(function SvgButton(props, ref) {
+  return <ButtonUnstyled {...props} component={StyledButtonRoot} ref={ref} />;
+});
+
+export default function UnstyledButtonCustom() {
+  return (
+    <SvgButton>
+      <StarOutlineIcon />
+      SVG Button
+      <StarOutlineIcon />
+    </SvgButton>
+  );
+}

docs/src/pages/components/buttons/UnstyledButtonCustom.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import ButtonUnstyled, {
+  ButtonUnstyledProps,
+  buttonUnstyledClasses,
+} from '@material-ui/unstyled/ButtonUnstyled';
+import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import { styled } from '@material-ui/system';
+
+const ButtonRoot = React.forwardRef(
+  (props: React.PropsWithChildren<{}>, ref: React.ForwardedRef<any>) => {
+    const { children, ...other } = props;
+
+    return (
+      <svg width="200" height="50" {...other} ref={ref}>
+        <polygon points="0,50 20,0 200,0 180,50" />
+        <foreignObject x="20" y="0" width="160" height="50">
+          <div>{children}</div>
+        </foreignObject>
+      </svg>
+    );
+  },
+);
+
+const StyledButtonRoot = styled(ButtonRoot)(`
+  overflow: visible;
+  cursor: pointer;
+
+  & polygon {
+    stroke: #0059b2;
+    stroke-width: 2;
+    stroke-dasharray: 600,600;
+    stroke-dashoffset: -600;
+    stroke-linecap: round;
+    fill: #007fff;
+    transition: all 700ms ease;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
+  }
+
+  &:hover polygon {
+    stroke-dashoffset: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    outline: none;
+    & polygon {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  &.${buttonUnstyledClasses.active} polygon {
+    fill: #004386;
+  }
+
+  & foreignObject {
+    pointer-events: none;
+
+    & > div {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    & svg {
+      margin: 0 5px;
+    }
+  }
+`);
+
+const SvgButton = React.forwardRef(function SvgButton(
+  props: ButtonUnstyledProps,
+  ref: React.ForwardedRef<any>,
+) {
+  return <ButtonUnstyled {...props} component={StyledButtonRoot} ref={ref} />;
+});
+
+export default function UnstyledButtonCustom() {
+  return (
+    <SvgButton>
+      <StarOutlineIcon />
+      SVG Button
+      <StarOutlineIcon />
+    </SvgButton>
+  );
+}

docs/src/pages/components/buttons/UnstyledButtonsSimple.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+} from '@material-ui/unstyled/ButtonUnstyled';
+import { styled } from '@material-ui/system';
+
+const CustomButtonRoot = styled('button')(`
+  background-color: #007fff;
+  padding: 15px 20px;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: 600;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  transition: all 200ms ease;
+  cursor: pointer;
+  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
+  border: none;
+
+  &:hover {
+    background-color: #0059b2;
+  }
+
+  &.${buttonUnstyledClasses.active} {
+    background-color: #004386;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
+  }
+`);
+
+function CustomButton(props) {
+  return <ButtonUnstyled {...props} component={CustomButtonRoot} />;
+}
+
+export default function UnstyledButton() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}

docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+  ButtonUnstyledProps,
+} from '@material-ui/unstyled/ButtonUnstyled';
+import { styled } from '@material-ui/system';
+
+const CustomButtonRoot = styled('button')(`
+  background-color: #007fff;
+  padding: 15px 20px;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: 600;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  transition: all 200ms ease;
+  cursor: pointer;
+  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
+  border: none;
+
+  &:hover {
+    background-color: #0059b2;
+  }
+
+  &.${buttonUnstyledClasses.active} {
+    background-color: #004386;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
+  }
+`);
+
+function CustomButton(props: ButtonUnstyledProps) {
+  return <ButtonUnstyled {...props} component={CustomButtonRoot} />;
+}
+
+export default function UnstyledButton() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}

docs/src/pages/components/buttons/UnstyledButtonsSpan.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+} from '@material-ui/unstyled/ButtonUnstyled';
+import { styled } from '@material-ui/system';
+
+const CustomButtonRoot = styled('button')(`
+  background-color: #007fff;
+  padding: 15px 20px;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: 600;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  transition: all 200ms ease;
+  cursor: pointer;
+  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
+  border: none;
+
+  &:hover {
+    background-color: #0059b2;
+  }
+
+  &.${buttonUnstyledClasses.active} {
+    background-color: #004386;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
+  }
+`);
+
+function CustomButton(props) {
+  return <ButtonUnstyled {...props} component={CustomButtonRoot} />;
+}
+
+export default function UnstyledButton() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}