chore: Fix border radius bug on segmented-control (#4398)

Author: at-susie

pages/theming/themed-stroke-width.page.tsx

@@ -13,6 +13,7 @@ import {
   InputProps,
   KeyValuePairs,
   Link,
+  SegmentedControl,
   Select,
   SelectProps,
   SpaceBetween,
@@ -72,6 +73,7 @@ export default function ThemedStrokeWidthPage() {
           borderWidthIconMedium: strokeMedium ? `${strokeMedium}px` : '1px',
           borderWidthIconBig: strokeBig ? `${strokeBig}px` : '1.5px',
           borderWidthIconLarge: strokeLarge ? `${strokeLarge}px` : '2px',
+          borderRadiusButton: '8px',
         },
       };
 
@@ -84,6 +86,8 @@ export default function ThemedStrokeWidthPage() {
     return reset;
   }, [themed, strokeSmall, strokeNormal, strokeMedium, strokeBig, strokeLarge]);
 
+  const [selectedId, setSelectedId] = React.useState('seg-1');
+
   return (
     <div style={{ padding: 15 }}>
       <h1>Themed icon stroke width</h1>
@@ -220,6 +224,17 @@ export default function ThemedStrokeWidthPage() {
               </Button>
             </div>
 
+            <SegmentedControl
+              selectedId={selectedId}
+              onChange={({ detail }) => setSelectedId(detail.selectedId)}
+              label="Default segmented control"
+              options={[
+                { text: 'Segment 1', id: 'seg-1' },
+                { text: 'Segment 2', id: 'seg-2' },
+                { text: 'Segment 3', id: 'seg-3' },
+              ]}
+            />
+
             <div>
               <Link external={true} href="https://example.com/" variant="primary">
                 Learn more

src/segmented-control/segment.scss

@@ -21,6 +21,7 @@ $selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-b
 $selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
 $segment-gap: awsui.$space-static-xxs;
 $segment-divider-width: 1px;
+$segment-radius: calc(awsui.$border-radius-button - 3px);
 
 .segment {
   @include styles.font-body-m;
@@ -34,10 +35,10 @@ $segment-divider-width: 1px;
   color: $default-color;
   overflow: visible;
 
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
+  border-start-start-radius: $segment-radius;
+  border-start-end-radius: $segment-radius;
+  border-end-start-radius: $segment-radius;
+  border-end-end-radius: $segment-radius;
 
   position: relative;
   block-size: calc(100% - $segment-gap);