From 5fd8d29ae2ccc9fbc4a9c8ef06a4fc9dbf6eb518 Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Wed, 15 Nov 2023 11:47:07 +0100 Subject: [PATCH 1/2] fix(button): adjust small variant icon usage --- .../button/src/button/button.stories.js | 43 ++++++++++++++++--- components/button/src/button/button.styles.js | 4 +- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js index 704bc83ced..0fcdff9807 100644 --- a/components/button/src/button/button.stories.js +++ b/components/button/src/button/button.stories.js @@ -40,7 +40,7 @@ export default { }, } -const DemoIcon = ( +const DemoIcon24 = ( + +) + +const DemoIcon16 = ( + + ) @@ -179,7 +193,7 @@ export const Icon = (args) => ( ) Icon.args = { - icon: DemoIcon, + icon: DemoIcon24, name: 'Icon button', } Icon.parameters = { @@ -194,18 +208,33 @@ Icon.parameters = { }, } +export const IconOnly = Template.bind({}) +IconOnly.args = { + icon: DemoIcon24, + name: 'Icon only button', + children: null, +} + export const IconSmall = Template.bind({}) IconSmall.args = { - icon: DemoIcon, + icon: DemoIcon16, small: true, name: 'Icon small button', + children: 'Label me!', +} + +export const IconOnlySmall = Template.bind({}) +IconOnlySmall.args = { + icon: DemoIcon16, + small: true, + name: 'Icon only small button', children: null, } export const Toggled = Template.bind({}) Toggled.args = { toggled: true, - icon: DemoIcon, + icon: DemoIcon24, name: 'Toggled button', children: null, } @@ -227,7 +256,7 @@ export const ToggledDisabled = Template.bind({}) ToggledDisabled.args = { toggled: true, disabled: true, - icon: DemoIcon, + icon: DemoIcon24, name: 'Toggled button', children: null, } @@ -244,7 +273,7 @@ Loading.args = { name: 'Loading button', loading: true, children: 'Loading...', - icon: DemoIcon, + icon: DemoIcon24, } Loading.parameters = { docs: { diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js index d17f6bb954..841de9152f 100644 --- a/components/button/src/button/button.styles.js +++ b/components/button/src/button/button.styles.js @@ -75,7 +75,7 @@ export default css` .small { height: 28px; - padding: 0 8px; + padding: 0 6px; font-size: 14px; line-height: 16px; } @@ -205,7 +205,7 @@ export default css` } .small.icon-only { - padding: 0 0 0 1px; + padding: 0 4px 0 5px; } .small .button-icon { From ec63ac31d0d7c8bcb6d97cfb7e9d6468566540bc Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Wed, 15 Nov 2023 12:27:29 +0100 Subject: [PATCH 2/2] docs(button): clarify icon size usage --- docs/docs/components/button.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index acd0f0eeff..c435337a46 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -147,6 +147,7 @@ Buttons are available in different sizes. Use the size that matches the usage gu - Buttons can show only an icon. - Icons with a text label are useful for providing more information about the action. Users scanning an interface might recognize an icon quicker than text. - Buttons with only an icon need to show a tooltip ==link== on hover and focus that tells the user what the button action is. +- Regular size buttons use 24px icons. Buttons size `small` use 16px icons. ### State: Disabled