switch: small size variant and css fix

GooeyAI · Oct 24, 2024 · f89acf7 · f89acf7
1 parent d61cb49
commit f89acf7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 24 deletions.
diff --git a/app/components/GooeySwitch.tsx b/app/components/GooeySwitch.tsx
@@ -11,7 +11,7 @@ const GooeySwitch: React.FC<GooeySwitchProps> = ({
   props,
   state,
 }: GooeySwitchProps) => {
-  const { label, name, defaultChecked, className = "" , ...args } = props;
+  const { label, name, defaultChecked, className = "", size = 'large', ...args } = props;
   const inputRef = useGooeyCheckedInput({
     stateChecked: state[name],
     defaultChecked,
@@ -21,11 +21,12 @@ const GooeySwitch: React.FC<GooeySwitchProps> = ({
       <RenderedMarkdown body={label} />
       <div className="gooey-switch-container">
         <input
+          hidden
           ref={inputRef}
           id={name}
           name={name}
           defaultChecked={defaultChecked}
-          className="gooey-switch gooey-switch--shadow"
+          className={`gooey-switch gooey-switch--shadow--${size}`}
           {...args}
           type="checkbox"
         />

diff --git a/app/styles/custom.css b/app/styles/custom.css
@@ -795,16 +795,17 @@ button {
   font: inherit;
 }
 
+/* Reset heading margins */
 .gooey-switch-container h1, h2, h3, h4, h5, h6 {
   margin: 0;
 }
 
+/* Hide the actual switch input */
 .gooey-switch {
   visibility: hidden;
-  position: absolute;
-  margin-left: -9999px;
 }
 
+/* Label for the switch */
 .gooey-switch + label {
   display: block;
   position: relative;
@@ -813,38 +814,75 @@ button {
   user-select: none;
 }
 
-.gooey-switch--shadow + label {
-  padding: 2px;
-  width: 48px;
-  height: 24px;
-  background-color: #dddddd;
-  border-radius: 60px;
-}
-.gooey-switch--shadow + label:before,
-.gooey-switch--shadow + label:after {
-  display: block;
+/* Track (background) styles */
+.gooey-switch + label:before {
+  content: "";
   position: absolute;
   top: 1px;
   left: 1px;
   bottom: 1px;
-  content: "";
-}
-.gooey-switch--shadow + label:before {
   right: 1px;
   background-color: #f1f1f1;
-  border-radius: 24px;
+  border-radius: inherit;
   transition: background 0.4s;
 }
-.gooey-switch--shadow + label:after {
-  width: 22px;
+
+/* Ball (knob) styles */
+.gooey-switch + label:after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
   background-color: #fff;
-  border-radius: 100%;
+  border-radius: 50%;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
   transition: all 0.2s;
 }
-.gooey-switch--shadow:checked + label:before {
-  background-color: #02c4c8 !important;
+
+/* Checked state */
+.gooey-switch:checked + label:before {
+  background-color: #02c4c8;
+}
+
+/* Large Variant */
+.gooey-switch--shadow--large + label {
+  width: 48px;
+  height: 24px;
+  background-color: #ddd;
+  border-radius: 60px;
+  padding: 2px;
+}
+.gooey-switch--shadow--large + label:after {
+  width: 22px;
+  height: 22px;
+  transition: transform 0.2s ease;
 }
-.gooey-switch--shadow:checked + label:after {
+.gooey-switch--shadow--large:checked + label:after {
   transform: translateX(24px);
 }
+
+/* Small Variant */
+.gooey-switch--shadow--small + label {
+  width: 36px;
+  height: 20px;
+  background-color: #ddd;
+  border-radius: 30px;
+  padding: 1px;
+}
+.gooey-switch--shadow--small + label:after {
+  width: 18px;
+  height: 18px;
+  transition: transform 0.2s ease;
+}
+.gooey-switch--shadow--small:checked + label:after {
+  transform: translateX(16px);
+}
+
+/* Cross-browser support (vendor prefixes) */
+.gooey-switch + label:before, 
+.gooey-switch + label:after {
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
diff --git a/py/gooey_gui/components/common.py b/py/gooey_gui/components/common.py
@@ -1052,6 +1052,7 @@ def switch(
     help: str = None,
     *,
     disabled: bool = False,
+    size: str = "large",
     label_visibility: LabelVisibility = "visible",
     **props,
 ) -> bool:
@@ -1068,6 +1069,7 @@ def switch(
             "defaultChecked": value,
             "help": help,
             "disabled": disabled,
+            "size": size,
             **props,
         },
     ).mount()