From 2ee706d855c5b8108c7fbbb1773efb24c7a5e061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Thu, 12 Oct 2023 14:17:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9DUpdate=20button=20documentation=20f?=
 =?UTF-8?q?or=20fullWidth=20(#3093)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝Update button documentation for fullWidth

* slightly reword description
---
 .../src/components/Button/Button.docs.mdx           |  2 +-
 .../src/components/Button/Button.stories.tsx        | 13 ++++++++++++-
 .../eds-core-react/src/components/Button/Button.tsx |  2 +-
 3 files changed, 14 insertions(+), 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
index 516b8f3935..7fee7e52ef 100644
--- 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
index ec9555021c..7f826e33e9 100644
--- 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
index ff2f1a0aea..3bed76042f 100644
--- 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>