chore: hide or disable select based on content (#264)

arcjet · Nov 21, 2024 · 15e87df · 15e87df
1 parent 7382fa7
commit 15e87df
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 16 deletions.
diff --git a/src/components/SDKVersionBun.astro b/src/components/SDKVersionBun.astro
@@ -1,4 +1,4 @@
-<picture>
+<picture class="badge">
     <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=000000&color=5C5866">
     <img alt="npm badge" src="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=ECE6F0&color=ECE6F0">
 </picture>
diff --git a/src/components/SDKVersionNextjs.astro b/src/components/SDKVersionNextjs.astro
@@ -1,4 +1,4 @@
-<picture>
+<picture class="badge">
     <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=000000&color=5C5866">
     <img alt="npm badge" src="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=ECE6F0&color=ECE6F0">
 </picture>
diff --git a/src/components/SDKVersionNodejs.astro b/src/components/SDKVersionNodejs.astro
@@ -1,4 +1,4 @@
-<picture>
+<picture class="badge">
     <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=000000&color=5C5866">
     <img alt="npm badge" src="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=ECE6F0&color=ECE6F0">
 </picture>
diff --git a/src/components/SDKVersionSvelteKit.astro b/src/components/SDKVersionSvelteKit.astro
@@ -1,4 +1,4 @@
-<picture>
+<picture class="badge">
     <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=000000&color=5C5866">
     <img alt="npm badge" src="https://img.shields.io/npm/v/arcjet?style=flat-square&label=%E2%9C%A6Aj&labelColor=ECE6F0&color=ECE6F0">
 </picture>
diff --git a/src/components/Select.module.scss b/src/components/Select.module.scss
@@ -7,6 +7,7 @@
     --primary-plain-activeColor: var(--aj-palette-source-white);
     --primary-plain-activeBorder: 1px solid
       rgba(var(--aj-palette-source-neutralRgb-07) / 0.3);
+    --primary-plain-disabledBg: rgba(var(--aj-palette-source-whiteRgb) / 0.04);
     --primary-plain-disabledColor: var(--aj-palette-source-neutral-03);
 
     --secondary-solid-idleBg: rgba(var(--aj-palette-source-whiteRgb) / 0.06);
@@ -18,6 +19,9 @@
     --secondary-plain-activeColor: var(--aj-palette-source-neutral-15);
     --secondary-plain-activeBorder: 1px solid
       rgba(var(--aj-palette-source-neutralRgb-07) / 0.3);
+    --secondary-plain-disabledBg: rgba(
+      var(--aj-palette-source-whiteRgb) / 0.02
+    );
     --secondary-plain-disabledColor: var(--aj-palette-source-neutral-03);
   }
 }
@@ -31,8 +35,10 @@
     --primary-plain-activeColor: var(--aj-palette-source-black);
     --primary-plain-activeBorder: 1px solid
       rgba(var(--aj-palette-source-neutralRgb-08) / 0.3);
+    --primary-plain-disabledBg: rgba(var(--aj-palette-source-blackRgb) / 0.04);
     --primary-plain-disabledColor: var(--aj-palette-source-neutral-12);
 
+    --secondary-solid-idleBg: rgba(var(--aj-palette-source-whiteRgb) / 0.06);
     --secondary-plain-idleColor: var(--aj-palette-source-neutral-04);
     --secondary-plain-hoverBg: rgba(
       var(--aj-palette-source-neutralRgb-12) / 0.3
@@ -41,6 +47,9 @@
     --secondary-plain-activeColor: var(--aj-palette-source-neutral-00);
     --secondary-plain-activeBorder: 1px solid
       rgba(var(--aj-palette-source-neutralRgb-08) / 0.3);
+    --secondary-plain-disabledBg: rgba(
+      var(--aj-palette-source-whiteRgb) / 0.02
+    );
     --secondary-plain-disabledColor: var(--aj-palette-source-neutral-12);
   }
 }
@@ -96,9 +105,9 @@
       --trigger-border: var(--primary-plain-activeBorder);
     }
 
-    &:disabled {
-      --trigger-color: var(--primary-plainColor);
-      --trigger-bg: transparent;
+    &.Disabled {
+      --trigger-color: var(--primary-plain-disabledColor);
+      --trigger-bg: var(--primary-plain-disabledBg);
       --trigger-border: none;
     }
 
@@ -128,9 +137,9 @@
       --trigger-border: var(--secondary-plain-activeBorder);
     }
 
-    &:disabled {
-      --trigger-color: var(--secondary-plainColor);
-      --trigger-bg: transparent;
+    &.Disabled {
+      --trigger-color: var(--secondary-plain-disabledColor);
+      --trigger-bg: var(--secondary-plain-disabledBg);
       --trigger-border: none;
     }
 
@@ -240,7 +249,9 @@
     line-height: 18px;
   }
 
-  &:disabled {
-    cursor: default;
+  &.Disabled {
+    .Select {
+      cursor: default;
+    }
   }
 }
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -55,6 +55,7 @@ const Select = forwardRef(
       onChange,
       onFocus,
       onBlur,
+      disabled,
       ...props
     }: Props,
     ref: ForwardedRef<HTMLSelectElement>,
@@ -114,6 +115,7 @@ const Select = forwardRef(
     if (trigger.size)
       clsWrapper +=
         " Size-" + trigger.size + " " + styles["Size-" + trigger.size];
+    if (disabled) clsWrapper += " " + styles.Disabled;
 
     let cls = "Select " + styles.Select;
 
@@ -132,6 +134,7 @@ const Select = forwardRef(
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChange={handleChange}
+          disabled={disabled}
           {...props}
         >
           {props.children}

diff --git a/src/components/SelectableContent.tsx b/src/components/SelectableContent.tsx
@@ -42,9 +42,6 @@ const SelectableContent = ({
   children,
   ...props
 }: Props) => {
-  let cls = "SelectableContent " + styles.SelectableContent;
-  if (className) cls += " " + className;
-
   const [selectedSlot, setSelectedSlot] = useState<Slot>();
   const [slots, setSlots] = useState<Slot[]>();
 
@@ -107,17 +104,21 @@ const SelectableContent = ({
     }
   }, [storedSyncKeyValue]);
 
+  let cls = "SelectableContent " + styles.SelectableContent;
+  if (className) cls += " " + className;
+
   // TODO: sync sync key with nano store
 
   return (
     <div className={cls}>
       <div className={styles.Toolbar}>
-        {slots && (
+        {slots && (slots.length > 1 || syncKey == "language") && (
           <Select
             onChange={onChange}
             value={selectedSlot?.key}
             trigger={{ size: "sm" }}
             level="secondary"
+            disabled={slots.length <= 1 && syncKey == "language"}
           >
             {slots.map((slot: Slot, idx: number) => {
               return (

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -570,3 +570,7 @@ h6,
     padding-block: clamp(2.5rem, calc(1rem + 6vmin), 6rem);
   }
 }
+
+.sl-markdown-content .badge img {
+  margin-top: 0px;
+}