Skip to content

Commit

Permalink
Fix: set specific border default (#5786)
Browse files Browse the repository at this point in the history
**Problem:**
Today we have an empty border section in the inspector when an element doesn't have a border. This is since our code doesn't consider the computed value as "default", so it mistakenly shows the UI for them as set.
So there is no "empty state" in the border control:
<img width="302" alt="image" src="https://github.com/concrete-utopia/utopia/assets/7003853/a53eebed-9122-4c75-9ca3-281145138e0f">

**Fix:**
Set a more precise border default.

<video src="https://github.com/concrete-utopia/utopia/assets/7003853/6eaed664-10c2-4036-8216-2972a60f3818"></video>

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode

Fixes #5752
  • Loading branch information
liady authored May 30, 2024
1 parent 6be7ad6 commit 518208c
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 2 deletions.
29 changes: 28 additions & 1 deletion editor/src/components/inspector/common/css-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1040,6 +1040,33 @@ export const emptyCSSBorder: CSSBorder = {
type: 'border',
}

export const emptyCssBorderDefault: CSSBorder = {
type: 'border',
width: {
type: 'line-width',
value: {
value: 0,
unit: 'px',
},
},
style: {
type: 'line-style',
value: {
type: 'keyword',
value: 'none',
},
},
color: {
type: 'RGB',
r: 0,
g: 0,
b: 0,
a: 1,
percentageAlpha: false,
percentagesUsed: false,
},
}

export const defaultCSSBorder: Complete<CSSBorder> = {
type: 'border',
style: cssLineStyle(cssKeyword('solid')),
Expand Down Expand Up @@ -5114,7 +5141,7 @@ export const trivialDefaultValues: ParsedPropertiesWithNonTrivial = {
backgroundColor: cssDefault(emptyBackgroundColor),
backgroundImage: [],
backgroundSize: [],
border: emptyCSSBorder,
border: emptyCssBorderDefault,
borderRadius: {
type: 'LEFT',
value: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const BorderSubsection: React.FunctionComponent<React.PropsWithChildren<u
</UIGridRow>
)

const borderSet: boolean = controlStatus !== 'unset'
const borderSet: boolean = controlStatus !== 'unset' && controlStatus !== 'trivial-default'

const contextMenuItems = [addOnUnsetValues(['border parameters'], onUnsetValues)]

Expand Down

0 comments on commit 518208c

Please sign in to comment.