Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update Checkbox, Radio, and Toggle style mappings #408

Merged
merged 7 commits into from
Nov 15, 2023
Merged

fix: update Checkbox, Radio, and Toggle style mappings #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f7c19d5
fix(Toggle): update default style mappings
erautenberg Oct 30, 2023
5bec90e
fix(Radio): update default token mappings
erautenberg Nov 9, 2023
7691423
fix(Checkbox): update default token mappings and alias check style pr…
erautenberg Nov 9, 2023
5848efd
fix: update Checkbox and Radio size so outermost size reflects the co…
erautenberg Nov 13, 2023
5b381a1
fix(Toggle): deprecate knobX and knobXChecked and update default styl…
erautenberg Nov 14, 2023
c429c6f
fix(Toggle): alias strokeWeight with strokeWidth
erautenberg Nov 14, 2023
62c12b2
tests: update snapshots
erautenberg Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/@lightningjs/ui-components/src/components/Checkbox/Checkbox.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,17 @@ type CheckboxStyle = {
checkColor: Color;
/** @deprecated */
checkH: number;
/** @deprecated */
checkHeight: number;
iconHeight: number;
/** @deprecated */
checkW: number;
/** @deprecated */
checkWidth: number;
iconWidth: number;
/** @deprecated */
checkSrc: string;
icon: string;
radius: lng.Tools.CornerRadius;
strokeColor: Color;
strokeWidth: number;
Expand Down
25 changes: 15 additions & 10 deletions packages/@lightningjs/ui-components/src/components/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,11 @@ export default class Checkbox extends Base {

static get aliasStyles() {
return [
{ prev: 'checkH', curr: 'checkHeight' },
{ prev: 'checkW', curr: 'checkWidth' }
{ prev: 'checkSrc', curr: 'icon' },
{ prev: 'checkH', curr: 'iconHeight' },
{ prev: 'checkW', curr: 'iconWidth' },
{ prev: 'checkHeight', curr: 'iconHeight' },
{ prev: 'checkWidth', curr: 'iconWidth' }
];
}

Expand All @@ -74,9 +77,9 @@ export default class Checkbox extends Base {

_updateCheck() {
this._Check.patch({
w: this.style.checkWidth,
h: this.style.checkHeight,
icon: this.style.checkSrc,
w: this.style.iconWidth,
h: this.style.iconHeight,
icon: this.style.icon,
style: { color: this.style.checkColor }
});

Expand All @@ -95,13 +98,14 @@ export default class Checkbox extends Base {
// if the inner checkbox should be square, a rounded corner radius can still be applied to the stroke
const radius =
this.style.radius >= this.w / 2
? (this.w - this.style.strokeWidth) / 2
? (this.w - this.style.strokeWidth - 2) / 2
: 0;

this._Body.patch({
texture: lng.Tools.getRoundRect(
this.w - this.style.strokeWidth,
this.h - this.style.strokeWidth,
// Compensating for the extra 2 pixels getRoundRect adds
this.w - this.style.strokeWidth * 2 - 2,
this.h - this.style.strokeWidth * 2 - 2,
radius,
0,
null,
Expand All @@ -114,8 +118,9 @@ export default class Checkbox extends Base {
_updateStroke() {
this._Stroke.patch({
texture: lng.Tools.getRoundRect(
this.w,
this.h,
// Compensating for the extra 2 pixels getRoundRect adds
this.w - 2,
this.h - 2,
this.style.radius,
this.style.strokeWidth,
this.style.strokeColor,
Expand Down
6 changes: 3 additions & 3 deletions packages/@lightningjs/ui-components/src/components/Checkbox/Checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ class Example extends lng.Component {
| backgroundColor | string | color of Checkbox background when unchecked |
| backgroundColorChecked | string | color of Checkbox background when checked |
| checkColor | string | color of check icon |
| checkHeight | number | height of check icon |
| checkSrc | string | path the icon to use for the checkmark |
| checkWidth | number | width of check icon |
| iconHeight | number | height of check icon |
| icon | string | path the icon to use for the checkmark |
| iconWidth | number | width of check icon |
| radius | number | radius of Checkbox |
| strokeColor | string | color of the Checkbox border |
| strokeWidth | number | width of Checkbox border |
Expand Down
28 changes: 14 additions & 14 deletions packages/@lightningjs/ui-components/src/components/Checkbox/Checkbox.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,36 @@

export const base = theme => {
const strokeWidth = theme.stroke.sm;
const size = theme.spacer.xxl - strokeWidth * 2;
const size = theme.spacer.xxl;
return {
alpha: theme.alpha.primary,
width: size,
height: size,
checkWidth: theme.spacer.lg,
checkHeight: theme.spacer.md + theme.spacer.xs,
checkSrc: theme.asset.check,
radius: size / 2,
iconWidth: theme.spacer.lg,
iconHeight: theme.spacer.lg,
icon: theme.asset.check,
radius: theme.radius.xs,
strokeWidth
};
};

export const tone = theme => ({
neutral: {
strokeColor: theme.color.strokeInverse,
checkColor: theme.color.textInverse,
backgroundColor: theme.color.fillNeutralDisabled,
strokeColor: theme.color.strokeNeutralSecondary,
checkColor: theme.color.fillInverse,
backgroundColor: theme.color.fillInverseSecondary,
backgroundColorChecked: theme.color.fillNeutral
},
inverse: {
strokeColor: theme.color.strokeNeutral,
checkColor: theme.color.textNeutral,
backgroundColor: theme.color.fillInverseDisabled,
strokeColor: theme.color.strokeInverseSecondary,
checkColor: theme.color.fillNeutral,
backgroundColor: theme.color.fillNeutralSecondary,
backgroundColorChecked: theme.color.fillInverse
},
brand: {
strokeColor: theme.color.strokeNeutral,
checkColor: theme.color.textNeutral,
backgroundColor: theme.color.fillInverseDisabled,
strokeColor: theme.color.strokeNeutralSecondary,
checkColor: theme.color.fillInverse,
backgroundColor: theme.color.fillNeutralSecondary,
backgroundColorChecked: theme.color.fillBrand
}
});
Expand Down
8 changes: 4 additions & 4 deletions packages/@lightningjs/ui-components/src/components/Checkbox/CheckboxSmall.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@

export const base = theme => {
const strokeWidth = theme.stroke.sm;
const size = theme.spacer.xl - strokeWidth * 2;
const size = theme.spacer.xl;
return {
width: size,
height: size,
checkWidth: theme.spacer.md,
checkHeight: theme.spacer.md + theme.spacer.xxs,
radius: size / 2,
iconWidth: theme.spacer.md,
iconHeight: theme.spacer.md,
radius: theme.radius.xs,
strokeWidth
};
};
2 changes: 1 addition & 1 deletion ...es/@lightningjs/ui-components/src/components/Checkbox/__snapshots__/Checkbox.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`Checkbox renders 1`] = `
"enabled": false,
"flex": false,
"flexItem": false,
"h": 14,
"h": 20,
"hasFinalFocus": false,
"hasFocus": false,
"isComponent": true,
Expand Down
2 changes: 1 addition & 1 deletion ...ightningjs/ui-components/src/components/Checkbox/__snapshots__/CheckboxSmall.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`CheckboxSmall renders 1`] = `
"enabled": false,
"flex": false,
"flexItem": false,
"h": 12,
"h": 10,
"hasFinalFocus": false,
"hasFocus": false,
"isComponent": true,
Expand Down
12 changes: 7 additions & 5 deletions packages/@lightningjs/ui-components/src/components/Radio/Radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,14 @@ export default class Radio extends Base {
// if the inner body should be square, a rounded corner radius can still be applied to the stroke
const radius =
this.style.radius >= this.w / 2
? (this.w - this.style.strokeWidth) / 2
? (this.w - this.style.strokeWidth - 2) / 2
: 0;

this._Body.patch({
texture: lng.Tools.getRoundRect(
this.w - this.style.strokeWidth,
this.h - this.style.strokeWidth,
// Compensating for the extra 2 pixels getRoundRect adds
this.w - this.style.strokeWidth * 2 - 2,
this.h - this.style.strokeWidth * 2 - 2,
radius,
null,
null,
Expand All @@ -88,9 +89,10 @@ export default class Radio extends Base {

_updateStroke() {
this._Stroke.patch({
// Compensating for the extra 2 pixels getRoundRect adds
texture: lng.Tools.getRoundRect(
this.w,
this.h,
this.w - 2,
this.h - 2,
this.style.radius,
this.style.strokeWidth,
this.style.strokeColor,
Expand Down
14 changes: 7 additions & 7 deletions packages/@lightningjs/ui-components/src/components/Radio/Radio.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,22 @@ export const base = theme => {

export const tone = theme => ({
neutral: {
backgroundColor: theme.color.fillNeutralDisabled,
backgroundColor: theme.color.fillInverseSecondary,
backgroundColorChecked: theme.color.fillNeutral,
knobColor: theme.color.fillInverse,
strokeColor: theme.color.strokeInverse
strokeColor: theme.color.strokeNeutralSecondary
},
inverse: {
backgroundColor: theme.color.fillInverseDisabled,
backgroundColor: theme.color.fillNeutralSecondary,
backgroundColorChecked: theme.color.fillInverse,
knobColor: theme.color.fillNeutral,
strokeColor: theme.color.strokeNeutral
strokeColor: theme.color.strokeInverseSecondary
},
brand: {
backgroundColor: theme.color.fillInverseDisabled,
backgroundColor: theme.color.fillNeutralSecondary,
backgroundColorChecked: theme.color.fillBrand,
knobColor: theme.color.fillNeutral,
strokeColor: theme.color.strokeNeutral
knobColor: theme.color.fillInverse,
strokeColor: theme.color.strokeNeutralSecondary
}
});

Expand Down
4 changes: 4 additions & 0 deletions packages/@lightningjs/ui-components/src/components/Toggle/Toggle.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,15 @@ type ToggleStyle = {
knobRadius: lng.Tools.CornerRadius;
knobColor: Color;
knobColorChecked: Color;
/* @deprecated */
knobX: number;
/* @deprecated */
knobXChecked: number;
strokeColor: Color;
strokeRadius: lng.Tools.CornerRadius;
/* @deprecated */
strokeWeight: number;
strokeWidth: number;
};

declare namespace Toggle {
Expand Down
57 changes: 30 additions & 27 deletions packages/@lightningjs/ui-components/src/components/Toggle/Toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ export default class Toggle extends Base {
return ['checked'];
}

static get aliasStyles() {
return [{ prev: 'strokeWeight', curr: 'strokeWidth' }];
}

_construct() {
super._construct && super._construct();
this._checked = false;
Expand All @@ -74,14 +78,13 @@ export default class Toggle extends Base {
}

_updateKnobPosition() {
const { knobXChecked, knobX, knobPadding, knobWidth, strokeWeight } =
this.style;
this._knobX = knobX || strokeWeight + knobPadding;
this._knobXChecked =
knobXChecked || this.w - strokeWeight - knobPadding - knobWidth;
const x = this.checked ? this._knobXChecked : this._knobX;
const { knobPadding, knobWidth, strokeWidth } = this.style;

this.applySmooth(this._Knob, { x });
this.applySmooth(this._Knob, {
x: this.checked
? this.w - strokeWidth - knobPadding - knobWidth
: strokeWidth + knobPadding
});
}

_updateColors() {
Expand All @@ -102,27 +105,24 @@ export default class Toggle extends Base {
}

_updateContainer() {
const { knobRadius, knobPadding, strokeRadius, strokeWeight } = this.style;

let radius;
if (strokeRadius !== undefined) {
if (strokeRadius === 0) {
radius = 0;
} else {
radius = Math.max(0, strokeRadius - strokeWeight);
}
} else {
radius = Math.max(0, knobRadius + knobPadding + strokeWeight);
}
const { knobRadius, knobPadding, strokeRadius, strokeWidth } = this.style;

const radius =
strokeRadius !== undefined
? strokeRadius === 0
? strokeRadius
: Math.max(0, strokeRadius - strokeWidth)
: Math.max(0, knobRadius + knobPadding + strokeWidth);

this._Container.patch({
w: this.w,
h: this.h,
texture: lng.Tools.getRoundRect(
this.w - 2 * strokeWeight,
this.h - 2 * strokeWeight,
// Compensating for the extra 2 pixels getRoundRect adds
this.w - strokeWidth * 2 - 2,
this.h - strokeWidth * 2 - 2,
radius,
strokeWeight,
strokeWidth,
0,
true,
false
Expand All @@ -131,19 +131,20 @@ export default class Toggle extends Base {
}

_updateStroke() {
const { knobRadius, knobPadding, strokeColor, strokeRadius, strokeWeight } =
const { knobRadius, knobPadding, strokeColor, strokeRadius, strokeWidth } =
this.style;

this._Stroke.patch({
w: this.w,
h: this.h,
texture: lng.Tools.getRoundRect(
this.w,
this.h,
// Compensating for the extra 2 pixels getRoundRect adds
this.w - 2,
this.h - 2,
strokeRadius !== undefined
? strokeRadius
: knobRadius + knobPadding + strokeWeight,
strokeWeight,
: knobRadius + knobPadding + strokeWidth,
strokeWidth,
strokeColor,
false,
false
Expand All @@ -153,10 +154,12 @@ export default class Toggle extends Base {

_updateKnob() {
const { knobHeight, knobWidth, knobRadius } = this.style;

this._Knob.patch({
zIndex: 2,
y: (this.h - knobHeight) / 2,
texture: lng.Tools.getRoundRect(
// Compensating for the extra 2 pixels getRoundRect adds
knobWidth - 2,
knobHeight - 2,
knobRadius,
Expand Down
28 changes: 13 additions & 15 deletions packages/@lightningjs/ui-components/src/components/Toggle/Toggle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,21 +80,19 @@ this.tag('Toggle').onEnter = toggle => {

### Style Properties

| name | type | description |
| ---------------------- | ------------- | ---------------------------------- |
| backgroundColor | string | color of background when unchecked |
| backgroundColorChecked | string | color of background when checked |
| knobHeight | number | height of Toggle knob |
| knobPadding | number | padding to apply around knob |
| knobRadius | number | radius of Toggle knob |
| knobWidth | number | width of Toggle knob |
| knobX | number | X position of knob when unchecked |
| knobXChecked | number | X position of knob when checked |
| knobColor | string | color of knob when unchecked |
| knobColorChecked | string | color of knob when checked |
| strokeColor | string | color of stroke |
| strokeRadius | number\|array | radius of Toggle |
| strokeWeight | number | thickness of stroke |
| name | type | description |
| ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundColor | string | color of background when unchecked |
| backgroundColorChecked | string | color of background when checked |
| knobHeight | number | height of Toggle knob |
| knobPadding | number | padding to apply around knob |
| knobRadius | number | radius of Toggle knob |
| knobWidth | number | width of Toggle knob |
| knobColor | string | color of knob when unchecked |
| knobColorChecked | string | color of knob when checked |
| strokeColor | string | color of stroke |
| strokeRadius | number\|array | set radius of Toggle, which, if not defined, will be calculated based on the radius of the knob and padding (if no radius is desired, it needs to explicitly be set to 0) |
| strokeWidth | number | thickness of stroke |

### Methods

Expand Down
Loading
Loading