@antscorp/antsomi-ui 1.3.5-beta.257 → 1.3.5-beta.258

package/es/components/atoms/Steps/Steps.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
 export type StepsProps = AntdStepsProps & {
     saveHighestStep?: boolean;
-    iconSize?: number;
 };
 export type StepProps = AntdStepProps;
 export declare const Steps: React.FC<StepsProps>;

package/es/components/atoms/Steps/Steps.js

@@ -15,7 +15,7 @@ import { isNumber } from 'lodash';
 // Styled
 import { SelectedIcon, StepsWrapper } from './styled';
 export const Steps = memo(props => {
-    const { items, saveHighestStep = true, iconSize = 24, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "iconSize", "className"]);
+    const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
     const { current, size = 'small' } = restOfProps;
     const [highestStep, setHighestStep] = useState(0);
     useEffect(() => {
@@ -38,14 +38,14 @@ export const Steps = memo(props => {
                 }
                 else {
                     status = 'finish';
-                    icon = React.createElement(SelectedIcon, { size: size }, index + 1);
+                    icon = React.createElement(SelectedIcon, null, index + 1);
                     className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
                 }
             }
             return Object.assign({ status, icon, className }, item);
         })
-        : items, [current, saveHighestStep, highestStep, items, size]);
+        : items, [current, saveHighestStep, highestStep, items]);
     /** Check whether the user has reactivated the previous step or not */
     const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
-    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: "small", iconSize: iconSize, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
+    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
 });

package/es/components/atoms/Steps/styled.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
-export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {
-    size: 'small' | 'default';
-}, never>;
+export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
     Step: typeof import("rc-steps").Step;
 }, any, {
-    iconSize: number;
     isReactivate: boolean;
     highestStep: number;
 }, never>;

package/es/components/atoms/Steps/styled.js

@@ -3,28 +3,54 @@ import styled from 'styled-components';
 import { Steps } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const STEP_SIZE = {
+    SMALL: 24,
+    DEFAULT: 32,
+};
 export const SelectedIcon = styled.div `
   border: 1px solid #b8cfe6;
   border-radius: 100%;
-  width: ${({ size }) => (size === 'small' ? 20 : 30)}px;
-  height: ${({ size }) => (size === 'small' ? 20 : 30)}px;
   font-size: 14px;
   color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 export const StepsWrapper = styled(Steps) `
   &.save-highest-step {
     /** Steps Default */
     &.antsomi-steps:not(.antsomi-steps-dot) {
+      &.antsomi-steps-small
+        .antsomi-steps-item
+        .antsomi-steps-item-container
+        .antsomi-steps-item-icon {
+        width: ${STEP_SIZE.SMALL}px;
+        height: ${STEP_SIZE.SMALL}px;
+      }
+
       .antsomi-steps-item {
-        .antsomi-steps-item-container {
-          .antsomi-steps-item-icon {
-            box-sizing: content-box;
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            box-sizing: border-box;
             border-radius: 100%;
             font-size: 14px;
             font-weight: bold;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: ${STEP_SIZE.DEFAULT}px;
+            height: ${STEP_SIZE.DEFAULT}px;
 
             .antsomi-steps-icon {
               color: white;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
             }
           }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.257",
+  "version": "1.3.5-beta.258",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -60,7 +60,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "^0.27.14",
+    "@antscorp/icons": "^0.27.22",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@emotion/react": "^11.11.1",