ui: add support for flex item props to Box, Card, Flex, and Grid

Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>

packages/ui/src/components/Box/definition.ts

@@ -52,6 +52,9 @@ export const BoxDefinition = defineComponent<BoxOwnProps>()({
     'py',
     'position',
     'display',
+    'grow',
+    'shrink',
+    'basis',
     'width',
     'minWidth',
     'maxWidth',

packages/ui/src/components/Box/types.ts

@@ -15,7 +15,12 @@
  */
 
 import type { ReactNode, CSSProperties } from 'react';
-import type { Responsive, ProviderBg, SpaceProps } from '../../types';
+import type {
+  Responsive,
+  ProviderBg,
+  SpaceProps,
+  FlexItemProps,
+} from '../../types';
 
 /** @public */
 export type BoxOwnProps = {
@@ -43,6 +48,7 @@ export type BoxUtilityProps = {
 /** @public */
 export interface BoxProps
   extends SpaceProps,
+    FlexItemProps,
     BoxOwnProps,
     BoxUtilityProps,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {}

packages/ui/src/components/Card/Card.tsx

@@ -41,7 +41,7 @@ const INTERACTIVE_ELEMENT_SELECTOR =
  * @public
  */
 export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  const { ownProps, restProps, dataAttributes } = useDefinition(
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
     CardDefinition,
     props,
   );
@@ -98,6 +98,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
       {...dataAttributes}
       {...restProps}
       onClick={isInteractive ? handleClick : undefined}
+      style={{ ...ownProps.style, ...utilityStyle }}
     >
       {href && (
         <Link

packages/ui/src/components/Card/definition.ts

@@ -42,7 +42,9 @@ export const CardDefinition = defineComponent<CardOwnProps>()({
     target: {},
     rel: {},
     download: {},
+    style: {},
   },
+  utilityProps: ['grow', 'shrink', 'basis'],
 });
 
 /**

packages/ui/src/components/Card/types.ts

@@ -16,9 +16,13 @@
 
 import type { ReactNode } from 'react';
 import type { ButtonProps as RAButtonProps } from 'react-aria-components';
+import type { FlexItemProps } from '../../types';
 
 /** @public */
-export type CardBaseProps = { children?: ReactNode; className?: string };
+export type CardBaseProps = {
+  children?: ReactNode;
+  className?: string;
+};
 
 /** @public */
 export type CardButtonVariant = {
@@ -63,6 +67,7 @@ export type CardStaticVariant = {
  * @public
  */
 export type CardProps = CardBaseProps &
+  FlexItemProps &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> &
   (CardButtonVariant | CardLinkVariant | CardStaticVariant);
 

packages/ui/src/components/Flex/definition.ts

@@ -53,5 +53,8 @@ export const FlexDefinition = defineComponent<FlexOwnProps>()({
     'align',
     'justify',
     'direction',
+    'grow',
+    'shrink',
+    'basis',
   ],
 });

packages/ui/src/components/Flex/types.ts

@@ -15,7 +15,13 @@
  */
 
 import type { ReactNode, CSSProperties } from 'react';
-import type { Responsive, Space, SpaceProps, ProviderBg } from '../../types';
+import type {
+  Responsive,
+  Space,
+  SpaceProps,
+  ProviderBg,
+  FlexItemProps,
+} from '../../types';
 
 /** @public */
 export type FlexOwnProps = {
@@ -28,6 +34,7 @@ export type FlexOwnProps = {
 /** @public */
 export interface FlexProps
   extends SpaceProps,
+    FlexItemProps,
     FlexOwnProps,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   gap?: Responsive<Space>;

packages/ui/src/components/Grid/definition.ts

@@ -51,6 +51,9 @@ export const GridDefinition = defineComponent<GridOwnProps>()({
     'pt',
     'px',
     'py',
+    'grow',
+    'shrink',
+    'basis',
   ],
 });
 

packages/ui/src/components/Grid/types.ts

@@ -21,6 +21,7 @@ import type {
   Responsive,
   Columns,
   ProviderBg,
+  FlexItemProps,
 } from '../../types';
 
 /** @public */
@@ -34,6 +35,7 @@ export type GridOwnProps = {
 /** @public */
 export interface GridProps
   extends SpaceProps,
+    FlexItemProps,
     GridOwnProps,
     Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   columns?: Responsive<Columns>;