fix: add orientation to the PropertyControl and set horizontal as default

mu29 · mu29 · commit 64e141be960e · 2025-11-03T19:16:03.000+09:00
diff --git a/packages/react/src/editor/PropertyControl/PropertyControl.module.css b/packages/react/src/editor/PropertyControl/PropertyControl.module.css
@@ -1,31 +1,79 @@
-.PropertyControl {
+.frame {
   display: flex;
+  grid-column: 1 / -1;
+}
+
+.frame--orientation-horizontal {
+  gap: 8px;
+  align-items: center;
+}
+
+.frame--orientation-vertical {
+  gap: 4px;
   flex-direction: column;
+  align-items: stretch;
 }
 
-.PropertyControl-Header {
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 1.75rem;
+  height: 26px;
 }
 
-.PropertyControl-Label {
-  color: var(--composify-palette-on-surface);
+.header--orientation-horizontal {
+  flex: 1;
+}
+
+.header--compact {
+  display: none;
+}
+
+.label {
+  color: var(--composify-palette-on-surface-variant);
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
-.PropertyControl-OptionalButton {
+.input {
   display: flex;
+  flex: 2;
+  gap: 4px;
+}
+
+.input > :not([data-slot="remove-button"]) {
+  flex: 1;
+}
+
+.addButton {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 8px;
+  font-size: 12px;
+  outline: none;
+  border-radius: 4px;
+  border: 1px solid var(--composify-palette-outline);
+  color: var(--composify-palette-on-surface-variant);
+  background-color: var(--composify-palette-surface-container-low);
+}
+
+.removeButton {
+  display: inline-flex;
+  align-self: center;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  padding: 0.375rem;
-  margin-right: -0.375rem;
+  width: 26px;
+  height: 26px;
   outline: none;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: 4px;
   background-color: transparent;
-  fill: var(--composify-palette-secondary);
+  transition: background-color 0.15s;
+  cursor: pointer;
+  color: var(--composify-palette-on-surface-variant);
+}
+
+.removeButton:hover {
+  background-color: var(--composify-palette-surface-container);
 }
diff --git a/packages/react/src/editor/PropertyControl/PropertyControl.tsx b/packages/react/src/editor/PropertyControl/PropertyControl.tsx
@@ -1,6 +1,7 @@
+import { MinusIcon } from 'lucide-react';
 import { type ReactNode, useCallback } from 'react';
 import type { PropertySpec } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
+import { createVariants } from '../../utils';
 import { useEditing } from '../EditingContext';
 import styles from './PropertyControl.module.css';
 
@@ -9,18 +10,20 @@ type Props<SpecValue, Value = SpecValue> = {
   spec: PropertySpec<SpecValue>;
   defaultValue: Value;
   value?: Value;
+  orientation?: 'horizontal' | 'vertical';
   compact?: boolean;
   onChange?: (name: string, value?: Value) => void;
   renderInput: (value: Value, onChange: (value?: Value) => void) => ReactNode;
 };
 
-const getClassName = getClassNameFactory('PropertyControl', styles);
+const variants = createVariants(styles);
 
 export const PropertyControl = <SpecValue, Value = SpecValue>({
   name,
   spec,
   defaultValue,
   value,
+  orientation = 'horizontal',
   compact,
   onChange,
   renderInput,
@@ -55,40 +58,41 @@ export const PropertyControl = <SpecValue, Value = SpecValue>({
   );
 
   return (
-    <div className={getClassName()}>
-      {compact ? null : (
-        <div className={getClassName('Header')}>
-          <span className={getClassName('Label')}>{spec.label}</span>
-          {spec.optional && (
-            <button
-              type="button"
-              className={getClassName('OptionalButton')}
-              onClick={handleClickOptional}
-            >
-              {isEffectiveValueDefined ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={16}
-                  height={16}
-                  viewBox="0 0 640 640"
-                >
-                  <path d="M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z" />
-                </svg>
-              ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={14}
-                  height={14}
-                  viewBox="0 0 640 640"
-                >
-                  <path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z" />
-                </svg>
-              )}
-            </button>
-          )}
-        </div>
-      )}
-      {isEffectiveValueDefined && renderInput(effectiveValue, handleChange)}
+    <div className={variants('frame', { orientation })}>
+      <div className={variants('header', { orientation, compact })}>
+        <span className={variants('label')}>{spec.label}</span>
+        {spec.optional && orientation === 'vertical' && isEffectiveValueDefined && (
+          <button
+            data-slot="remove-button"
+            type="button"
+            className={variants('removeButton')}
+            onClick={handleClickOptional}
+          >
+            <MinusIcon />
+          </button>
+        )}
+      </div>
+      <div className={variants('input')}>
+        {isEffectiveValueDefined ? (
+          <>
+            {renderInput(effectiveValue, handleChange)}
+            {spec.optional && orientation === 'horizontal' && (
+              <button
+                data-slot="remove-button"
+                type="button"
+                className={variants('removeButton')}
+                onClick={handleClickOptional}
+              >
+                <MinusIcon />
+              </button>
+            )}
+          </>
+        ) : (
+          <button type="button" className={variants('addButton')} onClick={handleClickOptional}>
+            Add..
+          </button>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/packages/react/src/editor/PropertyControlArray/PropertyControlArray.stories.tsx b/packages/react/src/editor/PropertyControlArray/PropertyControlArray.stories.tsx
@@ -78,6 +78,7 @@ export const WithObjectItems = () => {
             { name: 'Alice', age: 30 },
             { name: 'Bob', age: 25 },
           ],
+          optional: true,
         }}
         value={value}
         onChange={(_, next) => setValue(next)}
diff --git a/packages/react/src/editor/PropertyControlArray/PropertyControlArray.tsx b/packages/react/src/editor/PropertyControlArray/PropertyControlArray.tsx
@@ -26,6 +26,7 @@ const getClassName = getClassNameFactory('PropertyControlArray', styles);
 export const PropertyControlArray = ({ name, spec, ...props }: Props) => (
   <PropertyControl<any[]>
     {...props}
+    orientation="vertical"
     name={name}
     spec={spec}
     defaultValue={spec.default ?? []}
diff --git a/packages/react/src/editor/PropertyControlNumber/PropertyControlNumber.module.css b/packages/react/src/editor/PropertyControlNumber/PropertyControlNumber.module.css
@@ -1,5 +1,6 @@
 .PropertyControlNumber {
   flex: 1;
+  field-sizing: content;
   padding: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.4;
diff --git a/packages/react/src/editor/PropertyControlNumber/PropertyControlNumber.tsx b/packages/react/src/editor/PropertyControlNumber/PropertyControlNumber.tsx
@@ -21,6 +21,7 @@ export const PropertyControlNumber = ({ spec, ...props }: Props) => (
     renderInput={(value, onChange) => (
       <input
         type="number"
+        size={undefined}
         value={value}
         onChange={(event) => onChange(Number(event.target.value))}
         className={getClassName()}
diff --git a/packages/react/src/editor/PropertyControlObject/PropertyControlObject.module.css b/packages/react/src/editor/PropertyControlObject/PropertyControlObject.module.css
@@ -1,8 +1,8 @@
 .PropertyControlObject {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
-  border-radius: 0.25rem;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 4px;
   border: 1px solid var(--composify-palette-outline);
 }
diff --git a/packages/react/src/editor/PropertyControlObject/PropertyControlObject.tsx b/packages/react/src/editor/PropertyControlObject/PropertyControlObject.tsx
@@ -25,6 +25,7 @@ const getClassName = getClassNameFactory('PropertyControlObject', styles);
 export const PropertyControlObject = ({ spec, ...props }: Props) => (
   <PropertyControl<Record<string, any>>
     {...props}
+    orientation="vertical"
     spec={spec}
     defaultValue={spec.default ?? {}}
     renderInput={(value, onChange) => {
diff --git a/packages/react/src/editor/PropertyLibrary/PropertyLibrary.module.css b/packages/react/src/editor/PropertyLibrary/PropertyLibrary.module.css
@@ -1,7 +1,7 @@
 .PropertyLibrary {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem 1rem 0.75rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 12px;
   border-bottom: 1px solid var(--composify-palette-outline);
 }
diff --git a/packages/react/src/preset/Button/Button.module.css b/packages/react/src/preset/Button/Button.module.css
@@ -1,4 +1,4 @@
-.container {
+.button {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -14,54 +14,54 @@
   transition-duration: 0.15s;
 }
 
-.container:disabled {
+.button:disabled {
   pointer-events: none;
   opacity: 0.7;
 }
 
-.container--variant-primary {
+.button--variant-primary {
   background-color: var(--composify-palette-primary);
   color: var(--composify-palette-on-primary);
 }
 
-.container--variant-primary:hover {
+.button--variant-primary:hover {
   opacity: 0.9;
 }
 
-.container--variant-secondary {
+.button--variant-secondary {
   background-color: var(--composify-palette-secondary);
   color: var(--composify-palette-on-secondary);
 }
 
-.container--variant-secondary:hover {
+.button--variant-secondary:hover {
   opacity: 0.9;
 }
 
-.container--variant-outline {
+.button--variant-outline {
   border: 1px solid var(--composify-palette-outline);
   background-color: var(--composify-palette-surface);
   color: var(--composify-palette-on-surface);
 }
 
-.container--variant-outline:hover {
-  background-color: var(--composify-palette-surface-container);
+.button--variant-outline:hover {
+  background-color: var(--composify-palette-surface-button);
 }
 
-.container--size-xs {
+.button--size-sm {
   height: 32px;
   padding: 0 12px;
   gap: 4px;
   font-size: 12px;
 }
 
-.container--size-sm {
+.button--size-md {
   height: 36px;
   padding: 0 12px;
   gap: 6px;
   font-size: 14px;
 }
 
-.container--size-md {
+.button--size-lg {
   height: 42px;
   padding: 0 16px;
   gap: 8px;
diff --git a/packages/react/src/preset/Button/Button.tsx b/packages/react/src/preset/Button/Button.tsx
@@ -4,11 +4,11 @@ import styles from './Button.module.css';
 
 type Props = ComponentProps<'button'> & {
   variant: 'primary' | 'secondary' | 'outline';
-  size: 'xs' | 'sm' | 'md';
+  size: 'sm' | 'md' | 'lg';
 };
 
 const variants = createVariants(styles);
 
 export const Button: FC<Props> = ({ className, variant, size, ...props }) => (
-  <button className={variants('container', { className, variant, size })} {...props} />
+  <button className={variants('button', { className, variant, size })} {...props} />
 );
diff --git a/packages/react/src/preset/Segment/Segment.module.css b/packages/react/src/preset/Segment/Segment.module.css
diff --git a/packages/react/src/preset/Segment/Segment.tsx b/packages/react/src/preset/Segment/Segment.tsx
diff --git a/packages/react/src/utils/createVariants/createVariants.ts b/packages/react/src/utils/createVariants/createVariants.ts
