Merge remote-tracking branch 'upstream/master' into form-types

mui · Oct 7, 2024 · 2dceb57 · 2dceb57
2 parents 267780c + 37783b0
commit 2dceb57
Show file tree

Hide file tree

Showing 59 changed files with 800 additions and 1,018 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,83 @@
 # Versions
 
+## v1.0.0-alpha.3
+
+_Oct 7, 2024_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⭐ We added several new components: CheckboxGroup, RadioGroup, Form, Separator
+- ⭐ Menu has new parts: CheckboxItem, RadioItem, and Group
+
+### `@base_ui/[email protected]`
+
+- [AlertDialog] Move types to namespaces (#591) @michaldudak
+- [Checkbox] Modernize implementation (#594) @atomiks
+- [CheckboxGroup] Implement components and hooks (#458) @atomiks
+- [Collapsible] Add Collapsible components and hooks (#481) @mj12albert
+- [Dialog] Move types to namespaces (#697) @michaldudak
+- [Dialog][Collapsible] Fix style prop merging (#641) @michaldudak
+- [Form] Create new `Form` component (#589) @atomiks
+- [Menu] CheckboxItem component (#533) @michaldudak
+- [Menu] Do not select an item when space is pressed during typeahead (#542) @michaldudak
+- [Menu] Fix custom anchor positioning (#609) @michaldudak
+- [Menu] Group and Separator components (#535) @michaldudak
+- [Menu] Increase test timeout (#592) @michaldudak
+- [Menu] RadioItem component (#534) @michaldudak
+- [Menu] Remove the unused prop (#647) @michaldudak
+- [Menu] Remove wrong default value from docs (#549) @sai6855
+- [Menu][Popover][PreviewCard][Tooltip] Add default value as `clippingAncestors` to collisionBoundary prop (#580) @sai6855
+- [NumberField] Modernize implementation (#590) @atomiks
+- [Popover] Modernize implementation (#607) @atomiks
+- [PreviewCard] Modernize implementation (#626) @atomiks
+- [RadioGroup] Create new `RadioGroup` component (#487) @atomiks
+- [Slider] Fix Home / End regression (#526) @sai6855
+- [Tooltip] Modernize implementation (#606) @atomiks
+- [useButton] Modernize implementation (#643) @michaldudak
+- [useScrollLock] Avoid scrollbar layout shift issues (#604) @atomiks
+
+### Docs
+
+- [docs] Fix 301 redirections in docs @oliviertassinari
+- [docs] Make the readme specific to @base_ui/react (#633) @michaldudak
+- [docs] Copy vale-action.yml from main repo @oliviertassinari
+- [docs] Fix 301 to chromium (#636) @oliviertassinari
+- [docs] Avoid dead links in demos (#610) @oliviertassinari
+- [docs] Fix rel attribute on edit GitHub links (#614) @oliviertassinari
+- [docs] Fix pnpm docs:link-check script (#552) @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix outdated link to support page @oliviertassinari
+- [docs] Clarify contribution guide references @oliviertassinari
+
+### Core
+
+- [code-infra] Remove custom playwright installation steps (#646) @Janpot
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [core] React 19 compatibility (#605) @michaldudak
+- [core] Reference `ownerDocument` (#660) @atomiks
+- [core] Remove 'use client' from index files (#331) @michaldudak
+- [core] Remove /.yarn (#596) @oliviertassinari
+- [core] Remove Material UI dependency (#585) @michaldudak
+- [core] Remove the legacy components from the repo (#584) @michaldudak
+- [core] Rename positionStrategy to positionMethod (#704) @michaldudak
+- [docs-infra] Fix double // (#613) @oliviertassinari
+- [docs-infra] Strengthen CSP (#595) @oliviertassinari
+- [infra] Adds reusable workflow for closing message on issues (#598) @michelengelen
+- [infra] Adds reusable workflow for issue cleanup (#597) @michelengelen
+- [infra] Fix line break in Stack Overflow message @oliviertassinari
+- [test] Fix tests on Safari (#546) @michaldudak
+- [test] Fix the test_types_next CI job (#703) @michaldudak
+- [test] Improve visual screenshot canva (#708)
+- [test] Point Istanbul to correct URL (#657) @sai6855
+- [test] Run Browserstack tests on master only (#578) @michaldudak
+- [test] Use `waitFor` instead of fixed timeout in tests (#632) @michaldudak
+- [website] Improve utm_source strategy @oliviertassinari
+- [website] Modernize the Base UI website (#538) @michaldudak
+
+All contributors of this release in alphabetical order: @atomiks, @Janpot, @michaldudak, @michelengelen, @mj12albert, @oliviertassinari, @sai6855
+
 ## v1.0.0-alpha.2
 
 _Aug 19, 2024_

diff --git a/docs/data/api/switch-root.json b/docs/data/api/switch-root.json
@@ -4,7 +4,6 @@
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
-    "id": { "type": { "name": "string" } },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "name": { "type": { "name": "string" } },
     "onCheckedChange": {

diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
@@ -1,148 +1,39 @@
 'use client';
 import * as React from 'react';
 import * as Switch from '@base_ui/react/Switch';
-import { useTheme } from '@mui/system';
+import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
   return (
     <div>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, on by default"
         defaultChecked
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, off by default"
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, on by default"
         defaultChecked
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, off by default"
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
-      <Styles />
     </div>
   );
 }
-
-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: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomSwitchIntroduction {
-        width: 38px;
-        height: 24px;
-        margin: 10px;
-        padding: 0;
-        box-sizing: border-box;
-        background: ${isDarkMode ? grey[900] : grey[50]};
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        border-radius: 24px;
-        display: inline-block;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: inset 0px 1px 1px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-        };
-      }
-
-      .CustomSwitchIntroduction[data-disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .CustomSwitchIntroduction:hover:not([data-disabled]) {
-        background: ${isDarkMode ? grey[800] : grey[100]};
-        border-color: ${isDarkMode ? grey[600] : grey[300]};
-      }
-    
-      .CustomSwitchIntroduction:focus-visible {
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[700] : cyan[200]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"] {
-        border: none;
-        background: ${cyan[500]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"]:not([data-disabled]):hover {
-        background: ${cyan[700]};
-      }
-
-
-      .CustomSwitchIntroduction-thumb {
-        box-sizing: border-box;
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        display: block;
-        width: 16px;
-        height: 16px;
-        left: 4px;
-        border-radius: 16px;
-        background-color: #FFF;
-        position: relative;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: 0px 1px 2px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
-        };
-      }
-
-      .CustomSwitchIntroduction-thumb[data-state="checked"] {
-        left: 18px;
-        background-color: #fff;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-      }
-    `}
-    </style>
-  );
-}