Add stories for TextArea & toggle + handle styles

4ian · Sep 13, 2024 · 20c66a7 · 20c66a7
1 parent 378b0c3
commit 20c66a7
Show file tree

Hide file tree

Showing 12 changed files with 422 additions and 15 deletions.
diff --git a/newIDE/app/src/UI/CompactTextAreaField/index.js b/newIDE/app/src/UI/CompactTextAreaField/index.js
@@ -19,7 +19,7 @@ const styles = {
   },
 };
 
-export type CompactTextFieldProps = {|
+export type CompactTextAreaFieldProps = {|
   label: string,
   markdownDescription?: ?string,
   value: string,
@@ -50,7 +50,7 @@ export const CompactTextAreaField = ({
   disabled,
   errored,
   placeholder,
-}: CompactTextFieldProps) => {
+}: CompactTextAreaFieldProps) => {
   const idToUse = React.useRef<string>(id || makeTimestampedId());
 
   const title = !markdownDescription

diff --git a/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css b/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css
@@ -25,32 +25,57 @@
 
 .slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #3a3a3a;
+  background-color: var(--theme-toggle-field-default-background-color);
   transition: 0.2s;
   border-radius: 16px;
 }
-
-.slider:before {
+.handle {
   position: absolute;
   content: '';
   height: 12px;
   width: 12px;
-  left: 2px;
-  bottom: 2px;
-  background-color: white;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--theme-toggle-field-default-slider-color);
   transition: 0.2s;
   border-radius: 50%;
+  z-index: 2;
+}
+.handleContainer {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: -1px;
+  bottom: -1px;
+  background-color: none;
+  border-radius: 50%;
+  z-index: 1;
+  transition: 0.2s;
 }
 
-.slider.checked {
-  background-color: #4c2f8c;
+.slider:hover .handleContainer:not(.disabled) {
+  background-color: var(--theme-toggle-field-hover-slider-aura-color);
 }
 
-.slider.checked:before {
+.handleContainer.checked {
   transform: translateX(16px);
 }
+
+.slider.checked {
+  background-color: var(--theme-toggle-field-active-background-color);
+}
+.handle.checked {
+  background-color: var(--theme-toggle-field-active-slider-color);
+}
+
+.slider.disabled {
+  background-color: var(--theme-toggle-field-disabled-background-color);
+}
+.handle.disabled {
+  background-color: var(--theme-toggle-field-disabled-slider-color);
+}
diff --git a/newIDE/app/src/UI/CompactToggleField/index.js b/newIDE/app/src/UI/CompactToggleField/index.js
@@ -43,13 +43,31 @@ export const CompactToggleField = (props: Props) => {
           type="checkbox"
           class={classes.checkbox}
           onChange={() => props.onCheck(!props.checked)}
+          disabled={props.disabled}
         />
         <span
           class={classNames({
             [classes.slider]: true,
             [classes.checked]: props.checked,
+            [classes.disabled]: props.disabled,
           })}
-        />
+        >
+          <span
+            class={classNames({
+              [classes.handleContainer]: true,
+              [classes.checked]: props.checked,
+              [classes.disabled]: props.disabled,
+            })}
+          >
+            <span
+              class={classNames({
+                [classes.handle]: true,
+                [classes.checked]: props.checked,
+                [classes.disabled]: props.disabled,
+              })}
+            />
+          </span>
+        </span>
       </div>
       <Tooltip
         title={title}

diff --git a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json
@@ -497,6 +497,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#008DFF"
+        },
+        "background-color": {
+          "value": "#006DEE"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
@@ -746,4 +782,4 @@
       }
     }
   }
-}
+}
diff --git a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json
@@ -573,6 +573,44 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#606166",
+          "comment": "Palette/Grey/60"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#5028cc",
+          "comment": "Palette/Purple/50"
+        },
+        "background-color": {
+          "value": "#9979f1",
+          "comment": "Palette/Purple/30"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
@@ -824,4 +862,4 @@
       }
     }
   }
-}
+}
diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json
@@ -561,6 +561,44 @@
           "value": "rgba(79, 40, 205, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#606166",
+          "comment": "Palette/Grey/60"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#5028cc",
+          "comment": "Palette/Purple/50"
+        },
+        "background-color": {
+          "value": "#9979f1",
+          "comment": "Palette/Purple/30"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#A6A6AB",
+          "comment": "Palette/Grey/40"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(197, 197, 201, 0.30)",
+          "comment": "Palette/Grey/30 and alpha"
+        }
+      }
     }
   },
   "input": {

diff --git a/newIDE/app/src/UI/Theme/NordTheme/theme.json b/newIDE/app/src/UI/Theme/NordTheme/theme.json
@@ -488,6 +488,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#7EA1CC"
+        },
+        "background-color": {
+          "value": "#5E81AC"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {

diff --git a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json
@@ -503,6 +503,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#81CFFF"
+        },
+        "background-color": {
+          "value": "#61AFEF"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {

diff --git a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json
@@ -489,6 +489,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#E4C7FF"
+        },
+        "background-color": {
+          "value": "#C4A7E7"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {