Skip to content

Commit

Permalink
Fix GridExpressionInput's border radius and highlight color conditions (
Browse files Browse the repository at this point in the history
#6576)

**Problem:**

The border highlight of selected `GridExpressionInput` components should
stay active while the dropdown is open. Also, the border radius should
use the theme's value.

**Fix:**

Fix the inset shadow conditions so that the border is shown as blue if
the _text_ input is focused (not the container), or the dropdown is
open, even if the mouse is not over the dropdown trigger.

In addition, update the border radius size with
`UtopiaTheme.inputBorderRadius`.


| Before | After |
|--------|----------|
| ![Kapture 2024-10-22 at 13 30
43](https://github.com/user-attachments/assets/4a56bc21-3fcd-4531-9632-20eb2d3aa6f6)
| ![Kapture 2024-10-22 at 13 29
21](https://github.com/user-attachments/assets/15c397d5-db82-4af9-9fd3-9b53ff3032d9)
|

Fixes #6575
  • Loading branch information
ruggi authored Oct 22, 2024
1 parent 4c0ed00 commit 5195936
Showing 1 changed file with 8 additions and 6 deletions.
14 changes: 8 additions & 6 deletions editor/src/uuiui/inputs/grid-expression-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
import { Icons, SmallerIcons } from '../icons'
import { NO_OP } from '../../core/shared/utils'
import { unless } from '../../utils/react-conditionals'
import { useColorTheme } from '../styles/theme'
import { useColorTheme, UtopiaTheme } from '../styles/theme'

interface GridExpressionInputProps {
testId: string
Expand Down Expand Up @@ -164,23 +164,25 @@ export const GridExpressionInput = React.memo(
return gridDimensionsAreEqual(value, defaultValue)
}, [value, defaultValue])

const highlightBorder = dropdownOpen || inputFocused

return (
<div
style={style}
css={{
borderRadius: 2,
borderRadius: UtopiaTheme.inputBorderRadius,
display: 'flex',
alignItems: 'center',
flexGrow: 1,
flexDirection: 'row',
boxShadow: `inset 0px 0px 0px 1px ${
highlightBorder ? colorTheme.dynamicBlue.value : 'transparent'
}`,
'&:hover': {
boxShadow: `inset 0px 0px 0px 1px ${
dropdownOpen ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
highlightBorder ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
}`,
},
'&:focus-within': {
boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
},
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
Expand Down

0 comments on commit 5195936

Please sign in to comment.