[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#3…

…8240)
mui · Aug 7, 2023 · b533bc1 · b533bc1
1 parent 82f1bb8
commit b533bc1
Show file tree

Hide file tree

Showing 22 changed files with 682 additions and 27 deletions.
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Button, buttonClasses } from '@mui/base/Button';
+import Stack from '@mui/material/Stack';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <React.Fragment>
+      <Stack spacing={2} direction="row">
+        <Button className="CustomButton">Button</Button>
+        <Button className="CustomButton" disabled>
+          Disabled
+        </Button>
+      </Stack>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function Styles() {
+  return (
+    <style>{`
+  .CustomButton {
+    font-family: IBM Plex Sans,sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${cyan[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    border: none;
+  }
+  .CustomButton:hover {
+    background-color: ${cyan[600]};
+  }
+  .${buttonClasses.active} {
+    background-color: ${cyan[700]};
+  }
+  .${buttonClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Button, buttonClasses } from '@mui/base/Button';
+import Stack from '@mui/material/Stack';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <React.Fragment>
+      <Stack spacing={2} direction="row">
+        <Button className="CustomButton">Button</Button>
+        <Button className="CustomButton" disabled>
+          Disabled
+        </Button>
+      </Stack>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function Styles() {
+  return (
+    <style>{`
+  .CustomButton {
+    font-family: IBM Plex Sans,sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: ${cyan[500]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    border: none;
+  }
+  .CustomButton:hover {
+    background-color: ${cyan[600]};
+  }
+  .${buttonClasses.active} {
+    background-color: ${cyan[700]};
+  }
+  .${buttonClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview
@@ -0,0 +1,9 @@
+<React.Fragment>
+  <Stack spacing={2} direction="row">
+    <Button className="CustomButton">Button</Button>
+    <Button className="CustomButton" disabled>
+      Disabled
+    </Button>
+  </Stack>
+  <Styles />
+</React.Fragment>
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Button, buttonClasses } from '@mui/base/Button';
+import { styled } from '@mui/system';
+import Stack from '@mui/material/Stack';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}
+
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
+const grey = {
+  100: '#eaeef2',
+  300: '#afb8c1',
+  900: '#24292f',
+};
+
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &.${buttonClasses.active} {
+    background-color: ${blue[700]};
+  }
+
+  &.${buttonClasses.focusVisible} {
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  `,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Button, buttonClasses } from '@mui/base/Button';
+import { styled } from '@mui/system';
+import Stack from '@mui/material/Stack';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}
+
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
+const grey = {
+  100: '#eaeef2',
+  300: '#afb8c1',
+  900: '#24292f',
+};
+
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &.${buttonClasses.active} {
+    background-color: ${blue[700]};
+  }
+
+  &.${buttonClasses.focusVisible} {
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  `,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx.preview
@@ -0,0 +1,2 @@
+<CustomButton>Button</CustomButton>
+<CustomButton disabled>Disabled</CustomButton>
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@mui/base/Button';
+import Stack from '@mui/material/Stack';
+import clsx from 'clsx';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}
+
+const CustomButton = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <Button
+      ref={ref}
+      className={clsx(
+        'cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+CustomButton.propTypes = {
+  className: PropTypes.string,
+};
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Button, ButtonProps } from '@mui/base/Button';
+import Stack from '@mui/material/Stack';
+import clsx from 'clsx';
+
+export default function UnstyledButtonsIntroduction() {
+  return (
+    <Stack spacing={2} direction="row">
+      <CustomButton>Button</CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
+    </Stack>
+  );
+}
+
+const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, ...other } = props;
+    return (
+      <Button
+        ref={ref}
+        className={clsx(
+          'cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50',
+          className,
+        )}
+        {...other}
+      />
+    );
+  },
+);
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,2 @@
+<CustomButton>Button</CustomButton>
+<CustomButton disabled>Disabled</CustomButton>
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
@@ -1,19 +1,34 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Button } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
+import clsx from 'clsx';
 
 export default function UnstyledButtonsSimple() {
   return (
     <Stack spacing={2} direction="row">
-      <Button className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50">
+      <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
         Button
-      </Button>
-      <Button
-        className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"
-        disabled
-      >
-        Disabled
-      </Button>
+      </CustomButton>
+      <CustomButton disabled>Disabled</CustomButton>
     </Stack>
   );
 }
+
+const CustomButton = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <Button
+      ref={ref}
+      className={clsx(
+        'cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+CustomButton.propTypes = {
+  className: PropTypes.string,
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<CustomButton>Button</CustomButton>
		<CustomButton disabled>Disabled</CustomButton>