@capillarytech/blaze-ui 0.1.6-alpha.59 → 0.1.6-alpha.6

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 = 'top',
-  visible,
-  defaultVisible = false,
-  trigger = 'hover',
-  destroyTooltipOnHide = false,
-  mouseEnterDelay = 0.1,
-  mouseLeaveDelay = 0.1,
-  overlayClassName = '',
-  overlayStyle,
-  onVisibleChange,
-  align,
-  arrowPointAtCenter = false,
-  autoAdjustOverflow = true,
-  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: 8px 12px;
-      font-size: 14px;
-      line-height: 20px;
+      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: 300px;
-      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;
-`;
+`;