@chakra-ui/styled-system - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

 # Change Log
 
+## 1.3.1
+
+### Patch Changes
+
+- [`5cef5de4`](https://github.com/chakra-ui/chakra-ui/commit/5cef5de4f45cd58f7a29436335543cb5b40c0d70)
+  [#2918](https://github.com/chakra-ui/chakra-ui/pull/2918) Thanks
+  [@MohamedSayed008](https://github.com/MohamedSayed008)! - ## Button
+
+  - Update the style props applied for `leftIcon` and `rightIcon` to support
+    RTL. Changed `ml` and `mr` to `marginStart` and `marginEnd` respectively.
+  - Update the style props applied when `isLoading` is `true`. Changed
+    `marginRight` to `marginEnd`.
+
+  ## Stack
+
+  - Update `directionStyles` to use logical CSS properties for RTL support.
+    Changed `marginLeft` and `marginRight` to `marginStart` and `marginEnd`
+    respectively.
+
+  ## Styled System
+
+  - Add missing `borderStart`, and `borderEnd` for style and color.
+  - Sort `Object.assign` keys in `configs/border.ts` for better readability.
+
+  ## Other RTL Fixes
+
+  - Alignment for close icon for `Tag`, `Modal`, and `Drawer` components to
+    support RTL.
+
+  ## Storybook
+
+  Add RTL storybook toolbar for make it easy to test layouts.
+
+  Packages added:
+
+  - `@storybook/addon-toolbars`
+
 ## 1.3.0
@@ -4,0 +41,0 @@

dist/cjs/config/border.js

@@ -114,16 +114,12 @@ "use strict";
   rounded: config.borderRadius,
+  roundedTop: config.borderTopRadius,
   roundedTopLeft: config.borderTopLeftRadius,
   roundedTopRight: config.borderTopRightRadius,
   roundedTopStart: config.borderStartStartRadius,
-  borderTopStartRadius: config.borderStartStartRadius,
   roundedTopEnd: config.borderStartEndRadius,
-  borderTopEndRadius: config.borderStartEndRadius,
+  roundedBottom: config.borderBottomRadius,
   roundedBottomLeft: config.borderBottomLeftRadius,
   roundedBottomRight: config.borderBottomRightRadius,
   roundedBottomStart: config.borderEndStartRadius,
-  borderBottomStartRadius: config.borderEndStartRadius,
   roundedBottomEnd: config.borderEndEndRadius,
-  borderBottomEndRadius: config.borderEndEndRadius,
-  roundedTop: config.borderTopRadius,
-  roundedBottom: config.borderBottomRadius,
   roundedLeft: config.borderLeftRadius,
@@ -133,2 +129,8 @@ roundedRight: config.borderRightRadius,
   roundedEnd: config.borderInlineEndRadius,
+  borderStart: config.borderInlineStart,
+  borderEnd: config.borderInlineEnd,
+  borderTopStartRadius: config.borderStartStartRadius,
+  borderTopEndRadius: config.borderStartEndRadius,
+  borderBottomStartRadius: config.borderEndStartRadius,
+  borderBottomEndRadius: config.borderEndEndRadius,
   borderStartRadius: config.borderInlineStartRadius,
@@ -138,4 +140,6 @@ borderEndRadius: config.borderInlineEndRadius,
   borderEndWidth: config.borderInlineEndWidth,
-  borderStart: config.borderInlineStart,
-  borderEnd: config.borderInlineEnd
+  borderStartColor: config.borderInlineStartColor,
+  borderEndColor: config.borderInlineEndColor,
+  borderStartStyle: config.borderInlineStartStyle,
+  borderEndStyle: config.borderInlineEndStyle
 });
@@ -142,0 +146,0 @@ /**

dist/esm/config/border.js

@@ -107,16 +107,12 @@ import { createParser, system } from "../core";
   rounded: config.borderRadius,
+  roundedTop: config.borderTopRadius,
   roundedTopLeft: config.borderTopLeftRadius,
   roundedTopRight: config.borderTopRightRadius,
   roundedTopStart: config.borderStartStartRadius,
-  borderTopStartRadius: config.borderStartStartRadius,
   roundedTopEnd: config.borderStartEndRadius,
-  borderTopEndRadius: config.borderStartEndRadius,
+  roundedBottom: config.borderBottomRadius,
   roundedBottomLeft: config.borderBottomLeftRadius,
   roundedBottomRight: config.borderBottomRightRadius,
   roundedBottomStart: config.borderEndStartRadius,
-  borderBottomStartRadius: config.borderEndStartRadius,
   roundedBottomEnd: config.borderEndEndRadius,
-  borderBottomEndRadius: config.borderEndEndRadius,
-  roundedTop: config.borderTopRadius,
-  roundedBottom: config.borderBottomRadius,
   roundedLeft: config.borderLeftRadius,
@@ -126,2 +122,8 @@ roundedRight: config.borderRightRadius,
   roundedEnd: config.borderInlineEndRadius,
+  borderStart: config.borderInlineStart,
+  borderEnd: config.borderInlineEnd,
+  borderTopStartRadius: config.borderStartStartRadius,
+  borderTopEndRadius: config.borderStartEndRadius,
+  borderBottomStartRadius: config.borderEndStartRadius,
+  borderBottomEndRadius: config.borderEndEndRadius,
   borderStartRadius: config.borderInlineStartRadius,
@@ -131,4 +133,6 @@ borderEndRadius: config.borderInlineEndRadius,
   borderEndWidth: config.borderInlineEndWidth,
-  borderStart: config.borderInlineStart,
-  borderEnd: config.borderInlineEnd
+  borderStartColor: config.borderInlineStartColor,
+  borderEndColor: config.borderInlineEndColor,
+  borderStartStyle: config.borderInlineStartStyle,
+  borderEndStyle: config.borderInlineEndStyle
 });
@@ -135,0 +139,0 @@ /**

dist/types/config/border.d.ts

@@ -50,2 +50,3 @@ import * as CSS from "csstype";
     borderLeftWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
+    borderStartWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     borderInlineStartWidth?: ResponsiveValue<CSS.Property.BorderInlineStartWidth<Length>>;
@@ -56,2 +57,3 @@ /**
     borderRightWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
+    borderEndWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     borderInlineEndWidth?: ResponsiveValue<CSS.Property.BorderInlineEndWidth<Length>>;
@@ -72,2 +74,3 @@ /**
     borderLeftStyle?: ResponsiveValue<CSS.Property.BorderLeftStyle>;
+    borderStartStyle?: ResponsiveValue<CSS.Property.BorderInlineStartStyle>;
     borderInlineStartStyle?: ResponsiveValue<CSS.Property.BorderInlineStartStyle>;
@@ -78,2 +81,3 @@ /**
     borderRightStyle?: ResponsiveValue<CSS.Property.BorderRightStyle>;
+    borderEndStyle?: ResponsiveValue<CSS.Property.BorderInlineEndStyle>;
     borderInlineEndStyle?: ResponsiveValue<CSS.Property.BorderInlineEndStyle>;
@@ -94,2 +98,3 @@ /**
     borderLeftColor?: ResponsiveValue<CSS.Property.BorderLeftColor>;
+    borderStartColor?: ResponsiveValue<CSS.Property.BorderInlineStartColor>;
     borderInlineStartColor?: ResponsiveValue<CSS.Property.BorderInlineStartColor>;
@@ -100,2 +105,3 @@ /**
     borderRightColor?: ResponsiveValue<CSS.Property.BorderRightColor>;
+    borderEndColor?: ResponsiveValue<CSS.Property.BorderInlineEndColor>;
     borderInlineEndColor?: ResponsiveValue<CSS.Property.BorderInlineEndColor>;
@@ -102,0 +108,0 @@ /**

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Style function for css-in-js building component libraries",
@@ -5,0 +5,0 @@ "keywords": [

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

641716

increased by0.59%

Lines of code

5311

increased by0.26%

No dependency changes