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

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,

package/components/button/index.js

@@ -47,9 +47,6 @@ export const getRippleColor = (color, viewType, colors) => {
       return rgbaToHexA(hslToRgb(fade(color, 0.5)));
   }
 };
-export const getClassNameFromColor = color => {
-  return !isColor(color) && !isColorName(color) ? color : 'custom-color';
-};
 const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
 const paddingSizeMap = new Map([['tiny', [1, 2]], ['small', [1.5, 3]], ['medium', [2, 4]], ['large', [2, 5]], ['giant', [2, 6]]]);
 const outlinedPaddingSizeMap = new Map([['tiny', [0.75, 1.75]], ['small', [1.25, 2.75]], ['medium', [1.75, 3.75]], ['large', [1.75, 4.75]], ['giant', [1.75, 5.75]]]);
@@ -408,19 +405,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
-  /**
-   * 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
 };

package/components/button/more.js

@@ -1,25 +1,19 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Icon, Popover, Typography } from "./..";
 import PropTypes from 'prop-types';
 import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { ButtonIcon, Icon, Popover, Typography } from "../";
-import { itemsCenter, borderNone, cursorPointer, flexCol, flexRow, outlineNone, parseHeight } from "../../styles/general";
+import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 import OptionWrapper from "../others/option-wrapper";
 const {
   colors: {
     system: {
-      dark: systemDark,
-      white: systemWhite
-    },
-    fill: {
-      hover: fillHover,
-      pressed: fillPressed
+      dark: systemDark
     }
-  },
-  spacing
+  }
 } = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -139,29 +133,30 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const PopoverCSS = isOptionFull => css`
     ${isOptionFull ? flexCol : flexRow};
-    padding: ${isOptionFull ? spacing([1, 0]) : spacing([0, 2])};
+    ${pd(isOptionFull ? [1, 0] : [0, 2])}
 `;
 const OptionFullCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${cursorPointer};
     ${outlineNone};
     ${borderNone}
     ${parseHeight(28)};
-    padding: ${spacing([0, 4])};
-    gap: ${spacing([0, 1])};
-    background-color: ${systemWhite};
+    ${pd([0, 4])};
+    ${gap([0, 1])};
+    ${bgColor('system.white')};
     transition: all 0.5s ease;
     &:hover,
     &:focus {
-        background-color: ${fillHover};
+        ${bgColor('fill.hover')};
     }
     &:active {
-        background-color: ${fillPressed};
+        ${bgColor('fill.pressed')};
     }
 `;
 const ExtraPaddingCSS = css`
-    padding-left: ${spacing([6])};
+    ${pdl([6])};
 `;
 ButtonMore.defaultProps = {
   buttonProps: {},
@@ -192,19 +187,19 @@ ButtonMore.propTypes = {
   popoverProp: PropTypes.object,
   /** Style inline of component. */
   style: PropTypes.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
+  /**
+   * 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
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.93-beta.2",
+  "version": "1.3.93-beta.3",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",