[UIK-4618][base-components] added inset property for Box

semcore/base-components/src/components/flex-box/Box/useBox.tsx

@@ -166,6 +166,8 @@ export type BoxProps = StyledProps & {
   bottom?: number | string;
   /** CSS `right` property */
   right?: number | string;
+  /** CSS `inset` property */
+  inset?: string;
   /** CSS `z-index` property */
   zIndex?: number;
   /** CSS `text-align` property */
@@ -197,6 +199,7 @@ function calculateIndentStyles(props: BoxProps, scaleIndent: number) {
     left: getSize(props['left']),
     bottom: getSize(props['bottom']),
     right: getSize(props['right']),
+    inset: props.inset,
     flex: props.flex,
     zIndex: props.zIndex,
     textAlign: props.textAlign,
@@ -273,6 +276,7 @@ export default function useBox<T extends BoxProps>(
     left,
     bottom,
     right,
+    inset,
     zIndex,
     ...other
   } = props as any;
@@ -308,6 +312,7 @@ export default function useBox<T extends BoxProps>(
     left,
     bottom,
     right,
+    inset,
     zIndex,
   ]);
 

stories/components/base-components/flex-box/tests/examples/box-all-props.tsx

@@ -0,0 +1,128 @@
+import { Box } from '@semcore/ui/base-components';
+import type { BoxProps } from '@semcore/ui/base-components';
+import React from 'react';
+
+type ExampleProps = BoxProps & {
+  tag?: React.ElementType;
+};
+
+const Demo = (props: ExampleProps) => {
+  const isPositioned =
+    props.position === 'absolute' || props.position === 'fixed' || props.position === 'sticky';
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        padding: 20,
+        border: '2px dashed #aaa',
+        minHeight: 300,
+        width: 500,
+        background: '#f9f9f9',
+      }}
+    >
+      <div style={{ color: '#999', fontSize: 12, marginBottom: 8 }}>
+        Parent container (position: relative, 500x300)
+      </div>
+
+      {isPositioned && !props.inset && !props.top && !props.left && !props.bottom && !props.right && (
+        <div style={{ color: '#e67700', fontSize: 12, marginBottom: 8 }}>
+          Hint: set inset (e.g. &quot;10px&quot; or &quot;0&quot;) or top/left/bottom/right to see positioning effect
+        </div>
+      )}
+
+      {isPositioned && props.inset && (props.w || props.h) && (
+        <div style={{ color: '#e67700', fontSize: 12, marginBottom: 8 }}>
+          Hint: clear w and h to let inset stretch the Box to fill the parent
+        </div>
+      )}
+
+      <Box
+        tag={props.tag}
+        display={props.display}
+        inline={props.inline}
+        boxSizing={props.boxSizing}
+        flex={props.flex}
+        w={props.w}
+        wMin={props.wMin}
+        wMax={props.wMax}
+        h={props.h}
+        hMin={props.hMin}
+        hMax={props.hMax}
+        m={props.m}
+        mt={props.mt}
+        mr={props.mr}
+        mb={props.mb}
+        ml={props.ml}
+        mx={props.mx}
+        my={props.my}
+        p={props.p}
+        pt={props.pt}
+        pr={props.pr}
+        pb={props.pb}
+        pl={props.pl}
+        px={props.px}
+        py={props.py}
+        scaleIndent={props.scaleIndent}
+        position={props.position}
+        top={props.top}
+        left={props.left}
+        bottom={props.bottom}
+        right={props.right}
+        inset={props.inset}
+        zIndex={props.zIndex}
+        textAlign={props.textAlign}
+        innerOutline={props.innerOutline}
+        invertOutline={props.invertOutline}
+        inAfterOutline={props.inAfterOutline}
+        style={{ background: '#e0e0ff', border: '1px solid #7b68ee' }}
+      >
+        Box content
+      </Box>
+    </div>
+  );
+};
+
+export const defaultProps: ExampleProps = {
+  tag: 'div',
+  display: undefined,
+  inline: false,
+  boxSizing: false,
+  flex: undefined,
+  w: undefined,
+  wMin: undefined,
+  wMax: undefined,
+  h: undefined,
+  hMin: undefined,
+  hMax: undefined,
+  m: undefined,
+  mt: undefined,
+  mr: undefined,
+  mb: undefined,
+  ml: undefined,
+  mx: undefined,
+  my: undefined,
+  p: undefined,
+  pt: undefined,
+  pr: undefined,
+  pb: undefined,
+  pl: undefined,
+  px: undefined,
+  py: undefined,
+  scaleIndent: 4,
+  position: undefined,
+  top: undefined,
+  left: undefined,
+  bottom: undefined,
+  right: undefined,
+  inset: undefined,
+  zIndex: undefined,
+  textAlign: undefined,
+  innerOutline: false,
+  invertOutline: false,
+  inAfterOutline: false,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;

stories/components/base-components/flex-box/tests/flex-box.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import BoxAllPropsExample, { defaultProps as BoxAllProps } from './examples/box-all-props';
 import BoxMarginsPaddingsExample from './examples/box-margins-and-paddings';
 import BoxWigthHeightExamples from './examples/flex-box-width-height-test';
 import FlexGapsExample from './examples/flex-gaps-test';
@@ -8,6 +9,64 @@ const meta: Meta = {
   title: 'Components/Base Components/Flex-Box/Tests',
 };
 
+export const BoxAllPropsConfigurable: StoryObj<typeof BoxAllProps> = {
+  render: BoxAllPropsExample,
+  argTypes: {
+    tag: {
+      control: { type: 'select' },
+      options: ['div', 'span', 'section', 'article', 'main', 'header', 'footer', 'aside', 'nav'],
+    },
+    display: {
+      control: { type: 'select' },
+      options: ['block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'none'],
+    },
+    inline: { control: { type: 'boolean' } },
+    boxSizing: { control: { type: 'boolean' } },
+    flex: {
+      control: { type: 'text' },
+    },
+    w: { control: { type: 'text' } },
+    wMin: { control: { type: 'text' } },
+    wMax: { control: { type: 'text' } },
+    h: { control: { type: 'text' } },
+    hMin: { control: { type: 'text' } },
+    hMax: { control: { type: 'text' } },
+    m: { control: { type: 'number' } },
+    mt: { control: { type: 'number' } },
+    mr: { control: { type: 'number' } },
+    mb: { control: { type: 'number' } },
+    ml: { control: { type: 'number' } },
+    mx: { control: { type: 'number' } },
+    my: { control: { type: 'number' } },
+    p: { control: { type: 'number' } },
+    pt: { control: { type: 'number' } },
+    pr: { control: { type: 'number' } },
+    pb: { control: { type: 'number' } },
+    pl: { control: { type: 'number' } },
+    px: { control: { type: 'number' } },
+    py: { control: { type: 'number' } },
+    scaleIndent: { control: { type: 'number' } },
+    position: {
+      control: { type: 'select' },
+      options: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    },
+    top: { control: { type: 'text' } },
+    left: { control: { type: 'text' } },
+    bottom: { control: { type: 'text' } },
+    right: { control: { type: 'text' } },
+    inset: { control: { type: 'text' } },
+    zIndex: { control: { type: 'number' } },
+    textAlign: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right', 'justify'],
+    },
+    innerOutline: { control: { type: 'boolean' } },
+    invertOutline: { control: { type: 'boolean' } },
+    inAfterOutline: { control: { type: 'boolean' } },
+  },
+  args: BoxAllProps,
+};
+
 export const FlexGaps: StoryObj = {
   render: FlexGapsExample,
 };