Update: Text align for buttons

CarbonPackages · Jan 9, 2025 · 1298e49 · 1298e49
1 parent 903e028
commit 1298e49
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 54 deletions.
diff --git a/Resources/Private/RangeEditor/RangeEditor.jsx b/Resources/Private/RangeEditor/RangeEditor.jsx
@@ -126,6 +126,12 @@ const styles = stylex.create({
             outlineOffset: 2,
         },
     },
+    textLeft: {
+        textAlign: "left",
+    },
+    textRight: {
+        textAlign: "right",
+    },
     textfield: {
         background: colors.neutral,
         border: 0,
@@ -415,7 +421,10 @@ function Editor({
                             )}
                             onClick={() => changeValue(options.min)}
                             disabled={disabled}
-                            {...stylex.props(styles.editorValueButton)}
+                            {...stylex.props(
+                                styles.editorValueButton,
+                                styles.textLeft,
+                            )}
                         >
                             {valueAsString}%
                         </button>
@@ -426,7 +435,10 @@ function Editor({
                             )}
                             onClick={() => changeValue(options.max)}
                             disabled={disabled}
-                            {...stylex.props(styles.editorValueButton)}
+                            {...stylex.props(
+                                styles.editorValueButton,
+                                styles.textRight,
+                            )}
                         >
                             {100 - value}%
                         </button>
@@ -447,7 +459,10 @@ function Editor({
                                             : 0.7,
                                 }}
                                 disabled={disabled}
-                                {...stylex.props(styles.editorValueButton)}
+                                {...stylex.props(
+                                    styles.editorValueButton,
+                                    styles.textLeft,
+                                )}
                             >
                                 {getLabel(options.min, true)}
                             </button>
@@ -521,7 +536,10 @@ function Editor({
                                             : 0.7,
                                 }}
                                 disabled={disabled}
-                                {...stylex.props(styles.editorValueButton)}
+                                {...stylex.props(
+                                    styles.editorValueButton,
+                                    styles.textRight,
+                                )}
                             >
                                 {getLabel(options.max, true)}
                             </button>

diff --git a/Resources/Public/Plugin.css b/Resources/Public/Plugin.css
@@ -1,3 +1,5 @@
+@property --marginRight { syntax: "*"; inherits: false; initial-value: "*";}
+@property --width { syntax: "*"; inherits: false; initial-value: "*";}
 :root, .range-39wzrw{--range-17fcymb:var(--transition-Default);--range-1qkce6e:cubic-bezier(0.4, 0, 0.2, 1);}
 :root, .range-1ow9cle{--range-1yfsa84:var(--colors-PrimaryBlue);--range-11ai139:var(--colors-ContrastNeutral);--range-3rq551:var(--colors-ContrastBright);--range-112jqwz:var(--colors-ContrastBrightest);--range-5uow9g:var(--colors-ContrastDarkest);--range-1aufrmy:var(--colors-Warn);}
 .range-jcvozh{--color:var(--range-1yfsa84)}
@@ -37,6 +39,7 @@
 .range-1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
 .range-190dgpg:not(#\#):not(#\#):not(#\#){opacity:.65}
 .range-2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
+.range-dpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
 .range-1hr2gdg:not(#\#):not(#\#):not(#\#){text-align:right}
 .range-87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
 .range-xeqyu3:focus-within:not(#\#):not(#\#):not(#\#){color:var(--range-5uow9g)}

diff --git a/Resources/Public/RangeEditor.js b/Resources/Public/RangeEditor.js
diff --git a/build.mjs b/build.mjs
@@ -37,10 +37,6 @@ const options = {
                 "Resources/Public/Plugin.css",
             ),
             stylexImports: ["@stylexjs/stylex"],
-            unstable_moduleResolution: {
-                type: "commonJS",
-                rootDir: __dirname,
-            },
         }),
     ],
 };

diff --git a/package.json b/package.json
@@ -28,12 +28,12 @@
   },
   "devDependencies": {
     "@neos-project/neos-ui-extensibility": "~8.3.11",
-    "@stylexjs/esbuild-plugin": "^0.9.3",
+    "@stylexjs/esbuild-plugin": "^0.10.0",
     "esbuild": "^0.24.2",
     "prettier": "^3.4.2"
   },
   "dependencies": {
-    "@stylexjs/stylex": "^0.9.3",
+    "@stylexjs/stylex": "^0.10.0",
     "use-debounce": "^10.0.4"
   },
   "peerDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml