Align style source along with design (#1575)

Ref https://github.com/webstudio-is/webstudio-builder/issues/807
https://github.com/webstudio-is/webstudio-builder/issues/1108

- more consistent input spacing
- more visible text editing
- consistent border around input instead of shadow
- toggle selected state

apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx

@@ -19,7 +19,6 @@ import {
   Combobox,
   ComboboxAnchor,
   ComboboxContent,
-  DeprecatedTextFieldContainer,
   DeprecatedTextFieldInput,
   useDeprecatedTextFieldFocus,
   useCombobox,
@@ -31,6 +30,7 @@ import {
   DropdownMenuSeparator,
   rawTheme,
   theme,
+  styled,
 } from "@webstudio-is/design-system";
 import {
   forwardRef,
@@ -64,18 +64,32 @@ export type ItemSelector = {
   state?: string;
 };
 
+const TextFieldContainer = styled("div", {
+  // Custom
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  backgroundColor: theme.colors.backgroundControls,
+  gap: theme.spacing[3],
+  p: theme.spacing[3],
+  borderRadius: theme.borderRadius[4],
+  minHeight: theme.spacing[12],
+  minWidth: 0,
+  border: `1px solid ${theme.colors.borderMain}`,
+  "&:focus-within": {
+    outline: `2px solid ${theme.colors.borderFocus}`,
+    outlineOffset: -1,
+  },
+});
+
 type TextFieldBaseWrapperProps<Item extends IntermediateItem> = Omit<
   ComponentProps<"input">,
   "value"
 > &
-  Pick<
-    ComponentProps<typeof DeprecatedTextFieldContainer>,
-    "variant" | "state" | "css"
-  > & {
+  Pick<ComponentProps<typeof TextFieldContainer>, "css"> & {
     value: Array<Item>;
     selectedItemSelector: undefined | ItemSelector;
     label: string;
-    disabled?: boolean;
     containerRef?: RefObject<HTMLDivElement>;
     inputRef?: RefObject<HTMLInputElement>;
     renderStyleSourceMenuItems: (item: Item) => ReactNode;
@@ -93,11 +107,8 @@ const TextFieldBase: ForwardRefRenderFunction<
 > = (props, forwardedRef) => {
   const {
     css,
-    disabled,
     containerRef,
     inputRef,
-    state,
-    variant: textFieldVariant,
     onFocus,
     onBlur,
     onClick,
@@ -116,7 +127,6 @@ const TextFieldBase: ForwardRefRenderFunction<
     ...textFieldProps
   } = props;
   const [internalInputRef, focusProps] = useDeprecatedTextFieldFocus({
-    disabled,
     onFocus,
     onBlur,
   });
@@ -126,13 +136,10 @@ const TextFieldBase: ForwardRefRenderFunction<
   });
 
   return (
-    <DeprecatedTextFieldContainer
+    <TextFieldContainer
       {...focusProps}
-      aria-disabled={disabled}
       ref={mergeRefs(forwardedRef, containerRef ?? null, sortableRefCallback)}
-      state={state}
-      variant={textFieldVariant}
-      css={{ ...css, px: theme.spacing[3], py: theme.spacing[2] }}
+      css={css}
       style={
         dragItemId ? menuCssVars({ show: false, override: true }) : undefined
       }
@@ -175,15 +182,21 @@ const TextFieldBase: ForwardRefRenderFunction<
       {editingItemId === undefined && (
         <DeprecatedTextFieldInput
           {...textFieldProps}
+          css={{
+            color: theme.colors.hiContrast,
+            fontVariantNumeric: "tabular-nums",
+            fontFamily: theme.fonts.sans,
+            fontSize: theme.deprecatedFontSize[3],
+            lineHeight: 1,
+          }}
           value={label}
           type={type}
-          disabled={disabled}
           onClick={onClick}
           ref={mergeRefs(internalInputRef, inputRef ?? null)}
           aria-label="New Style Source Input"
         />
       )}
-    </DeprecatedTextFieldContainer>
+    </TextFieldContainer>
   );
 };
 
@@ -338,7 +351,11 @@ const renderMenuItems = (props: {
           onSelect={() =>
             props.onSelect?.({
               styleSourceId: props.item.id,
-              state: selector,
+              // toggle state selection
+              state:
+                props.selectedItemSelector?.state === selector
+                  ? undefined
+                  : selector,
             })
           }
         >

apps/builder/app/builder/features/style-panel/style-source/style-source.tsx

@@ -4,17 +4,17 @@ import {
   DropdownMenuContent,
   DropdownMenuPortal,
   DropdownMenuTrigger,
-  DeprecatedText2,
+  Text,
   styled,
   Box,
   theme,
+  Flex,
 } from "@webstudio-is/design-system";
 import { ChevronDownIcon } from "@webstudio-is/icons";
 import {
   useEffect,
   useLayoutEffect,
   useRef,
-  forwardRef,
   type KeyboardEvent,
   type KeyboardEventHandler,
   type FocusEvent,
@@ -228,7 +228,7 @@ const EditableText = ({
   });
 
   return (
-    <DeprecatedText2
+    <Text
       truncate
       ref={ref}
       css={{
@@ -240,7 +240,7 @@ const EditableText = ({
       {...handlers}
     >
       {label}
-    </DeprecatedText2>
+    </Text>
   );
 };
 
@@ -269,7 +269,7 @@ const useForceRecalcStyle = <Element extends HTMLElement>(
   return ref;
 };
 
-const StyledSourceContainer = styled(Box, {
+const StyleSourceContainer = styled(Box, {
   display: "inline-flex",
   borderRadius: theme.borderRadius[3],
   minWidth: theme.spacing[13],
@@ -309,42 +309,25 @@ const StyledSourceContainer = styled(Box, {
   },
 });
 
-type SourceContainerProps = {
-  id: string;
-  source: ItemSource;
-  selected: boolean;
-  disabled: boolean;
-  children: Array<JSX.Element | boolean>;
-};
-
-const SourceSourceContainer = forwardRef<HTMLDivElement, SourceContainerProps>(
-  ({ id, source, selected, disabled, children }, ref) => {
-    return (
-      <StyledSourceContainer
-        data-id={id}
-        source={source}
-        selected={selected}
-        disabled={disabled}
-        aria-current={selected}
-        role="button"
-        ref={ref}
-      >
-        {children}
-      </StyledSourceContainer>
-    );
-  }
-);
-SourceSourceContainer.displayName = "SourceSourceContainer";
-
 const StyleSourceButton = styled("button", {
   all: "unset",
+  flexGrow: 1,
   display: "block",
   boxSizing: "border-box",
-  padding: theme.spacing[4],
   maxWidth: "100%",
+  padding: theme.spacing[3],
+  variants: {
+    isEditing: {
+      true: {
+        color: theme.colors.foregroundMain,
+        backgroundColor: theme.colors.backgroundControls,
+      },
+      false: {},
+    },
+  },
 });
 
-const StyleSourceState = styled(Box, {
+const StyleSourceState = styled(Text, {
   padding: theme.spacing[4],
   backgroundColor: theme.colors.backgroundStyleSourceToken,
   borderTopRightRadius: theme.borderRadius[3],
@@ -387,26 +370,34 @@ export const StyleSource = ({
   const showMenu = isEditing === false && isDragging === false;
 
   return (
-    <SourceSourceContainer
+    <StyleSourceContainer
+      data-id={id}
       source={source}
       selected={selected && state === undefined}
       disabled={disabled}
-      id={id}
+      aria-current={selected && state === undefined}
+      role="button"
       ref={ref}
     >
-      <StyleSourceButton disabled={disabled || isEditing} onClick={onSelect}>
-        <EditableText
-          isEditable={source !== "local"}
+      <Flex css={{ flexGrow: 1, padding: theme.spacing[2] }}>
+        <StyleSourceButton
+          disabled={disabled || isEditing}
           isEditing={isEditing}
-          onChangeEditing={onChangeEditing}
-          onChangeValue={onChangeValue}
-          label={label}
-        />
-      </StyleSourceButton>
+          onClick={onSelect}
+        >
+          <EditableText
+            isEditable={source !== "local"}
+            isEditing={isEditing}
+            onChangeEditing={onChangeEditing}
+            onChangeValue={onChangeValue}
+            label={label}
+          />
+        </StyleSourceButton>
+      </Flex>
       {stateLabel !== undefined && (
         <StyleSourceState>{stateLabel}</StyleSourceState>
       )}
       {showMenu && <Menu source={source}>{menuItems}</Menu>}
-    </SourceSourceContainer>
+    </StyleSourceContainer>
   );
 };