From 774df50fcc6d3b2f2f1f4c010b1476e57e8aefe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tj=C3=B6rnhed=20Tom?= <tom.tjornhed@stenaline.com>
Date: Wed, 12 Nov 2025 21:53:46 +0100
Subject: [PATCH] Added new border option for labelledselect to allow for
 horizontal combination with other inputfield

---
 .../labelled-select/LabelledSelect.module.css | 10 +++++
 .../LabelledSelect.stories.tsx                | 42 +++++++++++++++++++
 .../ui/labelled-select/LabelledSelect.tsx     |  4 +-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/forms/src/components/ui/labelled-select/LabelledSelect.module.css b/packages/forms/src/components/ui/labelled-select/LabelledSelect.module.css
index d52ba1fab..7c4cddfec 100644
--- a/packages/forms/src/components/ui/labelled-select/LabelledSelect.module.css
+++ b/packages/forms/src/components/ui/labelled-select/LabelledSelect.module.css
@@ -15,6 +15,16 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+  
+  &.onlyLeftBorder {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &.onlyRightBorder {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 
   &.error {
     border-color: var(--snackskal);
diff --git a/packages/forms/src/components/ui/labelled-select/LabelledSelect.stories.tsx b/packages/forms/src/components/ui/labelled-select/LabelledSelect.stories.tsx
index dcdc517e1..b9c3d88b0 100644
--- a/packages/forms/src/components/ui/labelled-select/LabelledSelect.stories.tsx
+++ b/packages/forms/src/components/ui/labelled-select/LabelledSelect.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { LabelledSelect } from "./LabelledSelect";
 import { Box } from "@stenajs-webui/core";
+import { LabelledTextInput } from "../labelled-text-input/LabelledTextInput";
 
 export default {
   title: "forms/LabelledSelect",
@@ -12,6 +13,9 @@ const options = (
     <option id={"1"} value={"dev"}>
       Developer
     </option>
+    <option id={"2"} value={"man"}>
+      Manager
+    </option>
     <option id={"2"} value={"des"}>
       Designer
     </option>
@@ -42,6 +46,44 @@ export const Mobile = () => (
   </Box>
 );
 
+export const Combined = () => (
+  <Box gap={5}>  
+    <Box width={"500px"} display={"flex"} flexDirection={"row"}>
+      <LabelledSelect
+        label={"Who rocks?"}
+        name={"thebest"}
+        borderVariant="onlyLeftBorder"
+        onValueChange={(v) => console.log("Changed to", v)}
+      >
+        {options}
+      </LabelledSelect>
+      <LabelledTextInput
+        label={"Who rocks?"}
+        name={"thebest"}
+        borderRadiusVariant="onlyRight"
+        onValueChange={(v) => console.log("Changed to", v)}
+      />
+    </Box>
+    <Box width={"500px"} display={"flex"} flexDirection={"row"}>
+      <LabelledTextInput
+        label={"Who rocks?"}
+        name={"thebest"}
+        borderRadiusVariant="onlyLeft"
+        onValueChange={(v) => console.log("Changed to", v)}
+      />
+      <LabelledSelect
+        label={"Who rocks?"}
+        name={"thebest"}
+        borderVariant="onlyRightBorder"
+        onValueChange={(v) => console.log("Changed to", v)}
+      >
+        {options}
+      </LabelledSelect>
+    </Box>
+  </Box>
+
+);
+
 Mobile.parameters = {
   viewport: {
     defaultViewport: "mobile1",
diff --git a/packages/forms/src/components/ui/labelled-select/LabelledSelect.tsx b/packages/forms/src/components/ui/labelled-select/LabelledSelect.tsx
index 39709304c..f2a1484ef 100644
--- a/packages/forms/src/components/ui/labelled-select/LabelledSelect.tsx
+++ b/packages/forms/src/components/ui/labelled-select/LabelledSelect.tsx
@@ -11,7 +11,9 @@ import { SelectElementProps } from "@stenajs-webui/core";
 export type SelectBorderVariant =
   | "normalBorder"
   | "onlyTopBorder"
-  | "onlyBottomBorder";
+  | "onlyBottomBorder"
+  | "onlyLeftBorder"
+  | "onlyRightBorder";
 
 export interface LabelledSelectProps
   extends ValueAndOnValueChangeProps<string>,