@dvrd/dvr-controls 1.0.63 → 1.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/checkbox/checkbox.tsx

@@ -84,12 +84,12 @@ export default function DvrdCheckbox(props: Props) {
         }
         return {borderColor: convertColor(color)};
     }, [error, useDarkestColor, isHovered, disabled, baseColor, contrastColor]);
-    const checkStyle: CSSProperties = useMemo(() => {
+    const [checkStyle, partialCheckStyle]: [CSSProperties, CSSProperties] = useMemo(() => {
         let color: string = baseColor;
         if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
         else if (useDarkestColor) color = findDarkestColor(baseColor, contrastColor);
-        return {color: convertColor(color)};
+        return [{color: convertColor(color)}, {backgroundColor: convertColor(color)}];
     }, [error, disabled, useDarkestColor, baseColor, contrastColor]);
     const mainColor = useMemo(() => {
         return useDarkestColor ? findDarkestColor(baseColor, contrastColor) : baseColor;
@@ -114,11 +114,15 @@ export default function DvrdCheckbox(props: Props) {
             className: classNames(checkIcon.props.className, checkClassName),
             style: {...checkIcon.props.style, ...checkStyle}
         });
+        else if (checked === 'partial') return (
+            <div className={classNames(checkClassName, 'partial-icon')} style={partialCheckStyle}/>
+        );
         let checkName: IconName = 'check';
-        if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
+        let additionalClassName: string | null = null;
+        if (typeof checkIcon === 'string') checkName = checkIcon as IconName;
         else if (asRadio) checkName = 'circle';
-        else if (checked === 'partial') checkName = 'minus';
-        return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
+        return <AwesomeIcon name={checkName} className={classNames(checkClassName, additionalClassName)}
+                            style={checkStyle}/>;
     }
 
     function renderError() {

package/src/js/checkbox/style/checkbox.scss

@@ -47,6 +47,13 @@
       transition: opacity .1s ease-in-out, visibility .1s ease-in-out;
       user-select: none;
 
+      &.partial-icon {
+        top: 50%;
+        width: 12px;
+        height: 3px;
+        border-radius: 4px;
+      }
+
       &.checked {
         visibility: visible;
         opacity: 1;