Fix issue with active pills & segmented control label font-size (stre…

…amlit#10349)

## Describe your changes

Configure usage of the smaller font size directly with Markdown instead
of applying CSS from outside, since in some browsers it might lead to
weird resizing:


https://github.com/user-attachments/assets/da0b48c8-b485-40b0-b12e-308bef6a48f6

## Testing Plan

- I wasn't able to reproduce this in most of the common browsers, only
saw this happening in the playwright browser which seems to have a
slightly different priority of how styles are applied.

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

frontend/lib/src/components/shared/BaseButton/DynamicButtonLabel.tsx

@@ -24,12 +24,14 @@ export interface DynamicButtonLabelProps {
   icon?: string
   label?: string
   iconSize?: IconSize
+  useSmallerFont?: boolean
 }
 
 export const DynamicButtonLabel = ({
   icon,
   label,
   iconSize,
+  useSmallerFont = false,
 }: DynamicButtonLabelProps): React.ReactElement | null => {
   const isMaterialIcon = icon?.startsWith(":material")
   const iconMargin = isMaterialIcon ? "0 sm 0 0" : "0 md 0 0"
@@ -51,7 +53,7 @@ export const DynamicButtonLabel = ({
           source={label}
           allowHTML={false}
           isLabel
-          largerLabel
+          largerLabel={!useSmallerFont}
           disableLinks
         />
       )}

frontend/lib/src/components/shared/BaseButton/styled-components.ts

@@ -345,7 +345,6 @@ const StyledButtonGroupBaseButton = styled(
       overflow: "hidden",
     },
     "& p": {
-      fontSize: theme.fontSizes.sm,
       textOverflow: "ellipsis",
       overflow: "hidden",
     },

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

@@ -162,7 +162,7 @@ export const StyledStreamlitMarkdown =
       isToast,
     }) => {
       // Widget Labels have smaller font size with exception of Button/Checkbox/Radio Button labels
-      // Toasts also have smaller font size
+      // Toasts also have smaller font size as well as pills and segmented controls.
       const useSmallerFontSize =
         (isLabel && !largerLabel) || isToast || isCaption
 

frontend/lib/src/components/widgets/ButtonGroup/ButtonGroup.test.tsx

@@ -575,6 +575,7 @@ describe("ButtonGroup getContentElement", () => {
       label: "foo",
       icon: "bar",
       iconSize: "lg",
+      useSmallerFont: false,
     })
     expect(kind).toBe(BaseButtonKind.BORDERLESS_ICON)
     expect(size).toBe(BaseButtonSize.XSMALL)
@@ -592,6 +593,7 @@ describe("ButtonGroup getContentElement", () => {
       label: "foo",
       icon: undefined,
       iconSize: "lg",
+      useSmallerFont: false,
     })
     expect(kind).toBe(BaseButtonKind.BORDERLESS_ICON)
     expect(size).toBe(BaseButtonSize.XSMALL)
@@ -609,6 +611,7 @@ describe("ButtonGroup getContentElement", () => {
       label: "",
       icon: "foo",
       iconSize: "lg",
+      useSmallerFont: false,
     })
     expect(kind).toBe(BaseButtonKind.BORDERLESS_ICON)
     expect(size).toBe(BaseButtonSize.XSMALL)
@@ -626,6 +629,7 @@ describe("ButtonGroup getContentElement", () => {
       label: "foo",
       icon: "bar",
       iconSize: "base",
+      useSmallerFont: true,
     })
     expect(kind).toBe(BaseButtonKind.PILLS)
     expect(size).toBe(BaseButtonSize.MEDIUM)

frontend/lib/src/components/widgets/ButtonGroup/ButtonGroup.tsx

@@ -117,11 +117,20 @@ export function getContentElement(
       ? BaseButtonSize.XSMALL
       : BaseButtonSize.MEDIUM
 
+  // Use smaller font if kind is pills or segmented control
+  const useSmallerFont =
+    kind === BaseButtonKind.PILLS || kind === BaseButtonKind.SEGMENTED_CONTROL
+
   const iconSize = style === ButtonGroupProto.Style.BORDERLESS ? "lg" : "base"
 
   return {
     element: (
-      <DynamicButtonLabel icon={icon} label={content} iconSize={iconSize} />
+      <DynamicButtonLabel
+        icon={icon}
+        label={content}
+        iconSize={iconSize}
+        useSmallerFont={useSmallerFont}
+      />
     ),
     kind: kind,
     size: size,