From eca2016b06aa67fe7cc7f3d1a9f8982433435bea Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Thu, 13 Jul 2023 17:48:10 -0300
Subject: [PATCH 1/6] Add Tailwind CSS & plain CSS demo on the popper page

---
 .../popper/UnstyledPopperBasic/css/index.js   | 106 ++++++++++++++++++
 .../popper/UnstyledPopperBasic/css/index.tsx  | 106 ++++++++++++++++++
 .../UnstyledPopperBasic/css/index.tsx.preview |   9 ++
 .../UnstyledPopperBasic/system/index.js       |  95 ++++++++++++++++
 .../UnstyledPopperBasic/system/index.tsx      |  95 ++++++++++++++++
 .../system/index.tsx.preview                  |   6 +
 .../UnstyledPopperBasic/tailwind/index.js     |  39 +++++++
 .../UnstyledPopperBasic/tailwind/index.tsx    |  40 +++++++
 .../tailwind/index.tsx.preview                |  13 +++
 docs/data/base/components/popper/popper.md    |   2 +-
 10 files changed, 510 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
 create mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
new file mode 100644
index 00000000000000..e2559581b95976
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <React.Fragment>
+      <button aria-describedby={id} className="Button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className="CustomPopper">The content of the Popper.</div>
+      </Popper>
+      <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',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
+
+      .Button {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 600;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px 16px;
+        line-height: 1.5;
+        background: transparent;
+        cursor: pointer;
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        color: ${isDarkMode ? cyan[300] : cyan[400]};
+  
+        &:hover {
+          background: ${isDarkMode ? grey[900] : grey[100]};
+          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        }
+  
+        &:focus-visible {
+          border-color: ${cyan[400]};
+          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+      }
+
+      .CustomPopper{
+        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        border-radius: 8px;
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: ${
+          isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+        };
+        padding: 0.75rem;
+        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        font-size: 0.875rem;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-weight: 500;
+        opacity: 1;
+        margin: 0.25rem 0px;
+      }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
new file mode 100644
index 00000000000000..1ce79a2575243f
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <React.Fragment>
+      <button aria-describedby={id} className="Button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className="CustomPopper">The content of the Popper.</div>
+      </Popper>
+      <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',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
+
+      .Button {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 600;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px 16px;
+        line-height: 1.5;
+        background: transparent;
+        cursor: pointer;
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        color: ${isDarkMode ? cyan[300] : cyan[400]};
+  
+        &:hover {
+          background: ${isDarkMode ? grey[900] : grey[100]};
+          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        }
+  
+        &:focus-visible {
+          border-color: ${cyan[400]};
+          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+      }
+
+      .CustomPopper{
+        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        border-radius: 8px;
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: ${
+          isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+        };
+        padding: 0.75rem;
+        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        font-size: 0.875rem;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-weight: 500;
+        opacity: 1;
+        margin: 0.25rem 0px;
+      }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
new file mode 100644
index 00000000000000..e9bd452a7aef1b
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
@@ -0,0 +1,9 @@
+<React.Fragment>
+  <button aria-describedby={id} className="Button" onClick={handleClick}>
+    Toggle Popper
+  </button>
+  <Popper id={id} open={open} anchorEl={anchorEl}>
+    <div className="CustomPopper">The content of the Popper.</div>
+  </Popper>
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
new file mode 100644
index 00000000000000..5e0b4ee752cb3a
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { styled, css } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div>
+      <TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </TriggerButton>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+      </Popper>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const TriggerButton = styled('button')(
+  ({ theme }) => `
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 8px 16px;
+    line-height: 1.5;
+    background: transparent;
+    cursor: pointer;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    }
+  
+    &:focus-visible {
+      border-color: ${blue[400]};
+      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+    `,
+);
+
+const StyledPopperDiv = styled('div')(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: ${theme.palette.mode === 'dark'
+      ? `0 4px 8px rgb(0 0 0 / 0.7)`
+      : `0 4px 8px rgb(0 0 0 / 0.1)`};
+    padding: 0.75rem;
+    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    font-size: 0.875rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    opacity: 1;
+    margin: 0.25rem 0px;
+  `,
+);
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
new file mode 100644
index 00000000000000..2c44d99bf6617a
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { styled, css } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div>
+      <TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </TriggerButton>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+      </Popper>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const TriggerButton = styled('button')(
+  ({ theme }) => `
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 8px 16px;
+    line-height: 1.5;
+    background: transparent;
+    cursor: pointer;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    }
+  
+    &:focus-visible {
+      border-color: ${blue[400]};
+      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+    `,
+);
+
+const StyledPopperDiv = styled('div')(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: ${theme.palette.mode === 'dark'
+      ? `0 4px 8px rgb(0 0 0 / 0.7)`
+      : `0 4px 8px rgb(0 0 0 / 0.1)`};
+    padding: 0.75rem;
+    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    font-size: 0.875rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    opacity: 1;
+    margin: 0.25rem 0px;
+  `,
+);
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview
new file mode 100644
index 00000000000000..7d2ba69ced044c
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview
@@ -0,0 +1,6 @@
+<TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+  Toggle Popper
+</TriggerButton>
+<Popper id={id} open={open} anchorEl={anchorEl}>
+  <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+</Popper>
\ No newline at end of file
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
new file mode 100644
index 00000000000000..1e55b7d06dbddc
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function SimplePopper() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div className={`${isDarkMode ? 'dark' : ''}`}>
+      <button
+        className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        aria-describedby={id}
+        type="button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className=" z-50 rounded-lg font-medium text-sm bg-slate-50 dark:bg-slate-900 m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 shadow-md text-purple-900 dark:text-purple-100">
+          The content of the Popper.
+        </div>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
new file mode 100644
index 00000000000000..9af3715afa89bd
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function SimplePopper() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div className={`${isDarkMode ? 'dark' : ''}`}>
+      <button
+        className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        aria-describedby={id}
+        type="button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
+          The content of the Popper.
+        </div>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..867be457d997f5
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
@@ -0,0 +1,13 @@
+<button
+  className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+  aria-describedby={id}
+  type="button"
+  onClick={handleClick}
+>
+  Toggle Popper
+</button>
+<Popper id={id} open={open} anchorEl={anchorEl}>
+  <div className=" z-50 rounded-lg font-medium text-sm bg-slate-50 dark:bg-slate-900 m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 shadow-md text-purple-900 dark:text-purple-100">
+    The content of the Popper.
+  </div>
+</Popper>
\ No newline at end of file
diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
index cf3ac4898d8bf1..5ff8b4908659e4 100644
--- a/docs/data/base/components/popper/popper.md
+++ b/docs/data/base/components/popper/popper.md
@@ -44,7 +44,7 @@ You can disable this behavior with `disablePortal` prop.
 The following demo shows how to create and style a basic popper.
 Click **Toggle Popper** to see how it behaves:
 
-{{"demo": "SimplePopper.js", "defaultCodeOpen": true}}
+{{"demo": "UnstyledPopperBasic", "defaultCodeOpen": true}}
 
 :::warning
 By default, clicking outside the popper does not hide it.

From 9d0d2a47a98bf86ea08f68bbf698260f0f9bbc6d Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Wed, 19 Jul 2023 11:02:00 -0300
Subject: [PATCH 2/6] Fixed the lint issue

---
 .../components/popper/UnstyledPopperBasic/css/index.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
index 1ce79a2575243f..9e4cc992196e30 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -14,7 +14,12 @@ export default function SimplePopper() {
 
   return (
     <React.Fragment>
-      <button aria-describedby={id} className="Button" onClick={handleClick}>
+      <button
+        type="button"
+        aria-describedby={id}
+        className="Button"
+        onClick={handleClick}
+      >
         Toggle Popper
       </button>
       <Popper id={id} open={open} anchorEl={anchorEl}>

From ca8c7791c66386937b2d90e24e2885a3e31a9daf Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Wed, 19 Jul 2023 11:08:05 -0300
Subject: [PATCH 3/6] Run yarn docs:typescript:formatted

---
 .../components/popper/UnstyledPopperBasic/css/index.js     | 7 ++++++-
 .../popper/UnstyledPopperBasic/css/index.tsx.preview       | 7 ++++++-
 .../popper/UnstyledPopperBasic/tailwind/index.js           | 3 ++-
 .../popper/UnstyledPopperBasic/tailwind/index.tsx.preview  | 2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
index e2559581b95976..b812b0215b2928 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -14,7 +14,12 @@ export default function SimplePopper() {
 
   return (
     <React.Fragment>
-      <button aria-describedby={id} className="Button" onClick={handleClick}>
+      <button
+        type="button"
+        aria-describedby={id}
+        className="Button"
+        onClick={handleClick}
+      >
         Toggle Popper
       </button>
       <Popper id={id} open={open} anchorEl={anchorEl}>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
index e9bd452a7aef1b..e2d29a1fee8ac2 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
@@ -1,5 +1,10 @@
 <React.Fragment>
-  <button aria-describedby={id} className="Button" onClick={handleClick}>
+  <button
+    type="button"
+    aria-describedby={id}
+    className="Button"
+    onClick={handleClick}
+  >
     Toggle Popper
   </button>
   <Popper id={id} open={open} anchorEl={anchorEl}>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
index 1e55b7d06dbddc..9c02153ff3a193 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -10,6 +10,7 @@ function useIsDarkMode() {
 export default function SimplePopper() {
   // Replace this with your app logic for determining dark mode
   const isDarkMode = useIsDarkMode();
+
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
@@ -30,7 +31,7 @@ export default function SimplePopper() {
         Toggle Popper
       </button>
       <Popper id={id} open={open} anchorEl={anchorEl}>
-        <div className=" z-50 rounded-lg font-medium text-sm bg-slate-50 dark:bg-slate-900 m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 shadow-md text-purple-900 dark:text-purple-100">
+        <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
           The content of the Popper.
         </div>
       </Popper>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
index 867be457d997f5..d1c3015b58d556 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
@@ -7,7 +7,7 @@
   Toggle Popper
 </button>
 <Popper id={id} open={open} anchorEl={anchorEl}>
-  <div className=" z-50 rounded-lg font-medium text-sm bg-slate-50 dark:bg-slate-900 m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 shadow-md text-purple-900 dark:text-purple-100">
+  <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
     The content of the Popper.
   </div>
 </Popper>
\ No newline at end of file

From 15b53799a4600737290d8fee01a68d62540d273a Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Mon, 24 Jul 2023 13:29:53 +0200
Subject: [PATCH 4/6] Fixed dark mode.

---
 .../popper/UnstyledPopperBasic/tailwind/index.js    |  7 ++++++-
 .../popper/UnstyledPopperBasic/tailwind/index.tsx   |  7 ++++++-
 .../UnstyledPopperBasic/tailwind/index.tsx.preview  | 13 -------------
 3 files changed, 12 insertions(+), 15 deletions(-)
 delete mode 100644 docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
index 9c02153ff3a193..24e6a16ca3d09d 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -30,7 +30,12 @@ export default function SimplePopper() {
       >
         Toggle Popper
       </button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        className={`${isDarkMode ? 'dark' : ''}`}
+      >
         <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
           The content of the Popper.
         </div>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
index 9af3715afa89bd..554a033abb4611 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
@@ -30,7 +30,12 @@ export default function SimplePopper() {
       >
         Toggle Popper
       </button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        className={`${isDarkMode ? 'dark' : ''}`}
+      >
         <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
           The content of the Popper.
         </div>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
deleted file mode 100644
index d1c3015b58d556..00000000000000
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-<button
-  className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
-  aria-describedby={id}
-  type="button"
-  onClick={handleClick}
->
-  Toggle Popper
-</button>
-<Popper id={id} open={open} anchorEl={anchorEl}>
-  <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
-    The content of the Popper.
-  </div>
-</Popper>
\ No newline at end of file

From dcf61cb9aa465fa0bacb49ca2af08862266ab968 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Mon, 24 Jul 2023 13:57:43 -0300
Subject: [PATCH 5/6] fix lint

---
 .../components/popper/UnstyledPopperBasic/system/index.js     | 4 ++--
 .../components/popper/UnstyledPopperBasic/system/index.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
index 5e0b4ee752cb3a..9e4b9f5182e392 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -82,8 +82,8 @@ const StyledPopperDiv = styled('div')(
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 4px 8px rgb(0 0 0 / 0.7)`
-      : `0 4px 8px rgb(0 0 0 / 0.1)`};
+      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
+      : `0px 4px 8px rgb(0 0 0 / 0.1)`};
     padding: 0.75rem;
     color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
     font-size: 0.875rem;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
index 2c44d99bf6617a..1a6d12a355356f 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -82,8 +82,8 @@ const StyledPopperDiv = styled('div')(
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 4px 8px rgb(0 0 0 / 0.7)`
-      : `0 4px 8px rgb(0 0 0 / 0.1)`};
+      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
+      : `0px 4px 8px rgb(0 0 0 / 0.1)`};
     padding: 0.75rem;
     color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
     font-size: 0.875rem;

From b2861adcc72741ef59f79ba19c3962ba6472fa3b Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Tue, 25 Jul 2023 12:56:20 -0300
Subject: [PATCH 6/6] Fixed stylelint error

---
 .../base/components/popper/UnstyledPopperBasic/system/index.js  | 2 +-
 .../base/components/popper/UnstyledPopperBasic/system/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
index 9e4b9f5182e392..79cc46085fadc3 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -90,6 +90,6 @@ const StyledPopperDiv = styled('div')(
     font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 500;
     opacity: 1;
-    margin: 0.25rem 0px;
+    margin: 0.25rem 0;
   `,
 );
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
index 1a6d12a355356f..83c4ca2038fb13 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -90,6 +90,6 @@ const StyledPopperDiv = styled('div')(
     font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 500;
     opacity: 1;
-    margin: 0.25rem 0px;
+    margin: 0.25rem 0;
   `,
 );