@capillarytech/blaze-ui 0.1.6-alpha.67 → 0.1.6-alpha.7

package/CapTable/styles.js

@@ -1,4 +1,4 @@
-import { Table } from 'antd-v5';
+import { Table } from 'antd';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 
@@ -28,9 +28,9 @@ export const StyledTable = styled(Table)`
       position: absolute;
       width: 100%;
       align-items: center;
-      height: 4.286rem;
+      height: 60px;
       text-align: center;
-      font-size: 1.143rem;
+      font-size: 16px;
       color: gray;
       border-top: 1px solid ${CAP_G07};
     }
@@ -47,6 +47,26 @@ export const StyledTable = styled(Table)`
       text-align: left;
     }
 
+    .ant-table-placeholder {
+      .ant-table-cell {
+        border-bottom: none;
+        &:hover {
+          background: none !important;
+        }
+      }
+    }
+
+    .ant-empty {
+      margin: 32px 0;
+      .ant-empty-image {
+        height: 40px;
+        margin-bottom: 8px;
+      }
+      .ant-empty-description {
+        color: ${CAP_G06};
+      }
+    }
+
     .ant-table-thead > tr > th,
     .ant-table-tbody > tr > td {
       padding: ${SPACING_16} ${SPACING_24};
@@ -79,7 +99,7 @@ export const StyledTable = styled(Table)`
 
     .ant-table-thead {
       .table-children {
-        padding: 0.429rem ${SPACING_24} 1.143rem;
+        padding: 6px ${SPACING_24} 16px;
         position: relative;
       }
 
@@ -90,8 +110,8 @@ export const StyledTable = styled(Table)`
 
       .table-children.show-separator:not(:last-child)::after {
         content: '';
-        height: 0.571rem;
-        width: 0.071rem;
+        height: 8px;
+        width: 1px;
         right: 0;
         top: 30%;
         background-color: ${CAP_G07};

package/CapTooltip/CapTooltip.js

@@ -1,98 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'antd-v5';
-import classnames from 'classnames';
-import styled from 'styled-components';
-import { tooltipStyles } from './styles';
-import withStyles from '../utils/withStyles';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { TooltipWrapper } from './styles';
 
-const StyledTooltip = styled(Tooltip)`
-  ${tooltipStyles}
-`;
-
-const CapTooltip = ({
-  title,
-  children,
-  placement,
-  visible,
-  defaultVisible,
-  trigger,
-  destroyTooltipOnHide,
-  mouseEnterDelay,
-  mouseLeaveDelay,
-  overlayClassName,
-  overlayStyle,
-  onVisibleChange,
-  align,
-  arrowPointAtCenter,
-  autoAdjustOverflow,
-  getPopupContainer,
-  className,
-  ...rest
-}) => {
+const CapTooltip = ({ overlayClassName, children, ...rest }) => {
   return (
-    <StyledTooltip
-      title={title}
-      placement={placement}
-      open={visible}
-      defaultOpen={defaultVisible}
-      trigger={trigger}
-      destroyTooltipOnHide={destroyTooltipOnHide}
-      mouseEnterDelay={mouseEnterDelay}
-      mouseLeaveDelay={mouseLeaveDelay}
-      overlayClassName={classnames('cap-tooltip-overlay-v2', overlayClassName)}
-      overlayStyle={overlayStyle}
-      onOpenChange={onVisibleChange}
-      align={align}
-      arrow={{ pointAtCenter: arrowPointAtCenter }}
-      autoAdjustOverflow={autoAdjustOverflow}
-      getPopupContainer={getPopupContainer}
-      className={classnames('cap-tooltip-v2', className)}
-      {...rest}
-    >
-      {children}
-    </StyledTooltip>
+    <TooltipWrapper>
+      <Tooltip
+        overlayClassName={classNames('cap-tooltip', overlayClassName)}
+        {...rest}
+      >
+        {children}
+      </Tooltip>
+    </TooltipWrapper>
   );
 };
 
+/*
+  NOTE:
+    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
+
+    <CapTooltip title="disabled button with tooltip">
+      <span className="button-disabled-tooltip-wrapper">
+        <CapButton disabled>Button</CapButton>
+      </span>
+    </CapTooltip>
+*/
+
 CapTooltip.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  children: PropTypes.node,
-  placement: PropTypes.oneOf([
-    'top', 'left', 'right', 'bottom',
-    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
-    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
-  ]),
-  visible: PropTypes.bool,
-  defaultVisible: PropTypes.bool,
-  trigger: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-  destroyTooltipOnHide: PropTypes.bool,
-  mouseEnterDelay: PropTypes.number,
-  mouseLeaveDelay: PropTypes.number,
   overlayClassName: PropTypes.string,
-  overlayStyle: PropTypes.object,
-  onVisibleChange: PropTypes.func,
-  align: PropTypes.object,
-  arrowPointAtCenter: PropTypes.bool,
-  autoAdjustOverflow: PropTypes.bool,
-  getPopupContainer: PropTypes.func,
-  className: PropTypes.string,
-};
-
-CapTooltip.defaultProps = {
-  placement: 'top',
-  defaultVisible: false,
-  trigger: 'hover',
-  destroyTooltipOnHide: false,
-  mouseEnterDelay: 0.1,
-  mouseLeaveDelay: 0.1,
-  overlayClassName: '',
-  arrowPointAtCenter: false,
-  autoAdjustOverflow: true,
-  className: '',
+  children: PropTypes.node,
 };
 
-export default withStyles(CapTooltip, tooltipStyles);
+export default CapTooltip;

package/CapTooltip/index.js

@@ -1,3 +1 @@
-import CapTooltip from './CapTooltip';
-
-export default CapTooltip;
+export { default } from './CapTooltip';

package/CapTooltip/styles.js

@@ -1,34 +1,42 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const tooltipStyles = css`
-  &.cap-tooltip-overlay-v2 {
+export const TooltipWrapper = styled.span`
+  .cap-tooltip {
+    max-width: 324px;
+
     .ant-tooltip-inner {
-      background-color: ${styledVars.CAP_G01};
-      color: ${styledVars.CAP_WHITE};
-      padding: ${styledVars.SPACING_08} ${styledVars.SPACING_12};
-      font-size: 1rem;
-      line-height: 1.429rem;
+      background-color: ${styledVars.FONT_COLOR_01};
+      font-size: ${styledVars.FONT_SIZE_M};
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      padding: 6px 8px;
+      min-height: 32px;
       border-radius: ${styledVars.RADIUS_04};
-      max-width: 21.429rem;
-      word-wrap: break-word;
     }
 
-    .ant-tooltip-arrow::before {
-      background-color: ${styledVars.CAP_G01};
+    &.cap-bgcolor-tooltip {
+      .ant-tooltip-inner {
+        background-color: ${styledVars.FONT_COLOR_05};
+      }
+    }
+
+    &.hide-tooltip-pointer {
+      .ant-tooltip-arrow {
+        display: none;
+      }
     }
   }
 
   .button-disabled-tooltip-wrapper {
-    display: inline-block;
+    display: inline-flex;
     cursor: not-allowed;
 
-    .ant-btn[disabled] {
+    .cap-button.ant-btn[disabled] {
       pointer-events: none;
+      & > * {
+        pointer-events: auto;
+        cursor: not-allowed;
+      }
     }
   }
-`;
-
-export const StyledTooltipWrapper = styled.div`
-  display: inline-block;
-`;
+`;