@simplybusiness/mobius 4.0.0-beta.11 → 4.0.0-beta.13

package/src/components/Button/Button.stories.tsx

@@ -64,7 +64,7 @@ export const Normal: Meta<typeof Button> = {
   args: {
     children: "Confirm",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,
@@ -76,7 +76,7 @@ export const Secondary: Meta<typeof Button> = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "secondary",
-    size: "medium",
+    size: "md",
     children: "Secondary Button",
     isDisabled: false,
     isLoading: false,
@@ -89,7 +89,7 @@ export const Ghost: Meta<typeof Button> = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "ghost",
-    size: "medium",
+    size: "md",
     children: "Ghost Button",
     isDisabled: false,
     isLoading: false,
@@ -102,7 +102,7 @@ export const Basic: Meta<typeof Button> = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "basic",
-    size: "medium",
+    size: "md",
     children: "Basic Button",
     isDisabled: false,
     isLoading: false,
@@ -116,7 +116,7 @@ export const Large: Meta<typeof Button> = {
   args: {
     children: "Large Button",
     variant: "primary",
-    size: "large",
+    size: "lg",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,
@@ -130,7 +130,7 @@ export const Link: Meta<typeof Button> = {
     children: "Link Button",
     elementType: "a",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,
@@ -145,7 +145,7 @@ export const Loading: Meta<typeof Button> = {
   args: {
     children: "Loading",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: true,
     isSuccess: false,
@@ -158,7 +158,7 @@ export const Success: Meta<typeof Button> = {
   args: {
     children: "Success",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: true,
@@ -171,7 +171,7 @@ export const Disabled: Meta<typeof Button> = {
   args: {
     children: "Disabled",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: true,
     isLoading: false,
     isSuccess: false,
@@ -193,7 +193,7 @@ export const WithIconOnTheLeft: Meta<typeof Button> = {
       </>
     ),
     variant: "secondary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,
@@ -215,7 +215,7 @@ export const WithIconOnTheRight: Meta<typeof Button> = {
       </>
     ),
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,
@@ -233,7 +233,7 @@ export const Themed: Meta<typeof Button> = {
   args: {
     children: "Confirm",
     variant: "primary",
-    size: "medium",
+    size: "md",
     isDisabled: false,
     isLoading: false,
     isSuccess: false,

package/src/components/Button/Button.story.styles.css

@@ -4,5 +4,5 @@
 
 .button-example-with-icon.mobius\/Button {
   display: inline-flex;
-  gap: var(--size-20);
+  gap: var(--size-xs);
 }

package/src/components/Button/Button.tsx

@@ -19,7 +19,7 @@ export type Variant =
   | "inverse-ghost"
   | "basic";
 
-export type Size = "small" | "medium" | "large";
+export type Size = "sm" | "md" | "lg";
 
 export interface ButtonProps
   extends UseButtonProps,
@@ -57,7 +57,7 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
       isLoading,
       isSuccess,
       variant = "primary",
-      size = "medium",
+      size = "md",
       icon,
       iconPosition,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/components/Checkbox/Checkbox.mdx

@@ -59,7 +59,10 @@ The `onChange` prop can be used to listen to changes of the selected state of th
 
 ## Props
 
-<ArgTypes of={Checkbox} />
+<ArgTypes
+  of={Checkbox}
+  exclude={["groupDisabled", "selected", "setSelected"]}
+/>
 
 ## Component HTML Structure and Class names
 

package/src/components/Drawer/Drawer.tsx

@@ -6,6 +6,7 @@
 import classNames from "classnames/dedupe";
 import {
   Children,
+  ReactEventHandler,
   ReactNode,
   cloneElement,
   isValidElement,
@@ -13,7 +14,6 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { useOnClickOutside } from "../../hooks";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { VisuallyHidden } from "../VisuallyHidden";
@@ -46,8 +46,8 @@ const Drawer = ({
   children,
 }: DrawerProps) => {
   const hasOpened = useRef<boolean>(false);
-  const ref = useRef<HTMLDialogElement>(null);
-  const dialog = ref.current as HTMLDialogElement;
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const dialog = modalRef.current as HTMLDialogElement;
 
   // Fire onOpen once
   if (onOpen && !hasOpened.current) {
@@ -58,43 +58,31 @@ const Drawer = ({
   useBodyScrollLock({ enabled: isOpen });
 
   // Add close handler, to enable closing animations
-  const handleClose = useCallback(() => {
-    const doClose = () => {
-      dialog.close();
-      onClose?.();
-    };
-
-    // Delay close to allow exit animation
-    dialog.classList.add("close");
-    dialog.addEventListener(
-      "animationend",
-      () => {
-        dialog.classList.remove("close");
-        doClose();
-      },
-      { once: true },
-    );
-  }, [onClose, dialog]);
-
-  // Close modal if backdrop is clicked
-  dialog?.addEventListener("click", event => {
-    const rect = dialog.getBoundingClientRect();
-    const isInDialog =
-      rect.top <= event.clientY &&
-      event.clientY <= rect.top + rect.height &&
-      rect.left <= event.clientX &&
-      event.clientX <= rect.left + rect.width;
-    if (!isInDialog) {
-      handleClose();
-    }
-  });
-
-  // Close modal if Escape button is pressed
-  useOnClickOutside(ref, () => {
-    if (ref.current && isOpen) {
-      handleClose();
-    }
-  });
+  const handleClose: ReactEventHandler<HTMLDialogElement> = useCallback(
+    event => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const doClose = () => {
+          dialog.close();
+          onClose?.();
+        };
+
+        // Delay close to allow exit animation
+        dialog.classList.add("close");
+        dialog.addEventListener(
+          "animationend",
+          () => {
+            dialog.classList.remove("close");
+            doClose();
+          },
+          { once: true },
+        );
+      }
+    },
+    [onClose, dialog],
+  );
 
   const modalClasses = classNames(
     "mobius",
@@ -109,14 +97,14 @@ const Drawer = ({
       if (!supportsDialog() && typeof window !== "undefined") {
         // eslint-disable-next-line import/no-extraneous-dependencies
         const { default: dialogPolyfill } = await import("dialog-polyfill");
-        dialogPolyfill.registerDialog(ref.current as HTMLDialogElement);
+        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);
       }
 
       if (isOpen) {
-        ref.current?.showModal();
+        modalRef.current?.showModal();
         onOpen?.();
-      } else if (ref.current?.open) {
-        ref.current?.close();
+      } else if (modalRef.current?.open) {
+        modalRef.current?.close();
       }
     }
 
@@ -125,8 +113,8 @@ const Drawer = ({
 
   return (
     <dialog
-      ref={ref}
-      onCancel={onClose}
+      ref={modalRef}
+      onCancel={handleClose}
       className={modalClasses}
       aria-describedby="screen-reader-announce"
     >

package/src/components/Flex/Flex.mdx

@@ -6,17 +6,12 @@ import * as FlexStories from "./Flex.stories";
 
 export const sizeOptions = [
   "",
-  "var(--size-0)",
-  "var(--size-10)",
-  "var(--size-20)",
-  "var(--size-30)",
-  "var(--size-40)",
-  "var(--size-50)",
-  "var(--size-60)",
-  "var(--size-70)",
-  "var(--size-80)",
-  "var(--size-90)",
-  "var(--size-100)",
+  "var(--size-xs)",
+  "var(--size-sm)",
+  "var(--size-md)",
+  "var(--size-lg)",
+  "var(--size-xl)",
+  "var(--size-xxl)",
 ];
 
 <Meta of={FlexStories} />
@@ -59,18 +54,18 @@ export const Card = ({ children, style, ...props }) => (
 
 ### Flex Layout
 
-<Flex flexDirection="column" gap="var(--size-10)">
+<Flex flexDirection="column" gap="var(--size-xs)">
   <Flex
     alignItems="center"
     style={{
       backgroundColor: "var(--color-background-subtle)",
-      height: "var(--size-50)",
+      height: "var(--size-lg)",
     }}
   >
     Header
   </Flex>
 
-  <Flex flexDirection="row" gap={4} style={{ height: "var(--size-80)" }}>
+  <Flex flexDirection="row" gap={4} style={{ height: "128px" }}>
     <Flex style={{ backgroundColor: "var(--color-background)" }} flex={2}>
       Main
     </Flex>
@@ -83,7 +78,7 @@ export const Card = ({ children, style, ...props }) => (
     alignItems="center"
     style={{
       backgroundColor: "var(--color-background-subtle)",
-      height: "var(--size-50)",
+      height: "var(--size-lg)",
     }}
   >
     Footer
@@ -91,17 +86,17 @@ export const Card = ({ children, style, ...props }) => (
 </Flex>
 
 ```jsx
-<Flex flexDirection="column" gap="var(--size-10)">
+<Flex flexDirection="column" gap="var(--size-xs)">
   <Flex
     alignItems="center"
     style={{
       backgroundColor: "var(--color-background-subtle)",
-      height: "var(--size-50)",
+      height: "var(--size-lg)",
     }}
   >
     Header
   </Flex>
-  <Flex flexDirection="row" gap={4} style={{ height: "var(--size-80)" }}>
+  <Flex flexDirection="row" gap={4} style={{ height: "128px" }}>
     <Flex flex={2}>Main</Flex>
     <Flex
       style={{ backgroundColor: "var(--color-background-muted)" }}
@@ -112,7 +107,7 @@ export const Card = ({ children, style, ...props }) => (
     alignItems="center"
     style={{
       backgroundColor: "var(--color-background-subtle)",
-      height: "var(--size-50)",
+      height: "var(--size-lg)",
     }}
   >
     Footer
@@ -124,7 +119,7 @@ export const Card = ({ children, style, ...props }) => (
 
 You can use the `flexWrap` prop to wrap the elements inside the `Flex` container.
 
-<Flex flexWrap="wrap" gap="var(--size-20)">
+<Flex flexWrap="wrap" gap="var(--size-xs)">
   {Array.from({ length: 60 }).map((_, i) => (
     <Card
       key={i}
@@ -158,7 +153,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Flex flexWrap="wrap" gap="var(--size-20)">
+<Flex flexWrap="wrap" gap="var(--size-xs)">
   {Array.from({ length: 60 }).map((_, i) => (
     <Card key={i} />
   ))}
@@ -194,7 +189,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Flex flexDirection="row" gap="var(--size-20)">
+<Flex flexDirection="row" gap="var(--size-xs)">
   <Card>Item</Card>
   <Card>Item</Card>
   <Card>Item</Card>
@@ -226,7 +221,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Flex flexDirection="column" gap="var(--size-20)">
+<Flex flexDirection="column" gap="var(--size-xs)">
   <Card>Item</Card>
   <Card>Item</Card>
   <Card>Item</Card>

package/src/components/Flex/Flex.stories.tsx

@@ -7,17 +7,12 @@ import { FlexProps } from "./types";
 
 const sizeOptions = [
   "",
-  "var(--size-0)",
-  "var(--size-10)",
-  "var(--size-20)",
-  "var(--size-30)",
-  "var(--size-40)",
-  "var(--size-50)",
-  "var(--size-60)",
-  "var(--size-70)",
-  "var(--size-80)",
-  "var(--size-90)",
-  "var(--size-100)",
+  "var(--size-xs)",
+  "var(--size-sm)",
+  "var(--size-md)",
+  "var(--size-lg)",
+  "var(--size-xl)",
+  "var(--size-xxl)",
 ];
 
 type CardProps = {
@@ -153,7 +148,7 @@ export const RowLayout: Meta<typeof Flex> = {
     justifyContent: "normal",
     alignItems: "stretch",
     alignContent: "flex-start",
-    gap: "var(--size-20)",
+    gap: "var(--size-xs)",
     rowGap: "",
     columnGap: "",
   },
@@ -175,7 +170,7 @@ export const ColumnLayout: Meta<typeof Flex> = {
     justifyContent: "normal",
     alignItems: "stretch",
     alignContent: "normal",
-    gap: "var(--size-20)",
+    gap: "var(--size-xs)",
     rowGap: "",
     columnGap: "",
   },

package/src/components/Grid/Grid.mdx

@@ -8,17 +8,12 @@ import * as GridStories from "./Grid.stories";
 
 export const sizeOptions = [
   "",
-  "size-0",
-  "size-10",
-  "size-20",
-  "size-30",
-  "size-40",
-  "size-50",
-  "size-60",
-  "size-70",
-  "size-80",
-  "size-90",
-  "size-100",
+  "size-xs",
+  "size-s",
+  "size-m",
+  "size-l",
+  "size-xl",
+  "size-xxl",
 ];
 
 <Meta of={GridStories} />
@@ -61,7 +56,7 @@ export const Card = ({ children, ...props }) => (
 
 Different items can have different widths. This is especially useful when creating layouts with sidebars.
 
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <Grid.Item span={12}>
     <Card>span=12</Card>
   </Grid.Item>
@@ -121,7 +116,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <Grid.Item span={12}>
     <Card>span=12</Card>
   </Grid.Item>
@@ -189,7 +184,7 @@ export const Square = ({ children, ...props }) => (
 ```jsx
 import { Grid } from "@simplybusiness/mobius";
 
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <Grid.Item span={4}>
     <Square>1</Square>
   </Grid.Item>
@@ -244,7 +239,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <Grid.Item span={12}>
     <Card>span=12</Card>
   </Grid.Item>
@@ -309,7 +304,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Grid columns={8} gap="size-20">
+<Grid columns={8} gap="size-xs">
   <Card columns={8}>span=1</Card>
   <Card columns={8}>span=1</Card>
   <Card columns={8}>span=1</Card>
@@ -344,7 +339,7 @@ const Card = ({ children, ...props }) => (
   </Box>
 );
 
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <Grid.Item xs={12} sm={6} md={2} lg={8} xl={12} xxl={4}>
     <Card>xs=12 sm=6 md=2 lg=8 xl=12 xxl=4</Card>
   </Grid.Item>
@@ -392,7 +387,7 @@ const AlignSquare = ({ children, ...props }) => (
     {children}
   </Box>
 );
-<Grid gap="size-20">
+<Grid gap="size-xs">
   <AlignSquareItem span={4} alignSelf="center" justifySelf="end">
     <AlignSquare>1</AlignSquare>
   </AlignSquareItem>

package/src/components/Grid/Grid.stories.tsx

@@ -8,17 +8,12 @@ import { GridItem } from "./Item";
 
 const sizeOptions = [
   "",
-  "size-0",
-  "size-10",
-  "size-20",
-  "size-30",
-  "size-40",
-  "size-50",
-  "size-60",
-  "size-70",
-  "size-80",
-  "size-90",
-  "size-100",
+  "size-xs",
+  "size-s",
+  "size-m",
+  "size-l",
+  "size-xl",
+  "size-xxl",
 ];
 
 type SharedProps = {
@@ -159,7 +154,7 @@ export const AlignmentProperties: Meta<typeof Grid> = {
   ),
   args: {
     columns: 12,
-    gap: "size-20",
+    gap: "size-xs",
     rowGap: "",
     columnGap: "",
     alignItems: "stretch",
@@ -214,7 +209,7 @@ export const Normal: Meta<typeof Grid> = {
   ),
   args: {
     columns: 12,
-    gap: "size-20",
+    gap: "size-xs",
     rowGap: "",
     columnGap: "",
     alignItems: "stretch",
@@ -233,7 +228,7 @@ export const EightColumns: Meta<typeof Grid> = {
   ),
   args: {
     columns: 8,
-    gap: "size-20",
+    gap: "size-xs",
     alignItems: "stretch",
     justifyItems: "stretch",
     className: "grid-example-eight-columns",
@@ -258,7 +253,7 @@ export const Responsive: Meta<typeof GridItem> = {
       .join(" ");
 
     return (
-      <Grid gap="size-20" alignItems="stretch" justifyItems="stretch">
+      <Grid gap="size-xs" alignItems="stretch" justifyItems="stretch">
         <Grid.Item {...args}>
           <Card>{allArgs}</Card>
         </Grid.Item>
@@ -302,7 +297,7 @@ export const ItemPositioning: Meta<typeof GridItem> = {
   render: (args: GridItemProps) => (
     <Grid
       columns={12}
-      gap="size-20"
+      gap="size-xs"
       alignItems="stretch"
       justifyItems="stretch"
       className="grid-example-fixed-size-grid"

package/src/components/Icon/Icon.stories.tsx

@@ -15,7 +15,7 @@ const defaultArgs = {
   spin: false,
   spinReverse: false,
   fixedWidth: false,
-  size: "1x",
+  size: "xs",
 } as const;
 
 const home = {

package/src/components/Icon/Icon.tsx

@@ -22,9 +22,9 @@ export function Icon({
     "mobius",
     "mobius/Icon",
     `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
     className,
     {
-      [`${ICON_PREFIX}-${size}`]: size,
       [`${ICON_PREFIX}-fw`]: fixedWidth,
       [`${ICON_PREFIX}-spin`]: spin || spinReverse,
       [`${ICON_PREFIX}-spin-reverse`]: spinReverse,

package/src/components/Icon/types.ts

@@ -1,23 +1,7 @@
 import { Ref } from "react";
 import { IconDefinition } from "../../types/icon";
 
-export type IconSizeProp =
-  | "2xs"
-  | "xs"
-  | "sm"
-  | "lg"
-  | "xl"
-  | "2xl"
-  | "1x"
-  | "2x"
-  | "3x"
-  | "4x"
-  | "5x"
-  | "6x"
-  | "7x"
-  | "8x"
-  | "9x"
-  | "10x";
+export type IconSizeProp = "xs" | "sm" | "md" | "lg";
 
 export interface IconProps {
   icon?: IconDefinition;

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -51,7 +51,7 @@ export const Normal: Meta<typeof LinkButton> = {
     href: "https://www.google.com",
     to: "",
     title: "",
-    size: "medium",
+    size: "md",
     download: false,
     isDisabled: false,
     isSuccess: false,