remove id, update animation css tokens and cs

.changeset/giant-seas-complain.md

@@ -3,8 +3,10 @@
 ---
 
 - Refactored `Drawer` to use floating-ui and Salt's `Scrim`.
+- Open prop set to false by default
+- Fix to `Floating Components` implementation of focus manager props from Floating UI
 - Added optional `DrawerCloseButton`.
-- Implemented desktop support.
+- Added optional props `disableScrim` and `diableDismiss`
 
 ```tsx
 export const DrawerTemplate = (): ReactElement => {
@@ -25,12 +27,7 @@ export const DrawerTemplate = (): ReactElement => {
   return (
     <>
       <Button onClick={handleRequestOpen}>Open Drawer</Button>
-      <Drawer
-        open={open}
-        onOpenChange={onOpenChange}
-        id="DRAWER_ID"
-        style={{ width: 300 }}
-      >
+      <Drawer open={open} onOpenChange={onOpenChange} style={{ width: 300 }}>
         <DrawerCloseButton onClick={handleClose} />
         <H2>Title</H2>
         <Text>Content of drawer</Text>

packages/core/src/utils/useFloatingUI/useFloatingUI.tsx

@@ -38,7 +38,9 @@ export interface FloatingComponentProps
    */
   focusManagerProps?: Omit<FloatingFocusManagerProps, "children">;
   /**
-   * Position props for the floating component. `top`, `left`, and `position` are optional for components where their floating elements are not positioned relative to a trigger element, i.e. Drawer, Dialog
+   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relatvely to the trigger. 
+   * `width` and `height` are used to define the size of the floating element.
+   *
    */
   top?: number;
   left?: number;

packages/lab/src/drawer/Drawer.css

@@ -32,12 +32,12 @@
 
 /* Styles applied when position = "top" and the component mounts */
 .saltDrawer-top.saltDrawer-enterAnimation {
-  animation: slide-in-bottom var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-slide-in-bottom);
 }
 
 /* Styles applied when position = "top" and the component unmounts */
 .saltDrawer-top.saltDrawer-exitAnimation {
-  animation: slide-out-bottom var(--salt-duration-perceptible) ease-in-out both;
+    animation: var(--salt-animation-slide-out-bottom)
 }
 
 /* Styles applied when position = "right" */
@@ -49,12 +49,12 @@
 
 /* Styles applied when position = "right" and the component mounts */
 .saltDrawer-right.saltDrawer-enterAnimation {
-  animation: slide-in-right var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-slide-in-right);
 }
 
 /* Styles applied when position = "right" and the component unmounts */
 .saltDrawer-right.saltDrawer-exitAnimation {
-  animation: slide-out-right var(--salt-duration-perceptible) ease-in-out both;
+  animation: var(--salt-animation-slide-out-right)
 }
 
 /* Styles applied when position = "left" */
@@ -66,12 +66,12 @@
 
 /* Styles applied when position = "left" and the component mounts */
 .saltDrawer-left.saltDrawer-enterAnimation {
-  animation: slide-in-left var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-slide-in-left);
 }
 
 /* Styles applied when position = "left" and the component unmounts */
 .saltDrawer-left.saltDrawer-exitAnimation {
-  animation: slide-out-left var(--salt-duration-perceptible) ease-in-out both;
+  animation: var(--salt-animation-slide-out-left);
 }
 
 /* Styles applied when position = "bottom" */
@@ -84,10 +84,10 @@
 
 /* Styles applied when position = "bottom" and the component mounts */
 .saltDrawer-bottom.saltDrawer-enterAnimation {
-  animation: slide-in-top var(--salt-duration-perceptible) ease-in-out;
+ animation: var(--salt-animation-slide-in-top);
 }
 
 /* Styles applied when position = "bottom" and the component unmounts */
 .saltDrawer-bottom.saltDrawer-exitAnimation {
-  animation: slide-out-top var(--salt-duration-perceptible) ease-in-out both;
+animation: var(--salt-animation-slide-out-top);
 }

site/src/examples/drawer/BottomDrawer.tsx

@@ -120,7 +120,6 @@ const defaultData = [
 export const BottomDrawer = (): ReactElement => {
   const [open, setOpen] = useState(false);
   const { containerProps, agGridProps } = useAgGridHelpers();
-  const id = "bottom-drawer";
 
   const handleRequestOpen = () => {
     setOpen(true);
@@ -142,13 +141,9 @@ export const BottomDrawer = (): ReactElement => {
         onOpenChange={onOpenChange}
         position="bottom"
         style={{ height: "max-content" }}
-        id={id}
       >
         <DrawerCloseButton onClick={handleClose} />
-        <H2
-          id={`${id}-header`}
-          style={{ paddingBottom: "var(--salt-spacing-300)" }}
-        >
+        <H2 style={{ paddingBottom: "var(--salt-spacing-300)" }}>
           Marginal Tiering
         </H2>
         <div

site/src/examples/drawer/Default.tsx

@@ -13,7 +13,6 @@ export const Default = (): ReactElement => {
       <Drawer
         open={openPrimary}
         onOpenChange={(newOpen) => setOpenPrimary(newOpen)}
-        id="primary-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenPrimary(false)} />
@@ -25,7 +24,6 @@ export const Default = (): ReactElement => {
         open={openSecondary}
         onOpenChange={(newOpen) => setOpenSecondary(newOpen)}
         variant="secondary"
-        id="secondary-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenSecondary(false)} />

site/src/examples/drawer/DisableScrim.tsx

@@ -12,7 +12,6 @@ export const DisableScrim = (): ReactElement => {
       <Drawer
         open={open}
         onOpenChange={(newOpen) => setOpen(newOpen)}
-        id="primary-drawer"
         style={{ width: 200 }}
         disableScrim
       >

site/src/examples/drawer/MandatoryAction.tsx

@@ -17,7 +17,6 @@ export const MandatoryAction = (): ReactElement => {
   const [value, setValue] = useState("");
 
   const postcodes = ["05011", "01050", "03040", "11050"];
-  const id = "right-drawer";
 
   const handleRequestOpen = () => {
     setOpen(true);
@@ -51,11 +50,10 @@ export const MandatoryAction = (): ReactElement => {
         onOpenChange={onOpenChange}
         position="right"
         style={{ width: 500 }}
-        id={id}
         disableDismiss
       >
         <StackLayout>
-          <H2 id={`${id}-header`}>Add your delivery details</H2>
+          <H2>Add your delivery details</H2>
           <FormField>
             <FormFieldLabel>House no.</FormFieldLabel>
             <Input />

site/src/examples/drawer/RightDrawer.tsx

@@ -22,7 +22,6 @@ const FormFieldExample = () => (
 
 export const RightDrawer = (): ReactElement => {
   const [open, setOpen] = useState(false);
-  const id = "right-drawer";
 
   const handleRequestOpen = () => {
     setOpen(true);
@@ -43,12 +42,11 @@ export const RightDrawer = (): ReactElement => {
         open={open}
         onOpenChange={onOpenChange}
         position="right"
-        id={id}
         style={{ width: 500 }}
       >
         <StackLayout>
           <DrawerCloseButton onClick={handleClose} />
-          <H2 id={`${id}-header`}>Section Title</H2>
+          <H2>Section Title</H2>
           <Text>
             Incididunt adipisicing deserunt nostrud ullamco consequat
             consectetur magna id do irure labore fugiat. Eiusmod pariatur

site/src/examples/drawer/TopDrawer.tsx

@@ -23,7 +23,6 @@ const FormFieldExample = () => (
 
 export const TopDrawer = (): ReactElement => {
   const [open, setOpen] = useState(false);
-  const id = "top-drawer";
 
   const handleRequestOpen = () => {
     setOpen(true);
@@ -40,10 +39,10 @@ export const TopDrawer = (): ReactElement => {
   return (
     <>
       <Button onClick={handleRequestOpen}>Open Top Drawer</Button>
-      <Drawer open={open} onOpenChange={onOpenChange} position="top" id={id}>
+      <Drawer open={open} onOpenChange={onOpenChange} position="top">
         <StackLayout>
           <DrawerCloseButton onClick={handleClose} />
-          <H2 id={`${id}-header`}>Section title</H2>
+          <H2>Section title</H2>
           <Text>
             Incididunt adipisicing deserunt nostrud ullamco consequat
             consectetur magna id do irure labore fugiat. Eiusmod pariatur