Add Progress hooks and components

mj12albert · Jul 9, 2024 · f07c004 · f07c004
1 parent 2a9ebe1
commit f07c004
Show file tree

Hide file tree

Showing 42 changed files with 1,996 additions and 1 deletion.
diff --git a/docs/data/base/components/progress/IndeterminateProgress.js b/docs/data/base/components/progress/IndeterminateProgress.js
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { styled, keyframes, css } from '@mui/system';
+import * as BaseProgress from '@base_ui/react/Progress';
+
+export default function IndeterminateProgress() {
+  return (
+    <div className="App">
+      <Progress value={null} aria-labelledby="ProgressLabel">
+        <span className="Progress-label" id="ProgressLabel">
+          Uploading files
+        </span>
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      </Progress>
+    </div>
+  );
+}
+
+const Progress = styled(BaseProgress.Root)`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+`;
+
+const ProgressTrack = styled(BaseProgress.Track)(
+  ({ theme }) => `
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
+    display: flex;
+    overflow: hidden;
+  `,
+);
+
+const indeterminateLoading = keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(20rem);
+  }
+`;
+
+const ProgressIndicator = styled(BaseProgress.Indicator)(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
+    border-radius: inherit;
+
+    &[data-state='indeterminate'] {
+      width: 25%;
+      animation: ${indeterminateLoading} 1.5s infinite ease-in-out;
+      will-change: transform;
+    }
+  `,
+);
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const BLUE400 = '#3399FF';
+const BLUE500 = '#007FFF';
diff --git a/docs/data/base/components/progress/IndeterminateProgress.tsx b/docs/data/base/components/progress/IndeterminateProgress.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { styled, keyframes, css } from '@mui/system';
+import * as BaseProgress from '@base_ui/react/Progress';
+
+export default function IndeterminateProgress() {
+  return (
+    <div className="App">
+      <Progress value={null} aria-labelledby="ProgressLabel">
+        <span className="Progress-label" id="ProgressLabel">
+          Uploading files
+        </span>
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      </Progress>
+    </div>
+  );
+}
+
+const Progress = styled(BaseProgress.Root)`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+`;
+
+const ProgressTrack = styled(BaseProgress.Track)(
+  ({ theme }) => `
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
+    display: flex;
+    overflow: hidden;
+  `,
+);
+
+const indeterminateLoading = keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(20rem);
+  }
+`;
+
+const ProgressIndicator = styled(BaseProgress.Indicator)(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
+    border-radius: inherit;
+
+    &[data-state='indeterminate'] {
+      width: 25%;
+      animation: ${indeterminateLoading} 1.5s infinite ease-in-out;
+      will-change: transform;
+    }
+  `,
+);
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const BLUE400 = '#3399FF';
+const BLUE500 = '#007FFF';
diff --git a/docs/data/base/components/progress/IndeterminateProgress.tsx.preview b/docs/data/base/components/progress/IndeterminateProgress.tsx.preview
@@ -0,0 +1,8 @@
+<Progress value={null} aria-labelledby="ProgressLabel">
+  <span className="Progress-label" id="ProgressLabel">
+    Uploading files
+  </span>
+  <ProgressTrack>
+    <ProgressIndicator />
+  </ProgressTrack>
+</Progress>
diff --git a/docs/data/base/components/progress/RtlProgress.js b/docs/data/base/components/progress/RtlProgress.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import * as BaseProgress from '@base_ui/react/Progress';
+
+export default function RtlProgress() {
+  return (
+    <div className="App">
+      <Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
+        <span className="Progress-label" id="RtlProgressLabel">
+          Uploading files (RTL)
+        </span>
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      </Progress>
+    </div>
+  );
+}
+
+const Progress = styled(BaseProgress.Root)`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+`;
+
+const ProgressTrack = styled(BaseProgress.Track)(
+  ({ theme }) => `
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
+    display: flex;
+    overflow: hidden;
+  `,
+);
+
+const ProgressIndicator = styled(BaseProgress.Indicator)(
+  ({ theme }) => `
+    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
+    border-radius: inherit;
+  `,
+);
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const BLUE400 = '#3399FF';
+const BLUE500 = '#007FFF';
diff --git a/docs/data/base/components/progress/RtlProgress.tsx b/docs/data/base/components/progress/RtlProgress.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import * as BaseProgress from '@base_ui/react/Progress';
+
+export default function RtlProgress() {
+  return (
+    <div className="App">
+      <Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
+        <span className="Progress-label" id="RtlProgressLabel">
+          Uploading files (RTL)
+        </span>
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      </Progress>
+    </div>
+  );
+}
+
+const Progress = styled(BaseProgress.Root)`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+`;
+
+const ProgressTrack = styled(BaseProgress.Track)(
+  ({ theme }) => `
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
+    display: flex;
+    overflow: hidden;
+  `,
+);
+
+const ProgressIndicator = styled(BaseProgress.Indicator)(
+  ({ theme }) => `
+    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
+    border-radius: inherit;
+  `,
+);
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const BLUE400 = '#3399FF';
+const BLUE500 = '#007FFF';
diff --git a/docs/data/base/components/progress/RtlProgress.tsx.preview b/docs/data/base/components/progress/RtlProgress.tsx.preview
@@ -0,0 +1,8 @@
+<Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
+  <span className="Progress-label" id="RtlProgressLabel">
+    Uploading files (RTL)
+  </span>
+  <ProgressTrack>
+    <ProgressIndicator />
+  </ProgressTrack>
+</Progress>
diff --git a/docs/data/base/components/progress/UnstyledProgressIntroduction.js b/docs/data/base/components/progress/UnstyledProgressIntroduction.js
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Progress from '@base_ui/react/Progress';
+
+export default function UnstyledProgressIntroduction() {
+  return (
+    <div className="App">
+      <Progress.Root className="Progress" value={50} aria-labelledby="ProgressLabel">
+        <span className="Progress-label" id="ProgressLabel">
+          Uploading files
+        </span>
+        <Progress.Track className="Progress-track">
+          <Progress.Indicator className="Progress-indicator" />
+        </Progress.Track>
+      </Progress.Root>
+      <Styles />
+    </div>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export function Styles() {
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>{`
+      .App {
+        font-family: system-ui, sans-serif;
+        width: 20rem;
+        padding: 1rem;
+      }
+
+      .Progress {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1rem;
+      }
+
+      .Progress-track {
+        position: relative;
+        width: 100%;
+        height: 4px;
+        border-radius: 9999px;
+        background-color: ${grey[400]};
+        display: flex;
+        overflow: hidden;
+      }
+
+      .Progress-indicator {
+        background-color: ${isDarkMode ? BLUE400 : BLUE500};
+        border-radius: inherit;
+      }
+
+      .Progress-indicator[data-state='indeterminate'] {
+        width: 25%;
+        animation: indeterminateLoading 1.5s infinite ease-in-out;
+        will-change: transform;
+      }
+
+      .Progress-label {
+        cursor: unset;
+        font-weight: bold;
+      }
+
+      @keyframes indeterminateLoading {
+        from {
+          transform: translateX(-100%);
+        }
+
+        to {
+          transform: translateX(20rem);
+        }
+      }
+    `}</style>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const BLUE400 = '#3399FF';
+const BLUE500 = '#007FFF';