@tcn/ui-layout - npm Package Compare versions

Comparing version 0.3.24 to 0.3.25

dist/stacks/h_stack.d.ts

@@ -14,2 +14,16 @@ import React, { HTMLAttributes } from 'react';
     maxHeight?: string;
+    padding?: string;
+    paddingInline?: string;
+    paddingBlock?: string;
+    paddingInlineStart?: string;
+    paddingInlineEnd?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    margin?: string;
+    marginInline?: string;
+    marginBlock?: string;
+    marginInlineStart?: string;
+    marginInlineEnd?: string;
+    marginTop?: string;
+    marginBottom?: string;
     zIndex?: string | number;
@@ -16,0 +30,0 @@ allowFlow?: boolean;

dist/stacks/h_stack.js

 import classNames from 'classnames';
 import React from 'react';
+import { removeUndefinedProperties } from "./remove_undefined_properties.js";
 import styles from './h_stack.module.css';
-export const HStack = React.forwardRef(function HStack({ as = 'div', children, style, className, horizontalAlignment = 'start', verticalAlignment = 'center', inline, allowFlow, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, overflowX, overflowY, flex, ...attr }, ref) {
+export const HStack = React.forwardRef(function HStack({ as = 'div', children, style, className, horizontalAlignment = 'start', verticalAlignment = 'center', inline, allowFlow, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingBlock, paddingInline, paddingInlineStart, paddingInlineEnd, paddingTop, paddingBottom, margin, marginBlock, marginInline, marginInlineStart, marginInlineEnd, marginTop, marginBottom, zIndex, overflowX, overflowY, flex, ...attr }, ref) {
     const As = as;
@@ -16,5 +17,19 @@ const defaultStyles = {
         overflowY,
+        padding,
+        paddingBlock,
+        paddingInline,
+        paddingInlineStart,
+        paddingInlineEnd,
+        paddingTop,
+        paddingBottom,
+        margin,
+        marginBlock,
+        marginInline,
+        marginInlineStart,
+        marginInlineEnd,
+        marginTop,
+        marginBottom,
     };
     const finalStyles = {
-        ...defaultStyles,
+        ...removeUndefinedProperties(defaultStyles),
         ...style,
@@ -21,0 +36,0 @@ };

dist/stacks/h_stack.stories.d.ts

@@ -8,1 +8,2 @@ import { Meta } from '@storybook/react';
 export declare function ManyChildren(props: HStackProps): React.JSX.Element;
+export declare function Padding(): React.JSX.Element;

dist/stacks/h_stack.stories.js

@@ -71,2 +71,7 @@ import React from 'react';
 }
+export function Padding() {
+    return (React.createElement(HStack, { height: "auto", style: { border: '1px dashed #ccc' }, padding: "30px" },
+        React.createElement(Circle, null),
+        React.createElement(Circle, null)));
+}
 //# sourceMappingURL=h_stack.stories.js.map

dist/stacks/v_stack.d.ts

@@ -13,2 +13,16 @@ import React, { HTMLAttributes } from 'react';
     maxHeight?: string;
+    padding?: string;
+    paddingInline?: string;
+    paddingBlock?: string;
+    paddingInlineStart?: string;
+    paddingInlineEnd?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    margin?: string;
+    marginInline?: string;
+    marginBlock?: string;
+    marginInlineStart?: string;
+    marginInlineEnd?: string;
+    marginTop?: string;
+    marginBottom?: string;
     zIndex?: string | number;
@@ -15,0 +29,0 @@ allowFlow?: boolean;

dist/stacks/v_stack.js

 import classNames from 'classnames';
 import React from 'react';
+import { removeUndefinedProperties } from "./remove_undefined_properties.js";
 import styles from './v_stack.module.css';
-export const VStack = React.forwardRef(function VStack({ as = 'div', children, style, className, horizontalAlignment = 'center', verticalAlignment = 'start', inline, allowFlow, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, overflowY, overflowX, flex, ...attr }, ref) {
+export const VStack = React.forwardRef(function VStack({ as = 'div', children, style, className, horizontalAlignment = 'center', verticalAlignment = 'start', inline, allowFlow, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingBlock, paddingInline, paddingInlineStart, paddingInlineEnd, paddingTop, paddingBottom, margin, marginBlock, marginInline, marginInlineStart, marginInlineEnd, marginTop, marginBottom, zIndex, overflowY, overflowX, flex, ...attr }, ref) {
     const As = as;
@@ -17,5 +18,19 @@ const defaultStyles = {
         overflowY,
+        padding,
+        paddingBlock,
+        paddingInline,
+        paddingInlineStart,
+        paddingInlineEnd,
+        paddingTop,
+        paddingBottom,
+        margin,
+        marginBlock,
+        marginInline,
+        marginInlineStart,
+        marginInlineEnd,
+        marginTop,
+        marginBottom,
     };
     const finalStyles = {
-        ...defaultStyles,
+        ...removeUndefinedProperties(defaultStyles),
         ...style,
@@ -22,0 +37,0 @@ };

dist/stacks/v_stack.stories.d.ts

@@ -9,1 +9,2 @@ import React from 'react';
 }): React.JSX.Element;
+export declare function Padding(): React.JSX.Element;

dist/stacks/v_stack.stories.js

 import React from 'react';
+import { Circle } from "./circle.js";
 import { Spacer } from "./spacer.js";
@@ -18,2 +19,7 @@ import { StyleBox } from "./style_box.js";
 }
+export function Padding() {
+    return (React.createElement(VStack, { width: "auto", style: { border: '1px dashed #ccc' }, padding: "30px" },
+        React.createElement(Circle, null),
+        React.createElement(Circle, null)));
+}
 //# sourceMappingURL=v_stack.stories.js.map

dist/stacks/z_stack.d.ts

@@ -14,2 +14,16 @@ import React, { HTMLAttributes } from 'react';
     maxHeight?: string;
+    padding?: string;
+    paddingInline?: string;
+    paddingBlock?: string;
+    paddingInlineStart?: string;
+    paddingInlineEnd?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    margin?: string;
+    marginInline?: string;
+    marginBlock?: string;
+    marginInlineStart?: string;
+    marginInlineEnd?: string;
+    marginTop?: string;
+    marginBottom?: string;
     zIndex?: string | number;
@@ -16,0 +30,0 @@ inline?: boolean;

dist/stacks/z_stack.js

 import classNames from 'classnames';
 import React from 'react';
+import { removeUndefinedProperties } from "./remove_undefined_properties.js";
 import styles from './z_stack.module.css';
-export const ZStack = React.forwardRef(function ZStack({ as = 'div', children, style, horizontalAlignment = 'center', verticalAlignment = 'center', inline, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, className, overflow, flex, ...attr }, ref) {
+export const ZStack = React.forwardRef(function ZStack({ as = 'div', children, style, horizontalAlignment = 'center', verticalAlignment = 'center', inline, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingBlock, paddingInline, paddingInlineStart, paddingInlineEnd, paddingTop, paddingBottom, margin, marginBlock, marginInline, marginInlineStart, marginInlineEnd, marginTop, marginBottom, zIndex, className, overflow, flex, ...attr }, ref) {
     const As = as;
+    const defaultStyles = {
+        minWidth,
+        width,
+        maxWidth,
+        minHeight,
+        height,
+        maxHeight,
+        zIndex,
+        overflow,
+        padding,
+        paddingBlock,
+        paddingInline,
+        paddingInlineStart,
+        paddingInlineEnd,
+        paddingTop,
+        paddingBottom,
+        margin,
+        marginBlock,
+        marginInline,
+        marginInlineStart,
+        marginInlineEnd,
+        marginTop,
+        marginBottom,
+    };
     return (React.createElement(As, { ref: ref, style: {
-            minWidth,
-            width,
-            maxWidth,
-            minHeight,
-            height,
-            maxHeight,
-            zIndex,
-            overflow,
+            ...removeUndefinedProperties(defaultStyles),
             ...style,
@@ -16,0 +34,0 @@ }, className: classNames(className, styles['z-stack'], flex && 'stack-flex-box'), "data-inline": Boolean(inline), "data-v-alignment": verticalAlignment, "data-h-alignment": horizontalAlignment, ...attr }, typeof children === 'string' ? React.createElement("span", null, children) : children));

dist/stacks/z_stack.stories.d.ts

@@ -13,1 +13,2 @@ import React from 'react';
 export declare function Alignment(): React.JSX.Element;
+export declare function Padding(): React.JSX.Element;

dist/stacks/z_stack.stories.js

 import React from 'react';
+import { Circle } from "./circle.js";
 import { StyleBox } from "./style_box.js";
@@ -37,2 +38,6 @@ import { ZStack } from "./z_stack.js";
 }
+export function Padding() {
+    return (React.createElement(ZStack, { width: "auto", height: "auto", style: { border: '1px dashed #ccc' }, padding: "30px" },
+        React.createElement(Circle, null)));
+}
 //# sourceMappingURL=z_stack.stories.js.map

package.json

 {
   "name": "@tcn/ui-layout",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "TCN Layout.",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

228425

increased by2.92%

Number of package files

171

increased by1.79%

Lines of code

3062

increased by4.15%

No dependency changes