@dmsi/wedgekit-react 0.0.500 → 0.0.502

package/src/components/MobileDataGrid/MobileDataGridCard/index.tsx

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import { MobileDataGridColumn } from "./MobileDataGridColumn";
 import { Subheader } from "../../Subheader";
 import { RowActions } from "../types";
+import { layoutGroupGap, layoutPaddingX, paddingYUsingLayoutGroupGap } from "../../../classNames";
 
 export function MobileDataGridCard<T extends Record<string, unknown>>({
   renderLink,
@@ -32,8 +33,12 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
       id={id ? `${id}-card-${getId(data)}` : undefined}
       data-testid={testid ? `${testid}-card-${getId(data)}` : undefined}
       className={clsx(
+        "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
+        layoutGroupGap,
+        layoutPaddingX,
+        paddingYUsingLayoutGroupGap
       )}
       onClick={() => openRowDetail(data)}
     >
@@ -44,6 +49,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
               sizing="component"
               padding
               width="fit"
+              style={{ paddingLeft: 0, paddingRight: 8 }}
               onClick={(e) => e.stopPropagation()}
             >
               <Checkbox
@@ -62,6 +68,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
             sizing="component"
             padding
             onClick={(e) => e.stopPropagation()}
+            style={{ paddingInline: 0 }}
           >
             {renderLink ? (
               renderLink(data)
@@ -95,7 +102,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
               column.id ? (
                 <div
                   key={`${column.id}-${index}`}
-                  className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
+                  className="grid grid-cols-2 gap-2 items-center flex-1"
                 >
                   <Paragraph
                     color="text-secondary-normal"
@@ -121,7 +128,9 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
       </Stack>
       {renderChevron && (
         <Stack items="center" justify="center" horizontal horizontalMobile>
-          <Icon name="keyboard_arrow_down" />
+          <span className="text-icon-primary-normal">
+            <Icon name="keyboard_arrow_down" />
+          </span>
         </Stack>
       )}
     </li>

package/src/components/MobileDataGrid/MobileDataGridHeader.tsx

@@ -42,6 +42,7 @@ export function MobileDataGridHeader<T>({
             items="center"
             justify="between"
             backgroundColor="background-primary-normal"
+            style={{ borderTopRightRadius: 4, borderTopLeftRadius: 4 }}
           >
             {enableRowSelection && (
               <div className="p-mobile-component-padding border-r border-brand-200 max-w-fit h-full">

package/src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx

@@ -18,7 +18,7 @@ export function ModalContent() {
           column.id ? (
             <div
               key={`${column.id}-${index}`}
-              className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
+              className="grid grid-cols-2 gap-2 items-center flex-1"
             >
               <Paragraph color="text-secondary-normal" className="text-left">
                 {column.header?.toString()}:

package/src/components/Stack.tsx

@@ -215,6 +215,7 @@ export const Stack = ({
         flexWrap: flexWrap,
         paddingInline: props.style?.paddingInline,
         gap: props.style?.gap,
+        ...props.style,
       }}
       className={clsx(
         "scrollbar-thin",