diff --git a/core/enums/visual-orientation.js b/core/enums/visual-orientation.js index 42add2fbf..6c0fd05f1 100644 --- a/core/enums/visual-orientation.js +++ b/core/enums/visual-orientation.js @@ -1,9 +1,33 @@ -const { Enum } = require("../enum"); +const Enum = require("../enum").Enum; + +const orientations = ["horizontal", "vertical"]; +const classNames = orientations.map((orientation) => { + return `mod--orientation-${orientation}`; +}); /** + * Visual orientation types for components. * @typedef {"horizontal"|"vertical"} VisualOrientation */ + +/** + * VisualOrientation enum with available orientation values. + * @type {Object.} + * @property {string} horizontal - Horizontal layout orientation + * @property {string} vertical - Vertical layout orientation + */ exports.VisualOrientation = new Enum().initWithMembersAndValues( - ["horizontal", "vertical"], - ["mod--horizontal", "mod--vertical"] + orientations, + orientations +); + +/** + * CSS class names corresponding to visual orientations. + * @type {Object.} + * @property {string} horizontal - CSS class "mod--orientation-horizontal" + * @property {string} vertical - CSS class "mod--orientation-vertical" + */ +exports.VisualOrientationClassNames = new Enum().initWithMembersAndValues( + orientations, + classNames ); diff --git a/core/enums/visual-position.js b/core/enums/visual-position.js index 9a76680f3..0e1cc0851 100644 --- a/core/enums/visual-position.js +++ b/core/enums/visual-position.js @@ -1,9 +1,31 @@ -const { Enum } = require("../enum"); +const Enum = require("../enum").Enum; + +const positions = ["start", "end"]; +const classNames = positions.map((position) => `mod--position-${position}`); /** + * Visual position types for components. * @typedef {"start"|"end"} VisualPosition */ + +/** + * VisualPosition enum with available position values. + * @type {Object.} + * @property {string} start - Position at the beginning/start + * @property {string} end - Position at the end + */ exports.VisualPosition = new Enum().initWithMembersAndValues( - ["start", "end"], - ["mod--start", "mod--end"] + positions, + positions +); + +/** + * CSS class names corresponding to visual positions. + * @type {Object.} + * @property {string} start - CSS class "mod--position-start" + * @property {string} end - CSS class "mod--position-end" + */ +exports.VisualPositionClassNames = new Enum().initWithMembersAndValues( + positions, + classNames ); diff --git a/core/enums/visual-shape.js b/core/enums/visual-shape.js new file mode 100644 index 000000000..74d1292c9 --- /dev/null +++ b/core/enums/visual-shape.js @@ -0,0 +1,33 @@ +const Enum = require("../enum").Enum; + +const shapes = ["rectangle", "rounded", "pill"]; +const classNames = shapes.map((shape) => `mod--shape-${shape}`); + +/** + * Visual shape types for components. + * @typedef {"rectangle"|"rounded"|"pill"} VisualShape + */ + +/** + * VisualShape enum with available shape values. + * @type {Object.} + * @property {string} rectangle - Rectangle shape with sharp corners + * @property {string} rounded - Shape with rounded corners + * @property {string} pill - Pill shape with fully rounded ends + */ +exports.VisualShape = new Enum().initWithMembersAndValues( + shapes, + shapes +); + +/** + * CSS class names corresponding to visual shapes. + * @type {Object.} + * @property {string} rectangle - CSS class "mod--shape-rectangle" + * @property {string} rounded - CSS class "mod--shape-rounded" + * @property {string} pill - CSS class "mod--shape-pill" + */ +exports.VisualShapeClassNames = new Enum().initWithMembersAndValues( + shapes, + classNames +); diff --git a/core/enums/visual-size.js b/core/enums/visual-size.js new file mode 100644 index 000000000..7f1a38006 --- /dev/null +++ b/core/enums/visual-size.js @@ -0,0 +1,30 @@ +const Enum = require("../enum").Enum; + +const sizes = ["small", "medium", "large"]; +const classNames = sizes.map((size) => `mod--size-${size}`); + +/** + * Visual size types for components. + * @typedef {"small"|"medium"|"large"} VisualSize + */ + +/** + * VisualSize enum with available size values. + * @type {Object.} + * @property {string} small - Small size variant + * @property {string} medium - Medium size variant + * @property {string} large - Large size variant + */ +exports.VisualSize = new Enum().initWithMembersAndValues(sizes, sizes); + +/** + * CSS class names corresponding to visual sizes. + * @type {Object.} + * @property {string} small - CSS class "mod--size-small" + * @property {string} medium - CSS class "mod--size-medium" + * @property {string} large - CSS class "mod--size-large" + */ +exports.VisualSizeClassNames = new Enum().initWithMembersAndValues( + sizes, + classNames +); diff --git a/core/enums/visual-variant.js b/core/enums/visual-variant.js new file mode 100644 index 000000000..16294e9a2 --- /dev/null +++ b/core/enums/visual-variant.js @@ -0,0 +1,28 @@ +const Enum = require("../enum").Enum; + +const variants = ["outlined", "plain"]; +const classNames = variants.map((variant) => `mod--variant-${variant}`); + +/** + * Visual variant types for components. + * @typedef {"outlined"|"plain"} VisualVariant + */ + +/** + * VisualVariant enum with available visual variants. + * @type {Object.} + * @property {string} outlined - Component with outline styling + * @property {string} plain - Component with minimal/default styling + */ +exports.VisualVariant = new Enum().initWithMembersAndValues(variants, variants); + +/** + * CSS class names corresponding to visual variants. + * @type {Object.} + * @property {string} outlined - CSS class "mod--variant-outlined" + * @property {string} plain - CSS class "mod--variant-plain" + */ +exports.VisualVariantClassNames = new Enum().initWithMembersAndValues( + variants, + classNames +); diff --git a/ui/button.mod/button.css b/ui/button.mod/button.css index b79887a1d..dc327ec2c 100644 --- a/ui/button.mod/button.css +++ b/ui/button.mod/button.css @@ -19,27 +19,27 @@ /* Main Orientation */ - &.mod--vertical { + &.mod--orientation-vertical { flex-direction: column; } - &.mod--horizontal { + &.mod--orientation-horizontal { flex-direction: row; } /* Main Axis Direction */ - &.mod--horizontal.mod--end { + &.mod--orientation-horizontal.mod--position-end { flex-direction: row-reverse; } - &.mod--vertical.mod--end { + &.mod--orientation-vertical.mod--position-end { flex-direction: column-reverse; } - /** - * FIXME: Hide temporally empty elements wait for this pr to be merged: - * https://github.com/PhrontHQ/mod/pull/37 + /** + * FIXME: Hide temporally empty elements wait for this pr to be merged: + * https://github.com/PhrontHQ/mod/pull/37 */ >div:empty { display: none; diff --git a/ui/button.mod/button.js b/ui/button.mod/button.js index 7efd1fd16..8e1d34cb8 100644 --- a/ui/button.mod/button.js +++ b/ui/button.mod/button.js @@ -1,7 +1,7 @@ /*global require, exports*/ -const { VisualOrientation } = require("core/enums/visual-orientation"); -const { VisualPosition } = require("core/enums/visual-position"); +const { VisualOrientation, VisualOrientationClassNames } = require("core/enums/visual-orientation"); +const { VisualPosition, VisualPositionClassNames } = require("core/enums/visual-position"); const { PressComposer } = require("composer/press-composer"); const { KeyComposer } = require("composer/key-composer"); const { Control } = require("ui/control"); @@ -165,7 +165,7 @@ const Button = (exports.Button = class Button extends Control { // Store reference to track this specific promise const currentTrackedPromise = promise; - + // Clear state when promise resolves/rejects // TODO: we should propably add an error state?... promise.finally(() => { @@ -406,8 +406,8 @@ const Button = (exports.Button = class Button extends Control { * @see VisualPosition */ _applyVisualPositionStyles() { - this.classList.deleteEach(...Object.values(VisualPosition)); - this.classList.add(this.visualPosition); + this.classList.deleteEach(...Object.values(VisualPositionClassNames)); + this.classList.add(VisualPositionClassNames[this.visualPosition]); } /** @@ -416,8 +416,8 @@ const Button = (exports.Button = class Button extends Control { * @see VisualOrientation */ _applyVisualOrientationStyles() { - this.classList.deleteEach(...Object.values(VisualOrientation)); - this.classList.add(this.visualOrientation); + this.classList.deleteEach(...Object.values(VisualOrientationClassNames)); + this.classList.add(VisualOrientationClassNames[this.visualOrientation]); } });