@nest-ui/core - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

CHANGELOG.md

@@ -13,2 +13,9 @@ # CHANGELOG
 <!-- Start of Current Changelog -->
+## 1.3.2 `2023-08-02`
+### General Changes
+- :star2: Add new CSS properties such as `rotate`, `scale`, `translate`, `textWrap` to several components including `Accordion`, `BottomNav`, `BottomSheet`, `Button`, `Checkbox`, `Chip`, `Circular`, `ContentSwitcher`, `Dialog`, `EmptyState`, `InputGroup`, `Modal`, `Notification`, `PageControl`, `Pagination`, `Radio`, `RangeSlider`, `Shimmer`, `TabPanels`, `Tabs`, and `Toggle` [#207](https://github.com/tokopedia/nest/pull/207)
+
+Milestone: https://github.com/tokopedia/nest/milestone/37?closed=1
+<!-- End of Current Changelog -->
+
 ## 1.3.1 `2023-07-13`
@@ -24,3 +31,2 @@ ### Component Changes
 Milestone: https://github.com/tokopedia/nest/milestone/36?closed=1
-<!-- End of Current Changelog -->
 
@@ -27,0 +33,0 @@ ## 1.3.0 `2023-07-12`

dist/components/Accordion/style.js

@@ -24,6 +24,6 @@ import { css } from '@emotion/react';
         fill: chevronFill,
-        transition: 'transform .3s',
+        transition: 'rotate .3s',
       },
       '[data-n-chevron="true"]': {
-        transform: 'rotate(180deg)',
+        rotate: '180deg',
       },
@@ -30,0 +30,0 @@ }, // responsive sizing

dist/components/BottomNav/style.js

@@ -45,6 +45,6 @@ import { css } from '@emotion/react';
       '>*': {
-        transition: 'transform .1s ease-out',
+        transition: 'scale .1s ease-out',
       },
       ':active > *': {
-        transform: 'scale(0.9)',
+        scale: '0.9;',
       },
@@ -51,0 +51,0 @@ },

dist/components/Bottomsheet/style.js

@@ -5,6 +5,6 @@ import cssScreen from '../../utils/cssScreen';
   from: {
-    transform: 'translateY(100%)',
+    translate: '0 100%',
   },
   to: {
-    transform: 'translateY(0%)',
+    translate: '0 0',
   },
@@ -14,6 +14,6 @@ });
   from: {
-    transform: 'translateY(0%)',
+    translate: '0 0',
   },
   to: {
-    transform: 'translateY(100%)',
+    translate: '0 100%',
   },
@@ -20,0 +20,0 @@ });

dist/components/Button/style.js

@@ -153,3 +153,3 @@ import { css } from '@emotion/react';
       left: '50%',
-      transform: 'translate3d(-50%, -50%, 0)',
+      translate: '-50% -50% 0',
       color,
@@ -175,7 +175,7 @@ '[data-n-variant="ghost"] &, [data-n-variant="text"] &': {
       height: '100%',
-      transition: 'opacity .3s cubic-bezier(0.63,0.01,0.29,1), transform .3s cubic-bezier(0.63,0.01,0.29,1)',
+      transition: 'opacity .3s cubic-bezier(0.63,0.01,0.29,1), translate .3s cubic-bezier(0.63,0.01,0.29,1)',
       whiteSpace: 'nowrap',
       '[data-n-loading] > &': {
         opacity: 0,
-        transform: 'translate3d(0, -50%, 0)',
+        translate: '0 -50%',
       },
@@ -182,0 +182,0 @@ },

dist/components/Checkbox/style.js

@@ -43,4 +43,4 @@ import { css } from '@emotion/react';
           height: '100%',
-          transform: 'scale(0)',
-          transition: 'transform 200ms cubic-bezier(0.2, 0.64, 0.21, 1)',
+          scale: '0;',
+          transition: 'scale 200ms cubic-bezier(0.2, 0.64, 0.21, 1)',
           svg: {
@@ -65,3 +65,3 @@ display: 'block',
           '[data-n-check]': {
-            transform: 'scale(1)',
+            scale: '1;',
           },
@@ -68,0 +68,0 @@ },

