📝Update button documentation for fullWidth (#3093)

* 📝Update button documentation for fullWidth * slightly reword description
equinor · Oct 12, 2023 · 2ee706d · 2ee706d
1 parent d1b768b
commit 2ee706d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx
@@ -115,7 +115,7 @@ Tooltip accessible for people using keyboard navigation, as the button is still
 <Canvas of={ComponentStories.WithTooltip} />
 
 ### Full width
-Use boolean prop `fullWidth`
+When stretching a button beyond its intrinsic width, the `fullWidth` prop can be used to position icon at the edge.
 
 <Canvas of={ComponentStories.FullWidth} />
 

diff --git a/packages/eds-core-react/src/components/Button/Button.stories.tsx b/packages/eds-core-react/src/components/Button/Button.stories.tsx
@@ -286,7 +286,18 @@ WithTooltip.storyName = 'Disabled buttons and tooltip'
 
 export const FullWidth: StoryFn<ButtonProps> = () => (
   <>
-    <Button fullWidth>Primary</Button>
+    <Button fullWidth>
+      <Icon data={refresh} size={16}></Icon>
+      Fullwidth
+    </Button>
+    <Button fullWidth>
+      Fullwidth
+      <Icon data={refresh} size={16}></Icon>
+    </Button>
+    <Button>
+      <Icon data={refresh} size={16}></Icon>
+      not Fullwidth
+    </Button>
   </>
 )
 FullWidth.storyName = 'Full width'

diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx
@@ -163,7 +163,7 @@ export type ButtonProps = {
    * @default 'button'
    */
   type?: string
-  /** FullWidth (stretched) button  */
+  /** Floats icon to the side if button is stretched beyond its intrinsic width  */
   fullWidth?: boolean
 } & ButtonHTMLAttributes<HTMLButtonElement>