Square Buttons (#6223)

**Problem:** A number of instances of our `<SquareButton>` needed hover states. **Fix:** - Restoring the `<SquareButton>` to it's former glory (background changes on hover) - Removing the `cursor: pointer` - Rename the canvas toolbar button components from `<InsertModeButton>` (idk why it was called that) to `<ToolbarButton>`, and stop using `<SquareButton>` for those - go through many SquareButtons and stop applying a custom width - put the shorthand split buttons into their own `<SquareButton>` instances - put the Resize to Fit button into a `<SquareButton>` instance - realign much of the Grid and Grid Child inspector sections | Before | After | | ------------- | ------------- | | ![12-29-125qe-zjwte](https://github.com/user-attachments/assets/6938a44a-9830-484a-831c-37a1f47fb8a7) | ![12-25-rj5af-l7v1e](https://github.com/user-attachments/assets/fbfa4e8b-5cdd-4895-b582-9e5109b672b4) | **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode --------- Co-authored-by: Balazs Bajorics <[email protected]>
concrete-utopia · Aug 13, 2024 · 9e27de3 · 9e27de3
1 parent 4e3c97b
commit 9e27de3
Show file tree

Hide file tree

Showing 26 changed files with 157 additions and 161 deletions.
diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -4,7 +4,7 @@
 import { jsx } from '@emotion/react'
 import React, { useState } from 'react'
 import type { TooltipProps } from '../../uuiui'
-import { Icons, LargerIcons, SmallerIcons, Tile, UtopiaStyles, opacity } from '../../uuiui'
+import { Button, Icons, LargerIcons, SmallerIcons, Tile, UtopiaStyles, opacity } from '../../uuiui'
 import { UtopiaTheme } from '../../uuiui'
 import {
   colorTheme,
@@ -389,7 +389,7 @@ export const CanvasToolbar = React.memo(() => {
 
   const panelSelectorOpenButton = React.useCallback(
     (open: boolean) => (
-      <InsertModeButton
+      <ToolbarButton
         testid={commentButtonTestId}
         iconType={'panels'}
         iconCategory='tools'
@@ -425,7 +425,7 @@ export const CanvasToolbar = React.memo(() => {
         }}
       >
         <Tooltip title='Edit' placement='bottom'>
-          <InsertModeButton
+          <ToolbarButton
             iconType={editButtonIcon.type}
             iconCategory={editButtonIcon.category}
             primary={canvasToolbarMode.primary === 'edit'}
@@ -438,7 +438,7 @@ export const CanvasToolbar = React.memo(() => {
           allowedToEdit,
           <>
             <Tooltip title='Insert or Edit Text' placement='bottom'>
-              <InsertModeButton
+              <ToolbarButton
                 testid={InsertOrEditTextButtonTestId}
                 iconType='text'
                 iconCategory='tools'
@@ -448,7 +448,7 @@ export const CanvasToolbar = React.memo(() => {
               />
             </Tooltip>
             <Tooltip title='Insert' placement='bottom'>
-              <InsertModeButton
+              <ToolbarButton
                 testid={InsertMenuButtonTestId}
                 iconType='insert'
                 iconCategory='tools'
@@ -460,7 +460,7 @@ export const CanvasToolbar = React.memo(() => {
           </>,
         )}
         <Tooltip title='Live Mode' placement='bottom'>
-          <InsertModeButton
+          <ToolbarButton
             testid={PlayModeButtonTestId}
             iconType={'play'}
             iconCategory='tools'
@@ -473,7 +473,7 @@ export const CanvasToolbar = React.memo(() => {
           canComment,
           <div style={{ display: 'flex', width: 26 }}>
             <Tooltip title={commentButtonTooltip} placement='bottom'>
-              <InsertModeButton
+              <ToolbarButton
                 testid={commentButtonTestId}
                 iconType={'comment'}
                 iconCategory='tools'
@@ -506,7 +506,7 @@ export const CanvasToolbar = React.memo(() => {
           </SquareButton>
         </Tooltip>
         <Tooltip title='Reset Canvas' placement='bottom'>
-          <InsertModeButton
+          <ToolbarButton
             iconType='refresh'
             iconCategory='semantic'
             onClick={resetCanvasCallback}
@@ -533,36 +533,36 @@ export const CanvasToolbar = React.memo(() => {
             <FlexColumn style={{ padding: '3px 8px 0 8px', flexGrow: 1 }}>
               <FlexRow>
                 <Tooltip title='Back' placement='bottom'>
-                  <InsertModeButton
+                  <ToolbarButton
                     iconCategory='semantic'
                     iconType='icon-semantic-back'
                     onClick={dispatchSwitchToSelectModeCloseMenus}
                     style={{ width: undefined }}
                   />
                 </Tooltip>
                 <Tooltip title='Insert div' placement='bottom'>
-                  <InsertModeButton
+                  <ToolbarButton
                     iconType='view'
                     secondary={canvasToolbarMode.secondary.divInsertionActive}
                     onClick={insertDivCallback}
                   />
                 </Tooltip>
                 <Tooltip title='Insert image' placement='bottom'>
-                  <InsertModeButton
+                  <ToolbarButton
                     iconType='image'
                     secondary={canvasToolbarMode.secondary.imageInsertionActive}
                     onClick={insertImgCallback}
                   />
                 </Tooltip>
                 <Tooltip title='Insert button' placement='bottom'>
-                  <InsertModeButton
+                  <ToolbarButton
                     iconType='clickable'
                     secondary={canvasToolbarMode.secondary.buttonInsertionActive}
                     onClick={insertButtonCallback}
                   />
                 </Tooltip>
                 <Tooltip title='Insert conditional' placement='bottom'>
-                  <InsertModeButton
+                  <ToolbarButton
                     testid={InsertConditionalButtonTestId}
                     iconType='conditional'
                     secondary={canvasToolbarMode.secondary.conditionalInsertionActive}
@@ -584,7 +584,7 @@ export const CanvasToolbar = React.memo(() => {
   )
 })
 
-interface InsertModeButtonProps {
+interface ToolbarButtonProps {
   iconType: string
   iconCategory?: string
   primary?: boolean
@@ -596,7 +596,7 @@ interface InsertModeButtonProps {
   size?: number
   disabled?: boolean
 }
-const InsertModeButton = React.memo((props: InsertModeButtonProps) => {
+const ToolbarButton = React.memo((props: ToolbarButtonProps) => {
   const [isHovered, setIsHovered] = useState(false)
   const keepActiveInLiveMode = props.keepActiveInLiveMode ?? false
   const primary = props.primary ?? false
@@ -624,15 +624,15 @@ const InsertModeButton = React.memo((props: InsertModeButtonProps) => {
   }, [])
 
   return (
-    <SquareButton
+    <Button
       data-testid={props.testid}
       style={{ height: 26, width: 26, borderRadius: 3, ...props.style }}
       primary={primary}
       spotlight={secondary}
       highlight
       onClick={props.onClick}
       disabled={disabled || (canvasInLiveMode && !keepActiveInLiveMode)}
-      overriddenBackground={secondary ? 'transparent' : undefined}
+      overriddenBackground={props.primary ? undefined : 'transparent'}
       onMouseEnter={setIsHoveredTrue}
       onMouseLeave={setIsHoveredFalse}
     >
@@ -650,7 +650,7 @@ const InsertModeButton = React.memo((props: InsertModeButtonProps) => {
             : 'main'
         }
       />
-    </SquareButton>
+    </Button>
   )
 })
 

diff --git a/editor/src/components/inspector/add-remove-layout-system-control.tsx b/editor/src/components/inspector/add-remove-layout-system-control.tsx
@@ -89,8 +89,8 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
 
   const addLayoutSystemOpenerButton = React.useCallback(
     () => (
-      <SquareButton highlight onClick={NO_OP} style={{ width: 12, height: 22 }}>
-        {layoutSystem == null ? <Icons.Plus /> : <Icons.Threedots />}
+      <SquareButton highlight onClick={NO_OP}>
+        {layoutSystem == null ? <Icons.SmallPlus /> : <Icons.Threedots />}
       </SquareButton>
     ),
     [layoutSystem],

diff --git a/editor/src/components/inspector/common/inspector-utils.tsx b/editor/src/components/inspector/common/inspector-utils.tsx
@@ -253,7 +253,7 @@ export function RemovePropertyButton({
   }
 
   return (
-    <SquareButton highlight onMouseDown={onUnsetValues} data-testid={testId} style={{ width: 12 }}>
+    <SquareButton highlight onMouseDown={onUnsetValues} data-testid={testId}>
       <Icn category='semantic' type='cross' width={12} height={12} />
     </SquareButton>
   )

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
@@ -432,11 +432,11 @@ const TemplateDimensionControl = React.memo(
       (isOpen: boolean) => (
         <SquareButton
           data-testid={'openDropdown'}
-          highlight
           onClick={NO_OP}
-          style={{ width: 12, height: 22 }}
+          spotlight={isOpen ? true : false}
+          highlight={false}
         >
-          <Icons.Threedots color={isOpen ? 'subdued' : undefined} />
+          <Icons.Threedots color={isOpen ? 'main' : 'subdued'} />
         </SquareButton>
       ),
       [],
@@ -452,8 +452,8 @@ const TemplateDimensionControl = React.memo(
       >
         <div style={{ fontWeight: 600, display: 'flex', alignItems: 'center' }}>
           <div style={{ flex: 1 }}>{title}</div>
-          <SquareButton>
-            <Icons.Plus width={12} height={12} onClick={onAdd} />
+          <SquareButton highlight>
+            <Icons.SmallPlus onClick={onAdd} />
           </SquareButton>
         </div>
         {values.map((value, index) => (
@@ -802,7 +802,7 @@ const GapRowColumnControl = React.memo(() => {
             labelInner={{
               category: 'inspector-element',
               type: 'gapHorizontal',
-              color: 'subdued',
+              color: 'on-highlight-secondary',
             }}
           />
         </UIGridRow>,
@@ -821,7 +821,7 @@ const GapRowColumnControl = React.memo(() => {
             labelInner={{
               category: 'inspector-element',
               type: 'gapHorizontal',
-              color: 'subdued',
+              color: 'on-highlight-secondary',
             }}
           />
           <NumberInput
@@ -835,7 +835,7 @@ const GapRowColumnControl = React.memo(() => {
             labelInner={{
               category: 'inspector-element',
               type: 'gapVertical',
-              color: 'subdued',
+              color: 'on-highlight-secondary',
             }}
           />
         </UIGridRow>,
@@ -844,7 +844,7 @@ const GapRowColumnControl = React.memo(() => {
         <SquareButton
           data-testid={`grid-gap-cycle-mode`}
           onClick={cycleControlSplitState}
-          style={{ width: 16 }}
+          highlight
         >
           {modeIcon}
         </SquareButton>
@@ -928,16 +928,15 @@ const AutoFlowControl = React.memo(() => {
   )
 
   return (
-    <FlexRow style={{ gap: 6 }}>
-      <div style={{ fontWeight: 600 }}>Auto Flow</div>
+    <UIGridRow variant='|--60px--|<--1fr-->|22px|' padded={false}>
+      <div>Auto Flow</div>
       <RadixSelect
         id={AutoFlowPopupId}
-        style={{ flex: 1 }}
         value={currentValue ?? null}
         options={autoflowOptions}
         onValueChange={onSubmit}
       />
-    </FlexRow>
+    </UIGridRow>
   )
 })
 AutoFlowControl.displayName = 'AutoFlowControl'

diff --git a/editor/src/components/inspector/resize-to-fit-control.spec.browser2.tsx b/editor/src/components/inspector/resize-to-fit-control.spec.browser2.tsx
@@ -43,7 +43,9 @@ describe('Resize to fit control', () => {
     expect(view.style.flexBasis).toEqual('')
 
     const control = editor.renderedDOM.getByTestId(ResizeToFitControlTestId)
-    expect(control.style.opacity).toEqual('0.5')
+
+    // this should check for a disabled flag on the element, really. But it's not implemented yet.
+    expect(getComputedStyle(control).opacity).toEqual('0.5')
   })
 
   it('resizes to fit, with shortcut', async () => {

diff --git a/editor/src/components/inspector/resize-to-fit-control.tsx b/editor/src/components/inspector/resize-to-fit-control.tsx
@@ -2,7 +2,7 @@ import createCachedSelector from 're-reselect'
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { safeIndex } from '../../core/shared/array-utils'
-import { FlexRow, Icn, Tooltip } from '../../uuiui'
+import { FlexRow, Icn, SquareButton, Tooltip } from '../../uuiui'
 import { treatElementAsGroupLike } from '../canvas/canvas-strategies/strategies/group-helpers'
 import { applyCommandsAction } from '../editor/actions/action-creators'
 import { useDispatch } from '../editor/store/dispatch-context'
@@ -136,13 +136,14 @@ export const ResizeToFitControl = React.memo(() => {
 
   return (
     <Tooltip title={'Resize to Fit'}>
-      <div
+      <SquareButton
+        highlight
+        disabled={!isHugApplicable}
         data-testid={ResizeToFitControlTestId}
         onClick={onResizeToFit}
-        style={{ cursor: 'pointer', ...disabledStyles(isHugApplicable) }}
       >
         <Icn type='fitToChildren' color='main' category='layout/commands' width={16} height={16} />
-      </div>
+      </SquareButton>
     </Tooltip>
   )
 })

diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
@@ -35,7 +35,7 @@ export function InspectorSectionHeader({
         {title}
       </div>
       <SectionActionSheet className='actionsheet' style={{ gap: 4 }}>
-        <SquareButton highlight style={{ width: 12 }}>
+        <SquareButton highlight>
           <ExpandableIndicator visible collapsed={!open} selected={false} />
         </SquareButton>
       </SectionActionSheet>

diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight style={{ width: 12 }} onClick={toggleSection}>
+        <SquareButton highlight onClick={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible

diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -105,7 +105,6 @@ export const TargetSelectorPanel = React.memo((props: TargetSelectorPanelProps)
         position: 'relative',
         userSelect: 'none',
         WebkitUserSelect: 'none',
-        borderTop: `1px solid ${colorTheme.seperator.value}`,
       }}
     >
       <TargetListHeader
@@ -380,7 +379,6 @@ interface TargetListHeaderProps {
 }
 
 const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
-  const colorTheme = useColorTheme()
   const { isOpen, setIsOpen, setAddingIndex, selectedTargetPath, isAdding, targetIndex } = props
 
   const startAdding = React.useCallback(() => {
@@ -396,7 +394,7 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         paddingLeft: 8,
         paddingRight: 8,
         cursor: 'pointer',
-        height: 42,
+        height: 38,
       }}
     >
       <H1
@@ -409,11 +407,11 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
       >
         Target
       </H1>
-      <SectionActionSheet className='actionsheet' style={{ gap: 4 }}>
-        <SquareButton highlight disabled={isAdding} onClick={startAdding} style={{ width: 12 }}>
+      <SectionActionSheet className='actionsheet'>
+        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onClick={togglePathPanel} style={{ width: 12 }}>
+        <SquareButton highlight onClick={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible

diff --git a/...inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/...inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
@@ -737,11 +737,7 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
   const cycleModeControl = React.useMemo(() => {
     return (
       <Tooltip title={tooltipTitle}>
-        <SquareButton
-          data-testid={`${name}-cycle-mode`}
-          onClick={props.onCycleMode}
-          style={{ width: 16 }}
-        >
+        <SquareButton data-testid={`${name}-cycle-mode`} onClick={props.onCycleMode} highlight>
           {modeIcon}
         </SquareButton>
       </Tooltip>

diff --git a/...mponents/inspector/sections/style-section/background-subsection/background-subsection.tsx b/...mponents/inspector/sections/style-section/background-subsection/background-subsection.tsx
@@ -343,18 +343,14 @@ export const BackgroundSubsection = React.memo(() => {
           <span>Background</span>
         </FlexRow>
         {propertyStatus.overwritable ? (
-          <FlexRow style={{ gap: 4 }}>
+          <FlexRow>
             <RemovePropertyButton
               testId='inspector-background-remove-all'
               onUnsetValues={onUnsetSubsectionValues}
               propertySet={propertyStatus.set}
             />
-            <SquareButton
-              highlight
-              onMouseDown={insertBackgroundLayerMouseDown}
-              style={{ width: 12 }}
-            >
-              <Icn category='semantic' type='plus' width={12} height={12} />
+            <SquareButton highlight onMouseDown={insertBackgroundLayerMouseDown}>
+              <Icons.SmallPlus />
             </SquareButton>
           </FlexRow>
         ) : null}