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

package/CapLabel/styles.js

@@ -6,7 +6,7 @@ export const StyledLabelDiv = styled.div`
   font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
   font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
   margin: 0;
   padding: 0;
 `;
@@ -16,7 +16,7 @@ export const StyledLabelSpan = styled.span`
   font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
   font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
   margin: 0;
   padding: 0;
 `;

package/CapTooltipWithInfo/CapTooltipWithInfo.js

@@ -44,28 +44,20 @@ const CapTooltipWithInfo = ({
 };
 
 CapTooltipWithInfo.propTypes = {
-  /** Content to display in the tooltip */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  /** Size of the info icon */
   iconSize: PropTypes.oneOf(['xs', 's', 'm', 'l']),
-  /** Type of icon to display */
   iconType: PropTypes.string,
-  /** Placement of the tooltip relative to the icon */
   placement: PropTypes.oneOf([
     'top', 'left', 'right', 'bottom',
     'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
     'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
   ]),
-  /** How the tooltip is triggered */
   trigger: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),
-  /** Additional class name */
   className: PropTypes.string,
-  /** Additional props passed to the CapTooltip component */
   tooltipProps: PropTypes.object,
-  /** Additional props passed to the CapIcon component */
   iconProps: PropTypes.object,
 };
 

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -9,6 +9,13 @@ import withStyles from '../utils/withStyles';
 import withMemo from '../utils/withMemo';
 import { HeaderWrapper, selectStyles } from './styles';
 
+const SELECT_TYPES = {
+  SELECT: 'select',
+  MULTI_SELECT: 'multiSelect',
+  TREE_SELECT: 'treeSelect',
+  MULTI_TREE_SELECT: 'multiTreeSelect'
+};
+
 const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
 `;
@@ -168,8 +175,8 @@ const CapUnifiedSelect = ({
     if (!isEqual) setTempValue(value);
   }, [value]);
 
-  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
-  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
+  const isMulti = useMemo(() => type === SELECT_TYPES.MULTI_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
+  const isTree = useMemo(() => type === SELECT_TYPES.TREE_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
 
   const dataSource = useMemo(() => {
     if (!options?.length) return [];
@@ -396,7 +403,7 @@ const CapUnifiedSelect = ({
             </div>
           )}
 
-          {(type === 'select' || type === 'treeSelect') && (
+          {(type === SELECT_TYPES.SELECT || type === SELECT_TYPES.TREE_SELECT) && (
             <CapRow className="cap-unified-select-tree-clear-container" onClick={handleClearAll}>
               <CapLabel className="cap-unified-select-tree-clear-label">{clearText}</CapLabel>
             </CapRow>
@@ -471,7 +478,7 @@ const CapUnifiedSelect = ({
         {...rest}
       />
       {isError && (
-        <CapLabel className="cap-unified-select-status" style={{ color: 'red' }}>
+        <CapLabel className="cap-unified-select-status" style={{ color: styledVars.CAP_RED }}>
           {errorMessage}
         </CapLabel>
       )}
@@ -480,7 +487,7 @@ const CapUnifiedSelect = ({
 };
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  type: PropTypes.oneOf(Object.values(SELECT_TYPES)),
   options: PropTypes.array,
   value: PropTypes.any,
   containerClassName: PropTypes.string,
@@ -509,7 +516,7 @@ CapUnifiedSelect.propTypes = {
 };
 
 CapUnifiedSelect.defaultProps = {
-  type: 'select',
+  type: SELECT_TYPES.SELECT,
   placeholder: 'Select an option',
   searchBasedOn: 'label',
   noResultCustomText: 'No results found',

package/CapUnifiedSelect/styles.js

@@ -75,7 +75,6 @@ export const selectStyles = css`
 
     .cap-unified-tree-select {
       min-width: 14.286rem;
-      margin-top: 0.571rem;
       
       &.cap-unified-tree-select-readonly {
         pointer-events: none;
@@ -124,7 +123,7 @@ export const selectStyles = css`
       align-self: center;
     }
     .cap-unified-tree-select .ant-select-selector:focus {
-      border: 1px solid ${styledVars.CAP_G11};
+      border: 0.071rem solid ${styledVars.CAP_G11};
     }
     .cap-unified-tree-select .ant-select-tree-treenode {
       padding-left: ${styledVars.SPACING_04};
@@ -136,7 +135,7 @@ export const selectStyles = css`
 
   /* Common styles for all types */
   &.custom-popup-container {
-    width: max-content !important;
+    width: max-content;
 
     .ant-select-tree {
       .ant-select-tree-node-content-wrapper {
@@ -191,7 +190,7 @@ export const selectStyles = css`
       }
       .ant-select-tree-node-content-wrapper {
         border-radius: 0;
-        padding-left: 3px;
+        padding-left: 0.214rem;
       }
       .ant-select-tree-indent {
         margin-left: ${styledVars.SPACING_12};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.66",
+  "version": "0.1.6-alpha.67",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [

package/styled/variables.js

@@ -14,6 +14,8 @@ export const CAP_SECONDARY = {
   light: 'rgba("#2466ea", 0.1)',
 };
 
+export const NORMAL_LINE_HEIGHT = "normal";
+
 // Custom colors
 export const CAP_ORANGE = "#f87d23";
 export const CAP_ORANGE01 = "#ffe5d2";