Foof

gitpod-io · Nov 14, 2023 · cca6b48 · cca6b48
1 parent a38757f
commit cca6b48
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 78 deletions.
diff --git a/components/dashboard/package.json b/components/dashboard/package.json
@@ -10,6 +10,7 @@
     "@gitpod/gitpod-protocol": "0.1.5",
     "@gitpod/public-api": "0.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.0.7",

diff --git a/components/dashboard/src/components/podkit/forms/Label.tsx b/components/dashboard/src/components/podkit/forms/Label.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "@podkit/lib/cn";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+export const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/components/dashboard/src/components/podkit/forms/RadioListField.tsx b/components/dashboard/src/components/podkit/forms/RadioListField.tsx
@@ -5,91 +5,42 @@
  */
 
 import { cn } from "@podkit/lib/cn";
-import * as RadioGroup from "@radix-ui/react-radio-group";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
-import React, { useCallback } from "react";
-import { useId } from "../../../hooks/useId";
-import { InputField } from "../../forms/InputField";
-import { InputFieldHint } from "../../forms/InputFieldHint";
-
-type RadioListFieldProps = {
-    id?: string;
-    selectedValue: string;
-    hint?: React.ReactNode;
-    error?: React.ReactNode;
-    topMargin?: boolean;
-    onChange: (value: string) => void;
-    children: RadioListItem[];
-    className?: string;
-};
+import React from "react";
 
 export const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroup.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroup.Item>
+    React.ElementRef<typeof RadioGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
     return (
-        <RadioGroup.Item
+        <RadioGroupPrimitive.Item
             ref={ref}
             className={cn(
-                "aspect-square h-4 w-4 rounded-full border ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                "dark:accent-kumquat-ripe accent-gitpod-black",
+                "aspect-square h-4 w-4 rounded-full border-2 ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0 text-black dark:text-gray-200 border-black dark:border-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 bg-inherit",
+                // "dark:accent-kumquat-ripe accent-gitpod-black",
                 className,
             )}
             {...props}
         >
-            <RadioGroup.Indicator className="flex items-center justify-center">
-                <Circle className="h-2.5 w-2.5 fill-current text-current" />
-            </RadioGroup.Indicator>
-        </RadioGroup.Item>
+            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+                <Circle className="h-1.5 w-1.5 fill-current text-current" />
+            </RadioGroupPrimitive.Indicator>
+        </RadioGroupPrimitive.Item>
     );
 });
-RadioGroupItem.displayName = RadioGroup.Item.displayName;
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 export type RadioListItem = {
     radio: React.ReactElement;
     label: React.ReactNode;
     hint?: React.ReactNode;
 };
 
-export const RadioListField: React.FC<RadioListFieldProps> = ({
-    id,
-    selectedValue,
-    error,
-    topMargin = true,
-    onChange,
-    children,
-    className,
-}) => {
-    const maybeId = useId();
-    const elementId = id || maybeId;
-
-    const handleChange = useCallback(
-        (value) => {
-            onChange(value);
-        },
-        [onChange],
-    );
-
-    return (
-        <InputField error={error} topMargin={topMargin}>
-            <RadioGroup.Root
-                className={cn("grid gap-2", className)}
-                value={selectedValue}
-                onValueChange={handleChange}
-                aria-labelledby={elementId}
-            >
-                {children.map((child, index) => (
-                    <div key={index} className="flex flex-col">
-                        {React.cloneElement(child.radio, {
-                            id: `${elementId}-${index}`,
-                        })}
-                        <label className="text-sm font-semibold pl-2 cursor-pointer" htmlFor={`${elementId}-${index}`}>
-                            {child.label}
-                        </label>
-                        {child.hint && <InputFieldHint>{child.hint}</InputFieldHint>}
-                    </div>
-                ))}
-            </RadioGroup.Root>
-        </InputField>
-    );
-};
+export const RadioGroup = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+    return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
diff --git a/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx b/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx
@@ -5,9 +5,10 @@
  */
 
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
-import { RadioGroupItem, RadioListField } from "../../../components/podkit/forms/RadioListField";
 import { useState } from "react";
 import { useWorkspaceClasses } from "../../../data/workspaces/workspace-classes-query";
+import { Label } from "@podkit/forms/Label";
+import { RadioGroup, RadioGroupItem } from "@podkit/forms/RadioListField";
 
 interface Props {
     configuration: Configuration;
@@ -28,14 +29,13 @@ export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => {
     }
 
     return (
-        <RadioListField
-            selectedValue={selectedValue}
-            onChange={setSelectedValue}
-            children={classes.map((c) => ({
-                radio: <RadioGroupItem value={c.id} />,
-                label: c.displayName,
-                hint: c.description,
-            }))}
-        />
+        <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+            {classes.map((wsClass) => (
+                <div className="flex items-center space-x-2 my-4">
+                    <RadioGroupItem value={wsClass.id} id={wsClass.id} />
+                    <Label htmlFor={wsClass.id}>{wsClass.displayName}</Label>
+                </div>
+            ))}
+        </RadioGroup>
     );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2580,6 +2580,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-label@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
+  integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/[email protected]":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"