@vygruppen/spor-react 12.14.1 → 12.14.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.14.1",
+  "version": "12.14.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.2.0",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "4.2.1"
+    "@vygruppen/spor-icon-react": "4.2.1",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.2.3",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.2.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/button/ResponsiveButton.tsx

@@ -0,0 +1,27 @@
+import { Button, ButtonProps } from "./Button";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+/**
+ * For internal use
+ */
+
+type Props = IconButtonProps &
+  Omit<ButtonProps, "leftIcon" | "rightIcon"> & {
+    label: string;
+  };
+
+export const ResponsiveButton = ({ label, icon, ...props }: Props) => {
+  return (
+    <>
+      <Button display={["none", "flex"]} leftIcon={icon} {...props}>
+        {label}
+      </Button>
+      <IconButton
+        display={["flex", "none"]}
+        aria-label={label}
+        icon={icon}
+        {...props}
+      />
+    </>
+  );
+};

package/src/dialog/Drawer.tsx

@@ -4,8 +4,6 @@ import {
   Box,
   createContext,
   Drawer as ChakraDrawer,
-  Grid,
-  GridItem,
   Portal,
   useDialogContext,
 } from "@chakra-ui/react";
@@ -16,7 +14,9 @@ import {
 import { forwardRef } from "react";
 import { useSwipeable } from "react-swipeable";
 
-import { Button, CloseButton } from "../button";
+import { ResponsiveButton } from "@/button/ResponsiveButton";
+
+import { CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
 import {
   DrawerContentProps,
@@ -116,9 +116,11 @@ export const DrawerCloseTrigger = forwardRef<
   return (
     <ChakraDrawer.CloseTrigger ref={ref} {...props} asChild>
       {size === "full" ? (
-        <Button variant="ghost" leftIcon={<CloseFill24Icon />}>
-          {t(texts.close)}
-        </Button>
+        <ResponsiveButton
+          variant="ghost"
+          icon={<CloseFill24Icon />}
+          label={t(texts.close)}
+        />
       ) : (
         <CloseButton size="md" />
       )}
@@ -132,10 +134,12 @@ export const DrawerBackTrigger = forwardRef<
 >((props, ref) => {
   const { t } = useTranslation();
   return (
-    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref} top="0">
-      <Button variant="ghost" leftIcon={<ArrowLeftFill24Icon />}>
-        {t(texts.back)}
-      </Button>
+    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref}>
+      <ResponsiveButton
+        variant="ghost"
+        icon={<ArrowLeftFill24Icon />}
+        label={t(texts.back)}
+      />
     </ChakraDrawer.CloseTrigger>
   );
 });
@@ -147,20 +151,10 @@ export const DrawerFullScreenHeader = forwardRef<
 >((props, ref) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (
-    <ChakraDrawer.Header {...props} ref={ref} asChild>
-      <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
-        <GridItem width="full" alignSelf="center">
-          {backTrigger && <DrawerBackTrigger />}
-        </GridItem>
-        <GridItem width="full" alignSelf="end" asChild>
-          {children && <DrawerTitle>{children}</DrawerTitle>}
-        </GridItem>
-        {closeTrigger && (
-          <GridItem width="full" alignSelf="end">
-            <DrawerCloseTrigger justifySelf="end" top="0" />
-          </GridItem>
-        )}
-      </Grid>
+    <ChakraDrawer.Header {...props} ref={ref}>
+      <Box>{backTrigger && <DrawerBackTrigger />}</Box>
+      {<DrawerTitle>{children}</DrawerTitle>}
+      <Box> {closeTrigger && <DrawerCloseTrigger />}</Box>
     </ChakraDrawer.Header>
   );
 });

package/src/input/Switch.tsx

@@ -78,7 +78,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <ChakraSwitch.Control css={styles.control}>
             <ChakraSwitch.Thumb />
           </ChakraSwitch.Control>
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+          {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
         </ChakraSwitch.Root>
       </Field>
     );

package/src/theme/slot-recipes/drawer.ts

@@ -59,7 +59,8 @@ export const drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: ["3", null, null, "5"],
+      paddingX: ["2", null, null, "5"],
+      gap: "1",
       paddingBottom: "1",
     },
     body: {