chore: adds positioning move examples

Author: itsdouges

packages/yubaba-common/src/createMoveExamples/index.tsx

@@ -39,6 +39,72 @@ export const createMoveExamples = (options: { useDistinctEnd: boolean; namePrefi
     </Common.Toggler>
   ),
 
+  WithAbsolutePositioning: () => (
+    <Common.Toggler>
+      {({ shown, toggle }) => (
+        <div>
+          <Styled.Padding />
+          {!shown ? (
+            <Baba name={`${options.namePrefix}-anim`} key={`${options.namePrefix}-1`}>
+              <Animation>
+                {({ ref, ...props }) => (
+                  <Styled.RelativeListItem innerRef={ref} onClick={() => toggle()} {...props} />
+                )}
+              </Animation>
+            </Baba>
+          ) : (
+            <Baba name={`${options.namePrefix}-anim`} key={`${options.namePrefix}-2`}>
+              <Animation>
+                {({ ref, ...props }) => (
+                  <Styled.AbsoluteListItem
+                    innerRef={ref}
+                    onClick={() => toggle()}
+                    alternate={options.useDistinctEnd}
+                    {...props}
+                  />
+                )}
+              </Animation>
+            </Baba>
+          )}
+          <Styled.Padding />
+        </div>
+      )}
+    </Common.Toggler>
+  ),
+
+  WithFixedPositioning: () => (
+    <Common.Toggler>
+      {({ shown, toggle }) => (
+        <div>
+          <Styled.Padding />
+          {!shown ? (
+            <Baba name={`${options.namePrefix}-anim`} key={`${options.namePrefix}-1`}>
+              <Animation>
+                {({ ref, ...props }) => (
+                  <Styled.RelativeListItem innerRef={ref} onClick={() => toggle()} {...props} />
+                )}
+              </Animation>
+            </Baba>
+          ) : (
+            <Baba name={`${options.namePrefix}-anim`} key={`${options.namePrefix}-2`}>
+              <Animation>
+                {({ ref, ...props }) => (
+                  <Styled.FixedListItem
+                    innerRef={ref}
+                    onClick={() => toggle()}
+                    alternate={options.useDistinctEnd}
+                    {...props}
+                  />
+                )}
+              </Animation>
+            </Baba>
+          )}
+          <Styled.Padding />
+        </div>
+      )}
+    </Common.Toggler>
+  ),
+
   WithMargin: () => (
     <Common.Toggler>
       {({ shown, toggle }) => (

packages/yubaba-common/src/createMoveExamples/styled.tsx

@@ -61,6 +61,20 @@ export const ListItem = styled.button<ListItemProps>`
       : ''};
 `;
 
+export const RelativeListItem = styled(ListItem)`
+  position: relative;
+`;
+
+export const AbsoluteListItem = styled(ListItem)`
+  position: absolute;
+  bottom: 0;
+`;
+
+export const FixedListItem = styled(ListItem)`
+  position: fixed;
+  bottom: 0;
+`;
+
 export const ListItemContainer = styled.div`
   display: flex;
   align-items: center;