dist/components/Chip/style.js

@@ -115,5 +115,5 @@ import cssHover from '../../utils/cssHover';
       flexShrink: 0,
-      transition: 'transform .3s',
+      transition: 'rotate .3s',
       '&[data-n-active]': {
-        transform: 'rotate(180deg)',
+        rotate: '180deg',
       },
@@ -120,0 +120,0 @@ },

dist/components/Circular/index.js

@@ -28,3 +28,3 @@ import { jsx as _jsx } from '@emotion/react/jsx-runtime';
           strokeWidth: '5',
-          transform: idx ? 'rotate(180, 36, 36)' : undefined,
+          rotate: idx ? '180 36 36' : undefined,
         },
@@ -31,0 +31,0 @@ idx,

dist/components/ContentSwitcher/index.js

@@ -26,3 +26,3 @@ import { jsx as _jsx, jsxs as _jsxs } from '@emotion/react/jsx-runtime';
           style: {
-            transform: `translateX(${activeIndex * 100}%)`,
+            translate: `${activeIndex * 100}%`,
           },
@@ -29,0 +29,0 @@ }),

dist/components/ContentSwitcher/style.js

@@ -30,3 +30,3 @@ import cssScreen from '../../utils/cssScreen';
         width: '50%',
-        transition: 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.06)',
+        transition: 'translate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.06)',
       },
@@ -33,0 +33,0 @@ '[data-n-option]': {

dist/components/Dialog/style.js

@@ -46,2 +46,3 @@ import cssScreen from '../../utils/cssScreen';
       color,
+      textWrap: 'balance',
     },
