diginet-core-ui 1.3.24 → 1.3.29

package/components/button/index.js

@@ -1,19 +1,43 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useEffect, useMemo, forwardRef } from 'react';
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import * as colors from '../../styles/colors';
+import OptionWrapper from '../others/option-wrapper';
+import * as allColors from '../../styles/colors';
+import { color as colors } from '../../styles/colors';
 import { Typography } from '../';
-import { detectColor, fade, hexToRgb, hslToRgb, isColor, isColorName, lighten, rgbaToHexA, rgbToHex } from '../../styles/color-helper';
-import { capitalize } from '../../utils';
-import * as Icons from '../../icons';
+import { detectColor, fade, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex, hexToRGBA } from '../../styles/color-helper';
 import Ripple from './ripple-effect';
-import theme from '../../theme/settings';
-import CircularProgress from "../progress/circular";
+import CircularProgress from '../progress/circular';
+import Icon from '../../icons';
+import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
+import { typography } from '../../styles/typography';
+const {
+  heading1,
+  heading2,
+  heading4,
+  heading5,
+  uppercase
+} = typography;
+const {
+  system: {
+    active,
+    disabled: systemDisabled,
+    rest,
+    white
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  fill: {
+    disabled: fillDisabled
+  }
+} = colors;
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
     let level = 3;
@@ -59,12 +83,21 @@ export const getRippleColor = (color, viewType, colors) => {
   }
 };
 export const getClassNameFromColor = color => {
-  if (!isColor(color) && !isColorName(color)) {
-    return color;
-  }
-
-  return 'custom-color';
+  return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
+const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const iconSizeMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
+const paddingSizeMap = new Map([['tiny', '4px 8px'], ['small', '6px 12px'], ['medium', '8px 16px'], ['large', '8px 20px'], ['giant', '8px 24px']]);
+const outlinedPaddingSizeMap = new Map([['tiny', '3px 7px'], ['small', '5px 11px'], ['medium', '7px 15px'], ['large', '7px 19px'], ['giant', '7px 23px']]);
+const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
+const typographySizeMap = new Map([['tiny', heading5], ['small', heading5], ['medium', heading4], ['large', heading2], ['giant', heading1]]);
+const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
+const alphaArr = {
+  hover: 0.1,
+  focus: 0.2,
+  active: 0.3
+};
+const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -81,470 +114,280 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   refs,
   loading,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+}, reference) => {
+  const ref = useRef(null);
+  label = label || text || '';
+  const iconSize = iconSizeMap.get(size);
+  const paddingSize = paddingSizeMap.get(size);
+  const outlinedPaddingSize = outlinedPaddingSizeMap.get(size);
+  const typographySize = typographySizeMap.get(size);
+  const iconMarginSize = iconMarginSizeMap.get(size);
+  const minHeightSize = minHeightSizeMap.get(size);
   const ButtonIcon = css`
-        display: flex;
-        position: relative;
-        box-sizing: border-box;
-        justify-content: center;
-        align-items: center;
+        ${flexRow}
+        ${alignCenter}
+        ${justifyCenter}
+        ${positionRelative}
+        ${borderBox}
     `;
   const ButtonText = css`
+        white-space: nowrap;
         color: inherit;
-        text-transform: inherit;
-        margin: 0 ${loading ? '5px' : 0};
+        margin: 0 ${loading ? iconMarginSize : 0};
     `;
   const ButtonRoot = css`
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
+        ${inlineFlex}
+        ${alignCenter}
+        ${justifyCenter}
+        ${positionRelative}
+        ${borderRadius4px}
+        ${borderBox}
+        ${uppercase}
+        ${cursorPointer}
+        ${overflowHidden}
+        ${outlineNone}
+        ${userSelectNone}
         height: max-content;
-        outline: none;
-        margin: 2px;
-        box-sizing: border-box;
-        border-radius: 4px;
         transition: all 0.5s;
-        overflow: hidden;
-        text-transform: ${theme.typography.button.textTransform};
-        cursor: pointer;
-        user-select: none;
-        &.text {
-            background-color: transparent;
-            border          : none !important;
-            &.default {
-                color : ${theme.colors.secondary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.secondary, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.secondary, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.secondary, 0.7)};
-                }
+        &.disabled {
+            cursor: not-allowed !important;
+            color: ${systemDisabled} !important;
+            &.outlined {
+                border-color: ${systemDisabled} !important;
+                background-color: transparent !important;
             }
-            &.primary {
-                color : ${theme.colors.primary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.primary, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.primary, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.primary, 0.7)};
-                }
+            &.filled {
+                background-color: ${fillDisabled} !important;
+                filter: brightness(1) !important;
             }
-            &.success {
-                color : ${theme.colors.success};
-                &:hover {
-                    background-color: ${lighten(theme.colors.success, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.success, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.success, 0.7)};
-                }
+            &.text {
+                background-color: transparent !important;
             }
-            &.warning {
-                color : ${theme.colors.warning};
-                &:hover {
-                    background-color: ${lighten(theme.colors.warning, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.warning, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.warning, 0.7)};
-                }
+        }
+        /* &:not(:disabled):focus {
+            box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
+        } */
+        &.loading {
+            ${pointerEventsNone}
+        }
+        &.${size} {
+            padding: ${paddingSize};
+            min-height: ${minHeightSize};
+            min-width: max-content;
+            &.outlined {
+                padding: ${outlinedPaddingSize};
             }
-            &.danger {
-                color : ${theme.colors.danger};
-                &:hover {
-                    background-color: ${lighten(theme.colors.danger, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.danger, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.danger, 0.7)};
-                }
+            .css-${ButtonText.name} {
+                ${typographySize};
             }
-            &.info {
-                color : ${theme.colors.info};
-                &:hover {
-                    background-color: ${lighten(theme.colors.info, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.info, 0.8)};
+            .css-${ButtonIcon.name} {
+                margin-right: ${endIcon || label ? iconMarginSize : 0};
+                &.DGN-UI-Button-End-Icon,
+                &.DGN-UI-Button-Custom-End-Icon {
+                    margin-right: unset;
+                    margin-left: ${startIcon || label ? iconMarginSize : 0};
                 }
-                &:active {
-                    background-color: ${lighten(theme.colors.info, 0.7)};
+                &.DGN-UI-Button-Start-Icon,
+                &.DGN-UI-Button-End-Icon {
+                    height: ${iconSize};
+                    width: ${iconSize};
                 }
             }
-            ${isColor(color) && `&.custom-color {
-                color : ${color};
-                &:hover {
-                    background-color: ${lighten(color, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(color, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(color, 0.7)};
-                }
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                color : ${isColorName(color)};
-                &:hover {
-                    background-color: ${lighten(isColorName(color), 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(isColorName(color), 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(isColorName(color), 0.7)};
-                }
-            }`}
+            .no-icon {
+                ${noMargin}
+                height: ${iconSize};
+                min-width: 0;
+            }
         }
         &.outlined {
-            font-weight: bold;
-            background-color: ${theme.colors.white};
+            ${backgroundTransparent}
             &.default {
-                border: 1px solid ${theme.colors.secondary};
-                color : ${theme.colors.default};
-                &:hover {
-                    background-color: ${lighten(theme.colors.default, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.default, 0.8)};
-                }
+                border: 1px solid ${rest};
+                color: ${rest};
+                &.loading,
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(theme.colors.default, 0.7)};
-                }
-            }
-            &.primary {
-                border: 1px solid ${theme.colors.primary};
-                color : ${theme.colors.primary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.primary, 0.9)};
+                    color: ${active};
+                    border-color: ${active};
                 }
-                &:focus {
-                    background-color: ${lighten(theme.colors.primary, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.primary, 0.7)};
-                }
-            }
-            &.success {
-                border: 1px solid ${theme.colors.success};
-                color : ${theme.colors.success};
-                &:hover {
-                    background-color: ${lighten(theme.colors.success, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.success, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.success, 0.7)};
-                }
-            }
-            &.warning {
-                border: 1px solid ${theme.colors.warning};
-                color : ${theme.colors.warning};
-                &:hover {
-                    background-color: ${lighten(theme.colors.warning, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.warning, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.warning, 0.7)};
+                &.loading {
+                    background-color: ${hexToRGBA(active, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(active, alphaArr[key])};
+                    }`)}// &:hover | &:focus | &:active
             }
-            &.danger {
-                border: 1px solid ${theme.colors.danger};
-                color : ${theme.colors.danger};
-                &:hover {
-                    background-color: ${lighten(theme.colors.danger, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.danger, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.danger, 0.7)};
+            &.${color} {
+                border: 1px solid ${colorMap.get(color)};
+                color: ${colorMap.get(color)};
+                &.loading {
+                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
             }
-            &.info {
-                border: 1px solid ${theme.colors.info};
-                color : ${theme.colors.info};
-                &:hover {
-                    background-color: ${lighten(theme.colors.info, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.info, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.info, 0.7)};
-                }
-            }
-            ${isColor(color) && `&.custom-color {
+            &.custom-color {
                 border: 1px solid ${color};
-                color : ${color};
-                &:hover {
-                    background-color: ${lighten(color, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(color, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(color, 0.7)};
+                color: ${color};
+                &.loading {
+                    background-color: ${hexToRGBA(color, alphaLoading)};
                 }
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                border: 1px solid ${isColorName(color)};
-                color : ${isColorName(color)};
-                &:hover {
-                    background-color: ${lighten(isColorName(color), 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(isColorName(color), 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(isColorName(color), 0.7)};
-                }
-            }`}
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
+            }
         }
         &.filled {
-            border     : none;
-            color      : ${theme.colors.white};
+            border: none;
+            color: ${white};
             font-weight: bold;
-            &:hover, &:focus {
+            &.loading,
+            &:hover,
+            &:focus {
                 filter: brightness(0.85);
             }
             &:active {
                 filter: brightness(0.7);
             }
             &.default {
-                background-color: ${theme.colors.secondary};
-            }
-            &.primary {
-                background-color: ${theme.colors.primary};
-            }
-            &.success {
-                background-color: ${theme.colors.success};
-            }
-            &.warning {
-                background-color: ${theme.colors.warning};
-            }
-            &.danger {
-                background-color: ${theme.colors.danger};
+                background-color: ${rest};
+                &.loading {
+                    background-color: ${active};
+                }
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: ${active};
+                }
             }
-            &.info {
-                background-color: ${theme.colors.info};
+            &.${color} {
+                background-color: ${colorMap.get(color)};
             }
-            ${isColor(color) && `&.custom-color {
+            &.custom-color {
                 background-color: ${color};
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                background-color: ${isColorName(color)};
-            }`}
-        }
-        &.tiny {
-            padding: 4px 8px;
-            &.outlined {
-                padding: 3px 7px;
-            }
-            .css-${ButtonText.name} {
-                font-size: 10px;
-                line-height: 16px;
-            }
-            .css-${ButtonIcon.name} {
-                max-height: 16px;
-                min-width: 16px;
-                max-width: 16px;
-                margin-right: 4px;
-                &.end-icon {
-                    margin-right: unset;
-                    margin-left: 4px;
-                }
             }
         }
-        &.small {
-            padding: 6px 12px;
-            &.outlined {
-                padding: 5px 11px;
-            }
-            .css-${ButtonText.name} {
-                font-size: 12px;
-                line-height: 20px;
-            }
-            .css-${ButtonIcon.name} {
-                max-height: 20px;
-                min-width: 20px;
-                max-width: 20px;
-                margin-right: 6px;
-                &.end-icon {
-                    margin-right: unset;
-                    margin-left: 6px;
+        &.text {
+            ${backgroundTransparent}
+            ${noBorder}
+            &.default {
+                color: ${rest};
+                &:hover,
+                &:focus,
+                &:active {
+                    color: ${active};
                 }
-            }
-        }
-        &.medium {
-            padding: 8px 16px;
-            &.outlined {
-                padding: 7px 15px;
-            }
-            .css-${ButtonText.name} {
-                font-size: 14px;
-                line-height: 24px;
-            }
-            .css-${ButtonIcon.name} {
-                max-height: 24px;
-                min-width: 24px;
-                max-width: 24px;
-                margin-right: 8px;
-                &.end-icon {
-                    margin-right: unset;
-                    margin-left: 8px;
+                &.loading {
+                    color: ${active};
+                    background-color: ${hexToRGBA(active, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(active, alphaArr[key])};
+                    }`)}
             }
-        }
-        &.large {
-            padding: 8px 20px;
-            &.outlined {
-                padding: 7px 19px;
-            }
-            .css-${ButtonText.name} {
-                font-size: 16px;
-                line-height: 32px;
-            }
-            .css-${ButtonIcon.name} {
-                max-height: 32px;
-                min-width: 32px;
-                max-width: 32px;
-                margin-right: 8px;
-                &.end-icon {
-                    margin-right: unset;
-                    margin-left: 8px;
+            &.${color} {
+                color: ${colorMap.get(color)};
+                &.loading {
+                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
             }
-        }
-        &.giant {
-            padding: 8px 24px;
-            &.outlined {
-                padding: 7px 23px;
-            }
-            .css-${ButtonText.name} {
-                font-size: 20px;
-                line-height: 40px;
-            }
-            .css-${ButtonIcon.name} {
-                max-height: 40px;
-                min-width: 40px;
-                max-width: 40px;
-                margin-right: 8px;
-                &.end-icon {
-                    margin-right: unset;
-                    margin-left: 8px;
+            &.custom-color {
+                color: ${color};
+                &.loading {
+                    background-color: ${hexToRGBA(color, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
             }
         }
-        &:disabled {
-            cursor: initial;
-            color: ${theme.colors.disabled} !important;
-            &.outlined, &.filled {
-                background-color: ${theme.colors.bgDisabled} !important;
-                filter: brightness(1);
+        &.link {
+            ${backgroundTransparent}
+            ${noBorder}
+            ${noPadding}
+            color: ${info};
+            &.loading,
+            &:hover,
+            &:focus {
+                filter: brightness(0.85);
             }
-            &.text {
-                background-color: transparent !important;
+            &:active {
+                filter: brightness(0.7);
             }
-            &.outlined {
-                border-color: ${theme.colors.disabled} !important;
+            &.${color} {
+                color: ${colorMap.get(color)};
             }
-            pointer-events: none;
-            &::after {
-                content: '';
-                position: absolute;
-                cursor: no-drop;
-                inset: 0;
-                pointer-events: auto;
-                z-index: 1;
+            &.custom-color {
+                color: ${color};
             }
         }
-        &:not(:disabled):focus {
-            box-shadow: ${viewType !== 'text' ? '0 0 0 2px ' + hexToRgb(colors.brand + '20') : 'none'};
-        }
     `;
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
-  useEffect(() => {
-    if (!children) {
-      ref.current.querySelector('.button-text').innerHTML = label || text;
-      return () => {
-        if (ref.current) {
-          ref.current.querySelector('.button-text').innerHTML = null;
-        }
-      };
-    }
-  }, [label, text]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const StartIcon = useMemo(() => {
     let node = startIcon;
 
     if (typeof node === 'string') {
-      const IconComp = Icons[capitalize(node)];
-
-      if (IconComp) {
-        node = jsx(IconComp, {
-          color: 'currentColor',
-          width: '100%',
-          height: '100%',
-          viewBox: true
-        });
-      }
+      node = jsx(Icon, {
+        name: node,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
+      return jsx("span", {
+        css: ButtonIcon,
+        className: 'DGN-UI-Button-Start-Icon'
+      }, node);
     }
 
     return jsx("span", {
-      css: ButtonIcon
+      css: ButtonIcon,
+      className: 'DGN-UI-Button-Custom-Start-Icon'
     }, node);
-  }, [startIcon]);
+  }, [startIcon, size]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
 
     if (typeof node === 'string') {
-      const IconComp = Icons[capitalize(node)];
-
-      if (IconComp) {
-        node = jsx(IconComp, {
-          color: 'currentColor',
-          width: '100%',
-          height: '100%',
-          viewBox: true
-        });
-      }
+      node = jsx(Icon, {
+        name: node,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
+      return jsx("span", {
+        css: ButtonIcon,
+        className: 'DGN-UI-Button-End-Icon'
+      }, node);
     }
 
     return jsx("span", {
       css: ButtonIcon,
-      className: 'end-icon'
+      className: 'DGN-UI-Button-Custom-End-Icon'
     }, node);
-  }, [endIcon]);
+  }, [endIcon, size]);
 
   const iconLoading = () => {
     return jsx(CircularProgress, {
-      size: "extraSmall",
-      background: "transparent",
+      size: 'extraSmall',
+      background: 'transparent',
       color: 'currentColor',
       strokeWidth: 3,
-      width: 24
+      width: parseInt(iconSize)
     });
   };
 
@@ -553,12 +396,14 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick && onClick(event);
   };
 
-  const ButtonView = useMemo(() => {
+  return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
     // 3. Có StartIcon + EndIcon => thay StartIcon
     // 4. Không có Icon => hiện thêm icon loading ở đầu
-    let start = startIcon ? StartIcon : null;
+    let start = startIcon ? StartIcon : jsx("span", {
+      className: 'no-icon'
+    });
     let end = endIcon ? EndIcon : null;
 
     if (loading) {
@@ -573,35 +418,26 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!startIcon && !endIcon) start = iconLoading();
     }
 
-    return jsx("button", _extends({
+    return jsx("button", {
       css: ButtonRoot,
       onClick: _onClick,
       ref: ref,
-      disabled: disabled,
       type: type,
-      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, className].join(' ').trim().replace(/\s+/g, ' ')
-    }, props), start && start, jsx("span", {
-      css: ButtonText
-    }, jsx(Typography, {
+      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'loading', disabled && 'disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      ...props
+    }, start, jsx(Typography, {
+      css: ButtonText,
       type: 'h4',
-      className: 'button-text',
-      color: 'inherit',
-      style: {
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        textTransform: 'inherit'
-      }
-    }, children || label || text)), end && end, jsx(Ripple, {
-      color: getRippleColor(color, viewType, colors)
+      className: 'button-text'
+    }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
+      color: getRippleColor(color, viewType, allColors)
     }));
-  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon]);
-  return ButtonView;
+  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label]);
 }));
 Button.defaultProps = {
   viewType: 'text',
   color: 'default',
   size: 'medium',
-  text: '',
   label: '',
   className: '',
   disabled: false,
@@ -612,7 +448,7 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 
   /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled']),
+  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
 
   /** color for button */
   color: PropTypes.string,
@@ -620,9 +456,6 @@ Button.propTypes = {
   /** size button */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
-  /** text to display in button */
-  text: PropTypes.string,
-
   /** the content to display in button (like text prop) */
   label: PropTypes.string,
 
@@ -648,6 +481,18 @@ Button.propTypes = {
   props: PropTypes.any,
 
   /** status loading of button */
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+
+  /**
+  * ref methods
+  * 
+  * * onClick(): Call onClick function
+  * * option(): Gets all UI component properties
+  * * option(optionName): Gets the value of a single property.
+  * * option(optionName, optionValue): Updates the value of a single property
+  * * option(options): Updates the values of several properties
+  */
+  ref: PropTypes.any
 };
-export default Button;
+export { Button };
+export default OptionWrapper(Button);