Improved split-button component, added place-left class for dropdown menu

olton · olton · commit 29e4a3d70a68 · 2025-07-03T14:23:01.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,4 +11,5 @@
 - [x] Fixed bug in `toast` for applying options
 - [x] Updated button size, reduce `large`, added `largest`
 - [x] Updated input size, reduce `large`, added `largest`
-- [x] Fixed `gravatar` for creating when an element is not `img`, added `avatar` class
+- [x] Fixed `gravatar` for creating when an element is not `img`, added `avatar` class
+- [x] Improved `split-button` component, added `place-left` class for dropdown menu
diff --git a/lib/metro.all.css b/lib/metro.all.css
@@ -73011,6 +73011,12 @@ label:has(input) {
   right: 0;
   top: 100%;
 }
+.split-button [data-role-dropdown].place-left,
+.split-button [data-role-dropmenu].place-left,
+.split-button .drop-object.place-left {
+  left: 0;
+  right: auto;
+}
 .split-button.no-gap {
   gap: 0;
 }
diff --git a/lib/metro.all.css.map b/lib/metro.all.css.map
diff --git a/lib/metro.css b/lib/metro.css
@@ -73011,6 +73011,12 @@ label:has(input) {
   right: 0;
   top: 100%;
 }
+.split-button [data-role-dropdown].place-left,
+.split-button [data-role-dropmenu].place-left,
+.split-button .drop-object.place-left {
+  left: 0;
+  right: auto;
+}
 .split-button.no-gap {
   gap: 0;
 }
diff --git a/lib/metro.css.map b/lib/metro.css.map
diff --git a/source/components/split-button/split-button.less b/source/components/split-button/split-button.less
@@ -105,6 +105,11 @@
     [data-role-dropdown], [data-role-dropmenu], .drop-object {
         right: 0;
         top: 100%;
+        
+        &.place-left {
+            left: 0;
+            right: auto;
+        }
     }
 
     &.no-gap {

Original file line number	Diff line number	Diff line change
`@@ -73011,6 +73011,12 @@ label:has(input) {`
`73011`	`73011`	`right: 0;`
`73012`	`73012`	`top: 100%;`
`73013`	`73013`	`}`
	`73014`	`+.split-button [data-role-dropdown].place-left,`
	`73015`	`+.split-button [data-role-dropmenu].place-left,`
	`73016`	`+.split-button .drop-object.place-left {`
	`73017`	`+ left: 0;`
	`73018`	`+ right: auto;`
	`73019`	`+}`
`73014`	`73020`	`.split-button.no-gap {`
`73015`	`73021`	`gap: 0;`
`73016`	`73022`	`}`