@@ -59,2 +60,5 @@ ...cssScreen(breakpoints, idx => ({
   return css(
+    {
+      textWrap: 'balance',
+    },
     ...cssScreen(breakpoints, idx => ({
@@ -61,0 +65,0 @@ margin: margin[idx],

dist/components/EmptyState/style.js

@@ -73,2 +73,3 @@ import { css } from '@emotion/react';
       color,
+      textWrap: 'balance',
     },
@@ -87,2 +88,5 @@ ...cssScreen(breakpoints, idx => ({
   return css(
+    {
+      textWrap: 'balance',
+    },
     ...cssScreen(breakpoints, idx => ({
@@ -89,0 +93,0 @@ margin: margin[idx],

dist/components/InputGroup/style.js

@@ -152,5 +152,5 @@ import { css } from '@emotion/react';
       '>[data-n-action="chevron"]': {
-        transition: 'transform .2s ease-out',
+        transition: 'rotate .2s ease-out',
         '&[data-n-active]': {
-          transform: 'rotate(180deg)',
+          rotate: '180deg',
         },
@@ -226,6 +226,8 @@ },
   userSelect: 'none',
-  transition: 'color.2s ease-out, transform .2s ease-out',
+  transitionProperty: 'color, translate, scale',
+  transition: '.2s ease-out',
   transformOrigin: 0,
   '[data-n-focus] &, [data-n-filled] &': {
-    transform: `translate3d(0, -50%, 0) scale(0.876)`,
+    translate: `0 -50%`,
+    scale: '0.876;',
   },
@@ -232,0 +234,0 @@ });

dist/components/Modal/style.js

@@ -6,7 +6,7 @@ import { css, keyframes } from '@emotion/react';
     opacity: 0,
-    transform: 'scale(0.8)',
+    scale: '0.8;',
   },
   to: {
     opacity: 1,
-    transform: 'scale(1)',
+    scale: '1;',
   },
@@ -17,7 +17,7 @@ });
     opacity: 1,
-    transform: 'scale(1)',
+    scale: '1;',
   },
   to: {
     opacity: 0,
-    transform: 'scale(0.8)',
+    scale: '0.8;',
   },
@@ -24,0 +24,0 @@ });

dist/components/Notification/style.js

@@ -28,3 +28,4 @@ import { css } from '@emotion/react';
         color,
-        transition: 'transform .15s ease-out',
+        transitionProperty: 'scale, translate',
+        transition: '.15s ease-out',
         marginTop: -1,
@@ -47,6 +48,7 @@ },
         right: 0,
-        transform: 'scale(1) translate(50%, -50%)',
-        transformOrigin: '100% 0%',
+        scale: '1;',
+        translate: '50% -50%',
         '&[data-n-inactive]': {
-          transform: 'scale(0) translate(50%, -50%)',
+          scale: '0;',
+          translate: '50% -50%',
         },
@@ -57,6 +59,7 @@ },
         left: '50%',
-        transform: 'scale(1) translateX(-50%)',
-        transformOrigin: '0%',
+        scale: '1;',
+        translate: '-50% 0',
         '&[data-n-inactive]': {
-          transform: `scale(0) translateX(-50%)`,
+          scale: '0;',
+          translate: '-50% 0',
         },
@@ -63,0 +66,0 @@ },

dist/components/PageControl/index.js

@@ -16,3 +16,3 @@ import { jsx as _jsx } from '@emotion/react/jsx-runtime';
       style: {
-        transform: calcTranslate(activeIndex, length),
+        translate: calcTranslate(activeIndex, length),
       },
@@ -19,0 +19,0 @@ children: [...Array(length).keys()].map(index => {

dist/components/PageControl/style.js

@@ -15,3 +15,3 @@ import { css } from '@emotion/react';
         flexWrap: 'nowrap',
-        transition: 'transform 0.3s ease',
+        transition: 'translate 0.3s ease',
         gap: 'var(--pagecontrol-gap)',
@@ -42,3 +42,3 @@ width: 'calc(var(--pagecontrol-size) + var(--pagecontrol-gap))',
     height: 'var(--pagecontrol-size)',
-    transition: 'transform 0.3s ease, color 0.3s ease',
+    transition: 'scale 0.3s ease, color 0.3s ease',
     color: color,
@@ -50,8 +50,8 @@ background: 'currentcolor',
     '&[data-n-scale="sm"]': {
-      transform: `scale(${scaleSm})`,
+      scale: `${scaleSm};`,
     },
     '&[data-n-scale="xs"]': {
-      transform: `scale(${scaleXs})`,
+      scale: `${scaleXs};`,
     },
   });
 };

dist/components/PageControl/utils.js

@@ -5,3 +5,3 @@ export const calcTranslate = (activeIndex, length) => {
   translate = Math.min(translate, length - 5);
-  return `translateX(${-translate * 100}%)`;
+  return `${-translate * 100}%`;
 };
@@ -8,0 +8,0 @@ export const calcScale = (index, activeIndex, length) => {

dist/components/PageControl/utils.ts

@@ -5,3 +5,3 @@ export const calcTranslate = (activeIndex: number, length: number) => {
   translate = Math.min(translate, length - 5);
-  return `translateX(${-translate * 100}%)`;
+  return `${-translate * 100}%`;
 };
@@ -8,0 +8,0 @@

dist/components/Pagination/style.js

@@ -62,3 +62,3 @@ import { css } from '@emotion/react';
           margin: '0 auto',
-          transform: 'translateY(100%)',
+          translate: '0 100%',
           content: '""',
@@ -65,0 +65,0 @@ display: 'block',

dist/components/Radio/style.js

@@ -42,4 +42,4 @@ import { css } from '@emotion/react';
           backgroundColor: 'currentcolor',
-          transform: 'scale(0)',
-          transition: 'transform 200ms cubic-bezier(0.2, 0.64, 0.21, 1) 0s',
+          scale: '0;',
+          transition: 'scale 200ms cubic-bezier(0.2, 0.64, 0.21, 1) 0s',
           width: '100%',
@@ -63,3 +63,3 @@ height: '100%',
           ':after': {
-            transform: 'scale(1)',
+            scale: '1;',
           },
@@ -66,0 +66,0 @@ },

dist/components/RangeSlider/style.js

@@ -57,3 +57,3 @@ import { css } from '@emotion/react';
             position: 'absolute',
-            transform: 'translateX(-50%)',
+            translate: '-50% 0',
           },
