Deprecate 3 overloads of StyleScope.borderWidth with wrong parameter names (#2297)

* Temporary deprecate 3 overloads of StyleScope.borderWidth

The reason is wrong parameter names. The behaviour is still correct.
The idea is to fix the parameter names in 2.0 (which is more appropriate for breaking changes)

* Apply better deprecation and replacement approach

* improve the deprecation message

* fix

* add tests for deprecated borderWidth

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt

@@ -83,26 +83,82 @@ fun StyleScope.borderWidth(width: CSSNumeric) {
     property("border-width", width)
 }
 
-fun StyleScope.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
-    property("border-width", "$topLeft $bottomRight")
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+@Deprecated(
+    message = "This function has misleading parameter names. Please use explicit parameter names (or use `Replace with` in IDE).",
+    replaceWith = ReplaceWith(
+        expression = "borderWidth(vertical = topLeft, horizontal = bottomRight)"
+    )
+)
+@Suppress("UNUSED_PARAMETER")
+fun StyleScope.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric, unused: Unit? = null) {
+    borderWidth(vertical = topLeft, horizontal = bottomRight)
+}
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+fun StyleScope.borderWidth(vertical: CSSNumeric, horizontal: CSSNumeric) {
+    property("border-width", "$vertical $horizontal")
 }
 
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+@Deprecated(
+    message = "This function has misleading parameter names. Please use explicit parameter names (or use `Replace with` in IDE).",
+    replaceWith = ReplaceWith(
+        expression = "borderWidth(top = topLeft, horizontal = topRightAndBottomLeft, bottom = bottomRight)"
+    )
+)
+@Suppress("UNUSED_PARAMETER")
 fun StyleScope.borderWidth(
     topLeft: CSSNumeric,
     topRightAndBottomLeft: CSSNumeric,
-    bottomRight: CSSNumeric
+    bottomRight: CSSNumeric,
+    unused: Unit? = null
 ) {
-    property("border-width", "$topLeft $topRightAndBottomLeft $bottomRight")
+    borderWidth(top = topLeft, horizontal = topRightAndBottomLeft, bottom = bottomRight)
+}
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+fun StyleScope.borderWidth(top: CSSNumeric, horizontal: CSSNumeric, bottom: CSSNumeric) {
+    property("border-width", "$top $horizontal $bottom")
 }
 
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+@Deprecated(
+    message = "This function has misleading parameter names. Please use explicit parameter names (or use `Replace with` in IDE).",
+    replaceWith = ReplaceWith(
+        expression = "borderWidth(top = topLeft, right = topRight, bottom = bottomRight, left = bottomLeft)"
+    )
+)
+@Suppress("UNUSED_PARAMETER")
 fun StyleScope.borderWidth(
     topLeft: CSSNumeric,
     topRight: CSSNumeric,
     bottomRight: CSSNumeric,
-    bottomLeft: CSSNumeric
+    bottomLeft: CSSNumeric,
+    unused: Unit? = null
 ) {
-    property(
-        "border-width",
-        "$topLeft $topRight $bottomRight $bottomLeft"
-    )
+    borderWidth(top = topLeft, right = topRight, bottom = bottomRight, left = bottomLeft)
+}
+
+/**
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
+ */
+fun StyleScope.borderWidth(
+    top: CSSNumeric,
+    right: CSSNumeric,
+    bottom: CSSNumeric,
+    left: CSSNumeric
+) {
+    property("border-width", "$top $right $bottom $left")
 }

web/core/src/jsTest/kotlin/css/CSSBorderTests.kt

@@ -59,11 +59,19 @@ class CSSBorderTests {
             Div({ style { borderWidth(3.px, 7.px) } })
             Div({ style { borderWidth(3.px, 5.px, 4.px) } })
             Div({ style { borderWidth(3.px, 5.px, 4.px, 2.px) } })
+
+            Div({ style { borderWidth(topLeft = 3.px, 7.px) } })
+            Div({ style { borderWidth(topLeft = 3.px, 5.px, 4.px) } })
+            Div({ style { borderWidth(topLeft = 3.px, 5.px, 4.px, 2.px) } })
         }
 
         assertEquals("2px", nextChild().style.borderWidth)
         assertEquals("3px 7px", nextChild().style.borderWidth)
         assertEquals("3px 5px 4px", nextChild().style.borderWidth)
         assertEquals("3px 5px 4px 2px", nextChild().style.borderWidth)
+
+        assertEquals("3px 7px", nextChild().style.borderWidth)
+        assertEquals("3px 5px 4px", nextChild().style.borderWidth)
+        assertEquals("3px 5px 4px 2px", nextChild().style.borderWidth)
     }
 }