Improve visual enum system

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.<string, VisualOrientation>}
+ * @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.<string, string>}
+ * @property {string} horizontal - CSS class "mod--orientation-horizontal"
+ * @property {string} vertical - CSS class "mod--orientation-vertical"
+ */
+exports.VisualOrientationClassNames = new Enum().initWithMembersAndValues(
+    orientations,
+    classNames
 );

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.<string, VisualPosition>}
+ * @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.<string, string>}
+ * @property {string} start - CSS class "mod--position-start"
+ * @property {string} end - CSS class "mod--position-end"
+ */
+exports.VisualPositionClassNames = new Enum().initWithMembersAndValues(
+    positions,
+    classNames
 );

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.<string, VisualShape>}
+ * @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.<string, string>}
+ * @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
+);

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.<string, VisualSize>}
+ * @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.<string, string>}
+ * @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
+);

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.<string, VisualVariant>}
+ * @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.<string, string>}
+ * @property {string} outlined - CSS class "mod--variant-outlined"
+ * @property {string} plain - CSS class "mod--variant-plain"
+ */
+exports.VisualVariantClassNames = new Enum().initWithMembersAndValues(
+    variants,
+    classNames
+);

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;

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]);
     }
 });