[TabsUnstyled] Introduce new component (#29597)

mui · Nov 19, 2021 · 4b3721c · 4b3721c
1 parent d145a38
commit 4b3721c
Show file tree

Hide file tree

Showing 80 changed files with 6,083 additions and 3 deletions.
diff --git a/docs/pages/api-docs/tab-panel-unstyled.js b/docs/pages/api-docs/tab-panel-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 './tab-panel-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/tab-panel-unstyled',
+    false,
+    /tab-panel-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/tab-panel-unstyled.json b/docs/pages/api-docs/tab-panel-unstyled.json
@@ -0,0 +1,23 @@
+{
+  "props": {
+    "value": {
+      "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
+      "required": true
+    },
+    "children": { "type": { "name": "node" } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" }
+  },
+  "name": "TabPanelUnstyled",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/tab-unstyled.js b/docs/pages/api-docs/tab-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 './tab-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/tab-unstyled',
+    false,
+    /tab-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/tab-unstyled.json b/docs/pages/api-docs/tab-unstyled.json
@@ -0,0 +1,27 @@
+{
+  "props": {
+    "action": {
+      "type": {
+        "name": "union",
+        "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
+      }
+    },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "disabled": { "type": { "name": "bool" } },
+    "onChange": { "type": { "name": "func" } },
+    "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
+  },
+  "name": "TabUnstyled",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/tabs-list-unstyled.js b/docs/pages/api-docs/tabs-list-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 './tabs-list-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/tabs-list-unstyled',
+    false,
+    /tabs-list-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/tabs-list-unstyled.json b/docs/pages/api-docs/tabs-list-unstyled.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" }
+  },
+  "name": "TabsListUnstyled",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/tabs-unstyled.js b/docs/pages/api-docs/tabs-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 './tabs-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/tabs-unstyled',
+    false,
+    /tabs-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/tabs-unstyled.json b/docs/pages/api-docs/tabs-unstyled.json
@@ -0,0 +1,41 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "defaultValue": {
+      "type": {
+        "name": "union",
+        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    },
+    "direction": {
+      "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
+      "default": "'ltr'"
+    },
+    "onChange": { "type": { "name": "func" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
+      "default": "'horizontal'"
+    },
+    "selectionFollowsFocus": { "type": { "name": "bool" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    }
+  },
+  "name": "TabsUnstyled",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/src/pages/components/tabs/UnstyledTabsBasic.js b/docs/src/pages/components/tabs/UnstyledTabsBasic.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import TabsUnstyled from '@mui/base/TabsUnstyled';
+import TabsListUnstyled from '@mui/base/TabsListUnstyled';
+import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
+import TabUnstyled from '@mui/base/TabUnstyled';
+
+export default function UnstyledTabsBasic() {
+  return (
+    <TabsUnstyled defaultValue={0}>
+      <TabsListUnstyled>
+        <TabUnstyled>One</TabUnstyled>
+        <TabUnstyled>Two</TabUnstyled>
+        <TabUnstyled>Three</TabUnstyled>
+      </TabsListUnstyled>
+      <TabPanelUnstyled value={0}>First content</TabPanelUnstyled>
+      <TabPanelUnstyled value={1}>Second content</TabPanelUnstyled>
+      <TabPanelUnstyled value={2}>Third content</TabPanelUnstyled>
+    </TabsUnstyled>
+  );
+}
diff --git a/docs/src/pages/components/tabs/UnstyledTabsBasic.tsx b/docs/src/pages/components/tabs/UnstyledTabsBasic.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import TabsUnstyled from '@mui/base/TabsUnstyled';
+import TabsListUnstyled from '@mui/base/TabsListUnstyled';
+import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
+import TabUnstyled from '@mui/base/TabUnstyled';
+
+export default function UnstyledTabsBasic() {
+  return (
+    <TabsUnstyled defaultValue={0}>
+      <TabsListUnstyled>
+        <TabUnstyled>One</TabUnstyled>
+        <TabUnstyled>Two</TabUnstyled>
+        <TabUnstyled>Three</TabUnstyled>
+      </TabsListUnstyled>
+      <TabPanelUnstyled value={0}>First content</TabPanelUnstyled>
+      <TabPanelUnstyled value={1}>Second content</TabPanelUnstyled>
+      <TabPanelUnstyled value={2}>Third content</TabPanelUnstyled>
+    </TabsUnstyled>
+  );
+}
diff --git a/docs/src/pages/components/tabs/UnstyledTabsBasic.tsx.preview b/docs/src/pages/components/tabs/UnstyledTabsBasic.tsx.preview
@@ -0,0 +1,10 @@
+<TabsUnstyled defaultValue={0}>
+  <TabsListUnstyled>
+    <TabUnstyled>One</TabUnstyled>
+    <TabUnstyled>Two</TabUnstyled>
+    <TabUnstyled>Three</TabUnstyled>
+  </TabsListUnstyled>
+  <TabPanelUnstyled value={0}>First content</TabPanelUnstyled>
+  <TabPanelUnstyled value={1}>Second content</TabPanelUnstyled>
+  <TabPanelUnstyled value={2}>Third content</TabPanelUnstyled>
+</TabsUnstyled>
diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.js b/docs/src/pages/components/tabs/UnstyledTabsCustomized.js
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import TabsUnstyled from '@mui/base/TabsUnstyled';
+import TabsListUnstyled from '@mui/base/TabsListUnstyled';
+import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
+import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';
+
+const primary = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#80BFFF',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const Tab = styled(TabUnstyled)`
+  color: ${primary[100]};
+  cursor: pointer;
+  font-size: 1rem;
+  background: ${primary[500]};
+  padding: 15px 20px;
+  border: none;
+  display: flex;
+
+  &.Mui-selected {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    color: #fff;
+    outline: none;
+    background-color: ${primary[600]};
+    border-bottom: 2px solid ${primary[600]};
+  }
+
+  &.${tabUnstyledClasses.selected} {
+    border-bottom: 2px solid #fff;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
+  }
+`;
+
+const TabPanel = styled(TabPanelUnstyled)`
+  width: 100%;
+`;
+
+const TabsList = styled(TabsListUnstyled)`
+  background-color: ${primary[500]};
+  border-radius: 8px;
+  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02);
+  padding: 0 10px 0 10px;
+  margin-bottom: 10px;
+  display: flex;
+  align-content: space-between;
+`;
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <TabsUnstyled defaultValue={0}>
+      <TabsList>
+        <Tab>One</Tab>
+        <Tab>Two</Tab>
+        <Tab>Three</Tab>
+      </TabsList>
+      <TabPanel value={0}>First content</TabPanel>
+      <TabPanel value={1}>Second content</TabPanel>
+      <TabPanel value={2}>Third content</TabPanel>
+    </TabsUnstyled>
+  );
+}
diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.preview b/docs/src/pages/components/tabs/UnstyledTabsCustomized.preview
@@ -0,0 +1,10 @@
+<TabsUnstyled defaultValue={0}>
+  <TabsList>
+    <Tab>One</Tab>
+    <Tab>Two</Tab>
+    <Tab>Three</Tab>
+  </TabsList>
+  <TabPanel value={0}>First content</TabPanel>
+  <TabPanel value={1}>Second content</TabPanel>
+  <TabPanel value={2}>Third content</TabPanel>
+</TabsUnstyled>