Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Allow Button to display an icon without a label #1654

Merged
merged 35 commits into from
Oct 23, 2024

Conversation

dlnr
Copy link
Contributor

@dlnr dlnr commented Oct 9, 2024

Describe the pull request

While the story wants the tertiary button to be able to replace the IconButton component I've tied the Figma button API to the code. Because narrowing the "icon only" variant to just the tertiary button would require it be a separate component or have dodgy conditionals. Also the map wil need a secondary icon only variant or a button group of icon buttons might need a call to action.

What

I've reverted the changes to the IconPosition enum (not using iconStart and iconEnd) because using code connect this will match the React code snippet ,it saves a couple of properties and prevents the ability to have two icons in a button. It does introduce more variants in Figma, but this should be fine.

The label property was also not needed and the "icon only" variant introduces a span around the children with a visually hidden class.

Why

Previously an icon would have to be manually added to the children of the button, the size of button would be up to the developer, as well as adding a square attribute. There were plenty of ways to introduce errors in the rendering of the button. This fixes that while also having an API to change the position of the icon.

How

This PR introduces two props (icon and iconPosition) and conditionals to render the children.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

  • Add or update unit tests
  • Add or update documentation
  • Add or update stories
  • Add or update exports in index.* files
  • Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

  • This PR is tied to the linked Figma component
  • After merge a code connect file will be uploaded to display the correct code snippet

@dlnr dlnr self-assigned this Oct 9, 2024
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 11, 2024 12:38 Destroyed
storybook/src/components/Button/Button.docs.mdx Outdated Show resolved Hide resolved
packages/css/src/components/button/button.scss Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
storybook/src/components/Button/Button.stories.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 14, 2024 10:23 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 14, 2024 10:26 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 14, 2024 10:28 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 14, 2024 11:08 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 14, 2024 11:16 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 15, 2024 07:50 Destroyed
Copy link
Contributor

@VincentSmedinga VincentSmedinga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ve added descriptions to the examples.

packages/css/src/components/button/button.scss Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.test.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
packages/react/src/Button/Button.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 18, 2024 14:40 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 18, 2024 14:43 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 07:53 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 08:45 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 09:16 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 09:39 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 11:27 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 12:36 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 21, 2024 18:30 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-859-icon-only-button October 22, 2024 11:52 Destroyed
@alimpens alimpens merged commit 2d347b6 into develop Oct 23, 2024
6 checks passed
@alimpens alimpens deleted the feature/DES-859-icon-only-button branch October 23, 2024 07:21
@github-actions github-actions bot mentioned this pull request Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants