diginet-core-ui 1.3.93-beta.1 → 1.3.93-beta.3

package/components/avatar/index.js

@@ -319,14 +319,14 @@ Avatar.propTypes = {
   className: PropTypes.string,
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.node]),
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
   /** the direction to display more info */
@@ -363,19 +363,19 @@ Avatar.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/breadcrumb/index.js

@@ -7,7 +7,7 @@ import { Icon } from "../../icons/effect";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { hexToRGBA } from "../../styles/color-helper";
-import { bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, gap, itemsCenter, mg, pd, pdl, pdr, textColor, userSelectNone } from "../../styles/general";
+import { alphaPseudo, bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, gap, itemsCenter, listNone, mg, pd, pdl, pdr, textColor, userSelectNone } from "../../styles/general";
 import { useTypography as typography } from "../../theme";
 import { classNames } from "../../utils";
 const sizeIconMap = new Map([['tiny', 16], ['small', 18], ['medium', 20]]);
@@ -28,7 +28,7 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style
 }, reference) => {
   if (!reference) reference = useRef(null);
-  if (color === 'default') color = 'system.rest';
+  if (color === 'default') color = 'system/rest';
   const ref = useRef(null);
   const sizeIcon = sizeIconMap.get(size);
   const sizeTypographyP = sizeTypographyPMap.get(size);
@@ -136,25 +136,17 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ]);
 }));
 
-const alphaArr = {
-  hover: 0.1,
-  focus: 0.2,
-  active: 0.3
-};
 const BreadcrumbOlCSS = color => css`
     ${displayFlex};
     ${flexWrap};
     ${itemsCenter};
     ${pd(0)};
     ${mg(0)};
-    list-style: none;
+    ${listNone};
     ${textColor(color)};
 `;
 const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
     ${typography[sizeTypographyP]};
-    &:last-child {
-        ${typography[sizeTypographyH]};
-    }
     ${displayFlex};
     ${itemsCenter};
     ${gap('4px')};
@@ -164,10 +156,11 @@ const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
     ${userSelectNone};
     &:last-child {
         ${pdr([1])};
+        ${typography[sizeTypographyH]};
     }
-    ${Object.keys(alphaArr).map(key => css`
+    ${Object.keys(alphaPseudo).map(key => css`
                 &: ${key} {
-                    ${bgColor(hexToRGBA(color, alphaArr[key]))};
+                    ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
                 }
             `)}
 `;
@@ -189,7 +182,7 @@ Breadcrumb.propTypes = {
   /** The color of the component. */
   color: PropTypes.string,
   /** Class for component. */
-  data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
+  data: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func

package/components/button/icon.js

@@ -1,37 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { CircularProgress, Icon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import * as allColors from "../../styles/colors";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { hexToRGBA } from "../../styles/color-helper";
+import * as allColors from "../../styles/colors";
+import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { getColor } from "../../styles/utils";
 import { capitalize, classNames, refType as ref } from "../../utils";
-import Icon from "../../icons";
+import { getRippleColor } from '.';
 import Ripple from "./ripple-effect";
-import { getClassNameFromColor, getRippleColor } from '.';
-import CircularProgress from "../progress/circular";
-import { itemsCenter, bgTransparent, border, boxBorder, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, displayInlineFlex, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
-import { useColor as colors, useTheme } from "../../theme";
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled,
-      rest: systemRest,
-      white: systemWhite
-    },
-    semantic: {
-      success: semanticSuccess,
-      warning: semanticWarning,
-      danger: semanticDanger,
-      info: semanticInfo
-    },
-    fill: {
-      disabled: fillDisabled
-    }
-  }
-} = useTheme();
 const sizeMap = new Map([['tiny', {
   buttonSize: '24px',
   iconSize: '16px'
@@ -51,12 +31,7 @@ const sizeMap = new Map([['tiny', {
   buttonSize: '96px',
   iconSize: '56px'
 }]]);
-const iconColorMap = new Map([['Close', semanticDanger], ['Cancel', semanticDanger], ['Approval', semanticSuccess], ['Delete', semanticWarning], ['Trash', semanticWarning], ['Edit', semanticInfo], ['EditV2', semanticInfo], ['View', semanticInfo]]);
-const alphaArr = {
-  hover: 0.1,
-  focus: 0.2,
-  active: 0.3
-};
+const iconColorMap = new Map([['Close', 'semantic.danger'], ['Cancel', 'semantic.danger'], ['Approval', 'semantic.success'], ['Delete', 'semantic.warning'], ['Trash', 'semantic.warning'], ['Edit', 'semantic.info'], ['EditV2', 'semantic.info'], ['View', 'semantic.info']]);
 const alphaLoading = 0.2;
 // customIconSize calculated based on design size
 // Button size <= 24 => icon size = Button size - 8
@@ -94,14 +69,20 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   var _sizeMap$get, _sizeMap$get2;
   const ref = useRef(null);
   const rippleRef = useRef(null);
+  const isColorDefault = colorProp === 'default';
+  const isViewTypeGhost = viewType === 'ghost';
   const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
   const iconSize = width ? isNaN(width) ? '60%' : customIconSize(parseInt(width)) + 'px' : ((_sizeMap$get2 = sizeMap.get(size)) === null || _sizeMap$get2 === void 0 ? void 0 : _sizeMap$get2.iconSize) || '24px';
-  const isViewTypeGhost = viewType === 'ghost';
-  const color = colors[colorProp] || colorProp;
-  colorHover = colors[colorHover] || colorHover;
-  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, color, name);
+  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, colorProp, name, isColorDefault, viewType, loading);
   const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
   const _ButtonIconCSS = ButtonIconCSS(iconSize);
+  const _onClick = event => {
+    event.persist();
+    onClick && event.stopPropagation();
+    if (disabled || loading) return;
+    if (!isViewTypeGhost) rippleRef.current.start(event);
+    onClick && onClick(event);
+  };
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -112,22 +93,15 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const _onClick = event => {
-    event.persist();
-    onClick && event.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeGhost) rippleRef.current.start(event);
-    onClick && onClick(event);
-  };
   return useMemo(() => {
     return jsx("button", {
-      css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
+      css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
       disabled: disabled,
       style: style,
       onClick: _onClick,
-      className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)
+      className: classNames('DGN-UI-ButtonIcon', viewType, size, className)
     }, loading && IconLoadingView(iconSize), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon',
       css: _ButtonIconCSS
@@ -142,9 +116,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: getRippleColor(colorProp, viewType, allColors),
       circular: circular
     }));
-  }, [children, circular, className, colorProp, colorHover, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width]);
+  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width]);
 }));
 const ButtonIconCSS = iconSize => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${boxBorder};
@@ -153,21 +128,6 @@ const ButtonIconCSS = iconSize => css`
     ${parseWidthHeight(iconSize)};
     ${parseMinWidthHeight(iconSize)};
 `;
-const ButtonDisabledCSS = `
-    cursor: not-allowed !important;
-    color: ${systemDisabled} !important;
-    &.outlined {
-        border-color: ${systemDisabled} !important;
-        background-color: transparent !important;
-    }
-    &.filled {
-        background-color: ${fillDisabled} !important;
-        filter: brightness(1) !important;
-    }
-    &.text {
-        background-color: transparent !important;
-    }
-`;
 const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
     ${parseWidthHeight(width || buttonSize, height || buttonSize)};
     ${parseMinWidthHeight(width || buttonSize, height || buttonSize)};
@@ -176,7 +136,7 @@ const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
         ${parseMinWidthHeight(width || iconSize, height || iconSize)};
     }
 `;
-const ButtonRootCSS = (circular, colorHover, color, name) => css`
+const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewType, loading) => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${justifyCenter};
@@ -185,46 +145,55 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
     ${boxBorder};
     ${cursorPointer};
     ${userSelectNone};
-    ${circular ? borderRadius50 : borderRadius4px};
-    padding: 0;
+    ${borderRadius(circular ? '50%' : 4)};
+    ${pd(0)};
     transition: background-color 0.5s, filter 0.5s;
-    &.button-icon--loading {
-        ${pointerEventsNone};
-    }
-    &.outlined {
-        ${bgTransparent};
-        ${border(1, color)}
-        color: ${color};
-        &.button-icon--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
-        }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            ${border(1, systemRest)};
-            color: ${systemRest};
-            &.button-icon--loading,
+    ${loading && pointerEventsNone};
+    ${viewType === 'outlined' && css`
+        ${bgColor('transparent')};
+        ${border(1, color)};
+        ${textColor(color)};
+        ${loading && css`
+            ${bgColor(hexToRGBA(color, alphaLoading))};
+        `}
+        ${Object.keys(alphaPseudo).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${border(1, 'system/rest')};
+            ${textColor('system/rest')};
+            ${loading && css`
+                ${textColor(colorHover)};
+                ${borderColor(colorHover)};
+                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
+            `}
             &:hover,
             &:focus,
             &:active {
-                color: ${colorHover};
-                border-color: ${colorHover};
-            }
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(colorHover, alphaLoading)};
+                ${textColor(colorHover)};
+                ${borderColor(colorHover)};
             }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}// &:hover | &:focus | &:active
+            ${Object.keys(alphaPseudo).map(key => css`
+                        &: ${key} {
+                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
+                        }
+                    `)}// &:hover | &:focus | &:active
+        `}
+        :disabled {
+            ${borderColor('system/disabled')};
+            ${bgColor('transparent')};
         }
-    }
-    &.filled {
+    `}
+    ${viewType === 'filled' && css`
         ${borderNone};
-        background-color: ${color};
-        color: ${color === systemWhite ? systemRest : systemWhite};
+        ${textColor(color === getColor('system.white') ? 'system.rest' : 'system.white')};
+        ${bgColor(color)};
         font-weight: bold;
-        &.button-icon--loading,
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -232,47 +201,54 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            background-color: ${systemRest};
-            &.button-icon--loading,
+        ${isColorDefault && css`
+            ${bgColor('system/rest')};
+            ${loading && bgColor('system/active')};
             &:hover,
             &:focus,
             &:active {
-                background-color: ${colorHover};
+                ${bgColor(colorHover)};
             }
+        `}
+        :disabled {
+            ${bgColor('fill/disabled')};
+            filter: brightness(1);
         }
-    }
-    &.text {
+    `}
+    ${viewType === 'text' && css`
         ${borderNone};
-        ${bgTransparent};
-        color: ${color};
-        &.button-icon--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
+        ${textColor(color)};
+        ${bgColor('transparent')};
+        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
+        ${Object.keys(alphaPseudo).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${textColor('system/rest')};
+            ${loading && css`
+                ${textColor('system/active')};
+                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
+            `}
+            ${Object.keys(alphaPseudo).map(key => css`
+                        &: ${key} {
+                            ${textColor(colorHover)};
+                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
+                        }
+                    `)}
+        `}
+        :disabled {
+            ${bgColor('transparent')};
         }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            color: ${systemRest};
-            &:hover,
-            &:focus,
-            &:active {
-                color: ${colorHover};
-            }
-            &.button-icon--loading {
-                color: ${active};
-                background-color: ${hexToRGBA(colorHover, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}
-        }
-    }
-    &.ghost {
-        ${bgTransparent};
+    `}
+    ${viewType === 'ghost' && css`
         ${borderNone};
-        color: ${color};
-        &.loading,
+        ${bgColor('transparent')};
+        ${textColor(color)};
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -280,21 +256,25 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            color: ${systemRest};
+        ${isColorDefault && css`
+            ${textColor('system/rest')};
             &:hover,
             &:focus,
             &:active {
-                color: ${iconColorMap.get(capitalize(name)) || colorHover};
+                ${textColor(iconColorMap.get(capitalize(name)) || colorHover)};
             }
-        }
+        `}
+    `}
+    :disabled {
+        ${cursorNotAllowed};
+        ${textColor('system/disabled')};
     }
 `;
 ButtonIcon.defaultProps = {
   circular: false,
   className: '',
   color: 'default',
-  colorHover: active,
+  colorHover: 'system/active',
   disabled: false,
   size: 'medium',
   viewBox: true,
@@ -321,14 +301,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -339,19 +319,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };