fix disabled checkbox style

TerriaJS · Apr 26, 2021 · 8566f8e · 8566f8e
1 parent 3e53c15
commit 8566f8e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/lib/Styled/Checkbox/Checkbox.tsx b/lib/Styled/Checkbox/Checkbox.tsx
@@ -50,7 +50,6 @@ const Checkbox = memo(
     const id = useUID();
     return (
       <TextSpan
-        as={"label"}
         css={`
           display: flex;
           flex-shrink: 0;
@@ -59,9 +58,16 @@ const Checkbox = memo(
             //copy the global focus
             outline: 3px solid #c390f9;
           }
-          &:hover svg {
-            opacity: 0.6;
-          }
+          ${!isDisabled &&
+            `
+            &:hover svg {
+              opacity: 0.6;
+            }
+          `}
+          ${isDisabled &&
+            `
+            cursor: not-allowed;
+          `}
         `}
       >
         <HiddenCheckbox

diff --git a/lib/Styled/Checkbox/Elements/CheckboxIcon.tsx b/lib/Styled/Checkbox/Elements/CheckboxIcon.tsx
@@ -5,14 +5,18 @@ import { CheckboxIconProps } from "../types";
 
 const StyledCheckboxIcon = styled(StyledIcon).attrs({
   styledWidth: "1em"
-})`
+})<{ disabled?: boolean }>`
   top: 0.125em;
   align-self: flex-start;
   position: relative;
   fill: currentColor;
-  &:hover {
-    opacity: 0.6;
-  }
+  ${props =>
+    !props.disabled &&
+    `
+    &:hover {
+      opacity: 0.6;
+    }
+  `}
 `;
 
 const CheckboxIcon: React.FC<CheckboxIconProps> = (
@@ -22,6 +26,7 @@ const CheckboxIcon: React.FC<CheckboxIconProps> = (
     return (
       <StyledCheckboxIcon
         glyph={GLYPHS.checkboxOff}
+        disabled
         css={`
           opacity: 0.3;
         `}

diff --git a/lib/Styled/Text.tsx b/lib/Styled/Text.tsx
@@ -192,7 +192,8 @@ export const Text = styled.div<ITextProps>`
     props.isDisabled &&
     `
     opacity: 0.3;
-    `}
+    cursor: not-allowed;
+  `}
 
   ${props => props.overflowHide && ` overflow: hidden;`}
   ${props => props.overflowEllipsis && ` text-overflow: ellipsis;`}