Merge branch 'main' into brooke/disabled-radio

Author: bruugey

.changeset/little-spoons-doubt.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/segmented-control': minor
+---
+
+Label prop now accepts type `React.ReactNode` instead of `string`

packages/segmented-control/src/SegmentedControl/SegmentedControl.tsx

@@ -70,7 +70,7 @@ export const SegmentedControl = forwardRef<
 
   const name = useIdAllocator({
     prefix: 'segmented-control',
-    id: nameProp ?? label,
+    id: nameProp,
   });
 
   // If a value is given, then it's controlled
@@ -374,7 +374,7 @@ SegmentedControl.propTypes = {
   onChange: PropTypes.func,
   defaultValue: PropTypes.string,
   value: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.node,
   name: PropTypes.string,
   followFocus: PropTypes.bool,
   className: PropTypes.string,

packages/segmented-control/src/SegmentedControl/SegmentedControl.types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 export const DeprecatedSize = {
@@ -49,7 +51,7 @@ export interface SegmentedControlProps
   /**
    * A text label to the left of the segmented control. Sets the `name` prop if none is provided.
    */
-  label?: string;
+  label?: React.ReactNode;
 
   /**
    * Identifies the segmented control group to screen readers. Auto-generated if no `name` or `label` is provided.