Review: Add inner border for focus state

Orange-OpenSource · Dec 4, 2024 · 3a50e9b · 3a50e9b
1 parent abb0d5a
commit 3a50e9b
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 17 deletions.
diff --git a/core/src/main/java/com/orange/ouds/core/component/button/OudsButton.kt b/core/src/main/java/com/orange/ouds/core/component/button/OudsButton.kt
@@ -199,6 +199,7 @@ private fun OudsButton(
                 .widthIn(min = buttonTokens.sizeMinWidth.dp)
                 .heightIn(min = buttonTokens.sizeMinHeight.dp, max = maxHeight)
                 .border(hierarchy = hierarchy, state = state, shape = shape)
+                .outerBorder(state = state, shape = shape)
                 .semantics {
                     this.stateDescription = stateDescription
                 },
@@ -272,17 +273,22 @@ private fun Modifier.border(hierarchy: OudsButton.Hierarchy, state: OudsButton.S
     val borderColor = borderColor(hierarchy = hierarchy, state = state)
 
     return if (borderWidth != null && borderColor != null) {
-        if (state != OudsButton.State.Focused) {
-            border(width = borderWidth, color = borderColor, shape = shape)
-        } else {
-            outerBorder(
-                width = borderWidth,
-                color = borderColor,
-                shape = shape,
-                insetWidth = OudsBorderKeyToken.Width.Focus.Inset.value,
-                insetColor = OudsColorKeyToken.Border.Focus.Inset.value
-            )
-        }
+        border(width = borderWidth, color = borderColor, shape = shape)
+    } else {
+        this
+    }
+}
+
+@Composable
+private fun Modifier.outerBorder(state: OudsButton.State, shape: Shape): Modifier {
+    return if (state == OudsButton.State.Focused) {
+        outerBorder(
+            width = OudsBorderKeyToken.Width.Focus.value,
+            color = OudsColorKeyToken.Border.Focus.value,
+            shape = shape,
+            insetWidth = OudsBorderKeyToken.Width.Focus.Inset.value,
+            insetColor = OudsColorKeyToken.Border.Focus.Inset.value
+        )
     } else {
         this
     }
@@ -298,7 +304,7 @@ private fun borderWidth(hierarchy: OudsButton.Hierarchy, state: OudsButton.State
                 OudsButton.State.Hovered,
                 OudsButton.State.Pressed,
                 OudsButton.State.Loading -> borderWidthDefaultInteraction
-                OudsButton.State.Focused -> OudsBorderKeyToken.Width.Focus
+                OudsButton.State.Focused -> OudsBorderKeyToken.Width.Focus.Inset
                 OudsButton.State.Skeleton -> null
             }
             OudsButton.Hierarchy.Minimal -> when (state) {
@@ -307,11 +313,11 @@ private fun borderWidth(hierarchy: OudsButton.Hierarchy, state: OudsButton.State
                 OudsButton.State.Hovered,
                 OudsButton.State.Pressed,
                 OudsButton.State.Loading -> borderWidthMinimalInteraction
-                OudsButton.State.Focused -> OudsBorderKeyToken.Width.Focus
+                OudsButton.State.Focused -> OudsBorderKeyToken.Width.Focus.Inset
                 OudsButton.State.Skeleton -> null
             }
             OudsButton.Hierarchy.Strong,
-            OudsButton.Hierarchy.Negative -> if (state == OudsButton.State.Focused) OudsBorderKeyToken.Width.Focus else null
+            OudsButton.Hierarchy.Negative -> if (state == OudsButton.State.Focused) OudsBorderKeyToken.Width.Focus.Inset else null
         }?.value
     }
 }
@@ -326,7 +332,7 @@ private fun borderColor(hierarchy: OudsButton.Hierarchy, state: OudsButton.State
                 OudsButton.State.Pressed -> colorBorderDefaultPressed
                 OudsButton.State.Loading -> colorBorderDefaultLoading
                 OudsButton.State.Disabled -> colorBorderDefaultDisabled
-                OudsButton.State.Focused -> OudsColorKeyToken.Border.Focus
+                OudsButton.State.Focused -> colorBorderDefaultFocus
                 OudsButton.State.Skeleton -> null
             }
             OudsButton.Hierarchy.Minimal -> when (state) {
@@ -335,11 +341,11 @@ private fun borderColor(hierarchy: OudsButton.Hierarchy, state: OudsButton.State
                 OudsButton.State.Pressed -> colorBorderMinimalPressed
                 OudsButton.State.Loading -> colorBorderMinimalLoading
                 OudsButton.State.Disabled -> colorBorderMinimalDisabled
-                OudsButton.State.Focused -> OudsColorKeyToken.Border.Focus
+                OudsButton.State.Focused -> colorBorderMinimalFocus
                 OudsButton.State.Skeleton -> null
             }
             OudsButton.Hierarchy.Strong,
-            OudsButton.Hierarchy.Negative -> if (state == OudsButton.State.Focused) OudsColorKeyToken.Border.Focus else null
+            OudsButton.Hierarchy.Negative -> null
         }?.value
     }
 }

diff --git a/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[0].png b/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[0].png
diff --git a/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[1].png b/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[1].png
diff --git a/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[2].png b/...uds.core.component.button_OudsButtonTest_takeOudsButtonDarkThemeSnapshot[2].png
diff --git a/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[0].png b/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[0].png
diff --git a/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[1].png b/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[1].png
diff --git a/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[2].png b/...ds.core.component.button_OudsButtonTest_takeOudsButtonLightThemeSnapshot[2].png
diff --git a/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt b/theme-contract/src/main/java/com/orange/ouds/theme/tokens/components/OudsButtonTokens.kt
@@ -69,9 +69,11 @@ open class OudsButtonTokens(
     val colorBorderDefaultPressed: OudsColorKeyToken = OudsColorKeyToken.Action.Primary.Pressed,
     val colorBorderDefaultDisabled: OudsColorKeyToken = OudsColorKeyToken.Action.Disabled,
     val colorBorderDefaultLoading: OudsColorKeyToken = OudsColorKeyToken.Action.Primary.Loading,
+    val colorBorderDefaultFocus: OudsColorKeyToken = OudsColorKeyToken.Action.Primary.Focus,
     val colorBorderMinimalEnabled: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
     val colorBorderMinimalHover: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
     val colorBorderMinimalPressed: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
     val colorBorderMinimalDisabled: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
     val colorBorderMinimalLoading: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
+    val colorBorderMinimalFocus: OudsColorKeyToken = OudsColorKeyToken.Transparent.Default,
 )