@@ -64,3 +64,3 @@ '>[data-n-label]': {
             '&[data-n-edge]': {
-              transform: 'translateX(0)',
+              translate: '0;',
               marginLeft: 'calc(-1 * var(--range-track-padding-x))',
@@ -136,3 +136,3 @@ marginRight: 'calc(-1 * var(--range-track-padding-x))',
       position: 'absolute',
-      transform: 'translateX(-50%)',
+      translate: '-50% 0',
       color,
@@ -145,3 +145,3 @@ '>input': {
         opacity: shadowOpacity,
-        transition: 'transform .2s ease-out',
+        transition: 'scale .2s ease-out',
       },
@@ -181,6 +181,6 @@ '&::after': {
         '&[data-n-hover]::before': {
-          transform: `scale(${shadowScaleHover})`,
+          scale: `${shadowScaleHover};`,
         },
         '&[data-n-active]::before': {
-          transform: `scale(${shadowScaleActive})`,
+          scale: `${shadowScaleActive};`,
         },
@@ -187,0 +187,0 @@ },

dist/components/Shimmer/style.js

@@ -10,6 +10,6 @@ import { css, keyframes } from '@emotion/react';
   '0%': {
-    transform: 'translate3d(-100%, 0, 0)',
+    translate: '-100% 0 0',
   },
   '100%': {
-    transform: 'translate3d(100%, 0, 0)',
+    translate: '100% 0 0',
   },
@@ -16,0 +16,0 @@ });

dist/components/TabPanels/style.js

@@ -5,3 +5,3 @@ import { css, keyframes } from '@emotion/react';
     opacity: 0,
-    transform: `translate3d(50%,0,0)`,
+    translate: '50% 0 0',
   },
@@ -15,3 +15,3 @@ '100%': {
     opacity: 0,
-    transform: `translate3d(-50%,0,0)`,
+    translate: '-50% 0 0',
   },
@@ -18,0 +18,0 @@ '100%': {

dist/components/Tabs/style.js

@@ -36,3 +36,3 @@ import { css } from '@emotion/react';
         backgroundColor: indicatorColor,
-        transition: 'width .2s ease-out, transform .2s ease-out',
+        transition: 'width .2s ease-out, translate .2s ease-out',
       },
@@ -39,0 +39,0 @@ },

dist/components/Tabs/utils.js

@@ -7,3 +7,3 @@ export const calcIndicator = (tabBarNode, indicatorNode, activeIndex) => {
     width: `${activeTabWidth}px`,
-    transform: `translateX(${activeTabLeft}px`,
+    translate: `${activeTabLeft}px 0`,
   });
@@ -10,0 +10,0 @@ };

dist/components/Tabs/utils.ts

@@ -7,3 +7,3 @@ export const calcIndicator = (tabBarNode: HTMLDivElement, indicatorNode: HTMLDivElement, activeIndex: number) => {
     width: `${activeTabWidth}px`,
-    transform: `translateX(${activeTabLeft}px`,
+    translate: `${activeTabLeft}px 0`,
   });
@@ -10,0 +10,0 @@ };

dist/components/Toggle/style.js

@@ -35,3 +35,3 @@ import { css } from '@emotion/react';
           display: 'block',
-          transition: 'transform .2s cubic-bezier(0.2, 0.64, 0.21, 1)',
+          transition: 'translate .2s cubic-bezier(0.2, 0.64, 0.21, 1)',
           ':after': {
@@ -61,3 +61,3 @@ content: '""',
           '[data-n-switch]': {
-            transform: 'translateX(calc(var(--toogle-width) - 100%))',
+            translate: 'calc(var(--toogle-width) - 100%) 0',
           },
@@ -64,0 +64,0 @@ },

package.json

 {
   "name": "@nest-ui/core",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "NEST Core",
@@ -5,0 +5,0 @@ "license": "ISC",

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

517130

increased by0.04%

Lines of code

13824

increased by0.09%

No dependency changes