diff --git a/packages/core/src/style_manager/model/PropertyFactory.ts b/packages/core/src/style_manager/model/PropertyFactory.ts index d2ebde5fc..828c5320f 100644 --- a/packages/core/src/style_manager/model/PropertyFactory.ts +++ b/packages/core/src/style_manager/model/PropertyFactory.ts @@ -342,14 +342,14 @@ export default class PropertyFactory { extend: 'border-top-right-radius', id: 'border-top-right-radius-sub', }, - { - extend: 'border-bottom-left-radius', - id: 'border-bottom-left-radius-sub', - }, { extend: 'border-bottom-right-radius', id: 'border-bottom-right-radius-sub', }, + { + extend: 'border-bottom-left-radius', + id: 'border-bottom-left-radius-sub', + }, ]), }, 'margin', diff --git a/packages/core/src/styles/scss/_gjs_style_manager.scss b/packages/core/src/styles/scss/_gjs_style_manager.scss index 1fcb0f09b..7a89e6f75 100644 --- a/packages/core/src/styles/scss/_gjs_style_manager.scss +++ b/packages/core/src/styles/scss/_gjs_style_manager.scss @@ -423,6 +423,14 @@ padding: 5px 0 0; } +// Keep the border-radius UI in corner order while the underlying property +// list stays aligned with CSS shorthand semantics. +.#{gjs_vars.$sm-prefix}property__border-radius { + .#{gjs_vars.$sm-prefix}property__border-bottom-right-radius { + order: 4; + } +} + .#{gjs_vars.$sm-prefix}stack ##{gjs_vars.$sm-prefix}add { @extend .#{gjs_vars.$app-prefix}color-main; diff --git a/packages/core/test/specs/style_manager/model/Properties.ts b/packages/core/test/specs/style_manager/model/Properties.ts index aaf191118..8540e40c5 100644 --- a/packages/core/test/specs/style_manager/model/Properties.ts +++ b/packages/core/test/specs/style_manager/model/Properties.ts @@ -445,6 +445,39 @@ describe('StyleManager properties logic', () => { }); }); + describe('Border radius composite', () => { + let borderRadiusProp: PropertyComposite; + + beforeEach(() => { + rule1 = cssc.addRules('.cls { color: red; }')[0]; + obj.addSector(sectorTest, { + name: 'sector', + properties: [{ extend: 'border-radius' }], + }); + borderRadiusProp = obj.getProperty(sectorTest, 'border-radius') as PropertyComposite; + em.setSelected(cmp); + obj.__upSel(); + }); + + test('Updates bottom-left in the fourth shorthand slot', () => { + borderRadiusProp.getProperty('border-bottom-left-radius-sub')?.upValue('20px'); + obj.__upSel(); + + expect(rule1.getStyle()).toEqual({ + color: 'red', + 'border-radius': '0 0 0 20px', + }); + }); + + test('Parses bottom-left and bottom-right from shorthand correctly', () => { + rule1.setStyle({ 'border-radius': '1px 2px 3px 4px' }); + obj.__upSel(); + + expect(borderRadiusProp.getProperty('border-bottom-right-radius-sub')?.getFullValue()).toBe('3px'); + expect(borderRadiusProp.getProperty('border-bottom-left-radius-sub')?.getFullValue()).toBe('4px'); + }); + }); + describe('Stack type', () => { const propTest = 'stack-prop'; const propATest = `${propTest}-a`; diff --git a/packages/core/test/specs/style_manager/model/PropertyFactory.ts b/packages/core/test/specs/style_manager/model/PropertyFactory.ts index 90cb67752..a5f88c108 100644 --- a/packages/core/test/specs/style_manager/model/PropertyFactory.ts +++ b/packages/core/test/specs/style_manager/model/PropertyFactory.ts @@ -485,16 +485,16 @@ describe('PropertyFactory', () => { default: '0', }, { - property: 'border-bottom-left-radius', - id: 'border-bottom-left-radius-sub', + property: 'border-bottom-right-radius', + id: 'border-bottom-right-radius-sub', type: 'number', units: obj.unitsSize, min: 0, default: '0', }, { - property: 'border-bottom-right-radius', - id: 'border-bottom-right-radius-sub', + property: 'border-bottom-left-radius', + id: 'border-bottom-left-radius-sub', type: 'number', units: obj.unitsSize, min: 0,