From d1798819c054e4bfe7aca26c59241bc6e4f26679 Mon Sep 17 00:00:00 2001
From: ssama88 <148904725+ssama88@users.noreply.github.com>
Date: Wed, 1 Nov 2023 03:47:56 -0700
Subject: [PATCH] Storybook: Formatted SegmentAsync story (#77307)

---
 packages/grafana-ui/src/components/Segment/Segment.story.tsx   | 2 +-
 .../grafana-ui/src/components/Segment/SegmentAsync.story.tsx   | 3 ++-
 .../grafana-ui/src/components/Segment/SegmentInput.story.tsx   | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/Segment.story.tsx b/packages/grafana-ui/src/components/Segment/Segment.story.tsx
index c17f6729d3d..771fc011ba7 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.story.tsx
@@ -33,7 +33,7 @@ const SegmentFrame = ({
   children: React.ReactNode;
 }) => (
   <>
-    <SegmentSection label="Segment Name">
+    <SegmentSection label="Segment">
       {children}
       <Segment Component={AddButton} onChange={({ value }) => action('New value added')(value)} options={options} />
     </SegmentSection>
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
index 918a5af232f..edf49d25647 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
@@ -29,12 +29,13 @@ const SegmentFrame = ({
   loadOptions: (options: Array<SelectableValue<string>>) => Promise<Array<SelectableValue<string>>>;
 }>) => (
   <>
-    <SegmentSection label="Segment Name">
+    <SegmentSection label="Segment">
       {children}
       <SegmentAsync
         Component={AddButton}
         onChange={(value) => action('New value added')(value)}
         loadOptions={() => loadOptions(options)}
+        inputMinWidth={100}
       />
     </SegmentSection>
   </>
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
index 0f596e5f334..85e9122ef4f 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
@@ -8,7 +8,7 @@ import { SegmentInputProps } from './SegmentInput';
 
 const SegmentFrame = ({ children }: React.PropsWithChildren) => (
   <>
-    <SegmentSection label="Segment Name">{children}</SegmentSection>
+    <SegmentSection label="Segment">{children}</SegmentSection>
   </>
 );