fix: icon button sizes & update button docs #1738

joshuaellis · 2024-06-10T14:03:01Z

What does it do?

refactor LinkButton to just be a wrapper of Button (less bugs)
refactor IconButton to be more powerful & correct it's sizes
update documentation for all "Buttons"

Related issue(s)/PR(s)

resolves DX-1379
resolves Marketplace links don't open in new tab strapi#16378

vercel · 2024-06-10T14:03:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design_system_v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 9:20am
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 9:20am
design-system-website	❌ Failed (Inspect)			Jun 11, 2024 9:20am

changeset-bot · 2024-06-10T14:03:05Z

🦋 Changeset detected

Latest commit: f623e78

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@strapi/design-system	Patch
@strapi/icons	Patch
@strapi/ui-primitives	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-06-10T14:07:57Z

Size Change: -782 B (-0.27%)

Total Size: 288 kB

Filename	Size	Change
`packages/design-system/dist/index.js`	94.8 kB	-369 B (-0.39%)
`packages/design-system/dist/index.mjs`	93.7 kB	-413 B (-0.44%)

ℹ️ View Unchanged

Filename	Size
`packages/icons/dist/index.js`	21.9 kB
`packages/icons/dist/index.mjs`	21.6 kB
`packages/icons/dist/symbols-index.js`	11.8 kB
`packages/icons/dist/symbols-index.mjs`	11.6 kB
`packages/primitives/dist/index.js`	16.8 kB
`packages/primitives/dist/index.mjs`	16.3 kB

_{compressed-size-action}

remidej

This design system of ours is getting pretty cool 🔥

Side note, I wish I had access to the Vercel org to see the preview

docs/stories/04-components/IconButton.mdx

docs/stories/04-components/LinkButton.mdx

docs/stories/04-components/TextButton.mdx

packages/design-system/src/components/BaseLink/BaseLink.tsx

packages/design-system/src/components/IconButton/IconButton.tsx

Co-authored-by: Rémi de Juvigny <[email protected]>

joshuaellis · 2024-06-11T09:05:44Z

Side note, I wish I had access to the Vercel org to see the preview

did you click visit preview? i've tweaked some settings and using incognito i can still see the preview, so might work now?

remidej · 2024-06-11T09:07:23Z

did you click visit preview? i've tweaked some settings and using incognito i can still see the preview, so might work now?

My bad, I was following the link from the CI checks, but the direct link in the comment works perfectly

remidej

nice!

packages/design-system/src/components/LinkButton/LinkButton.tsx

madhurisandbhor · 2024-06-11T13:27:12Z

docs/stories/04-components/IconButton.stories.tsx

+      <Flex gap={2}>
+        {BUTTON_VARIANTS.map((variant) => (
+          <IconButton key={variant} {...args} variant={variant}>
+            <Icon />
+          </IconButton>
+        ))}
+      </Flex>
+    );
+  },
+  name: 'all variants',
+} satisfies Story;
+
+export const Group = {
+  render: () => (
+    <IconButtonGroup>
+      <IconButton label="Edit">
+        <Icons.Pencil />
+      </IconButton>
+      <IconButton label="Clone">
+        <Icons.Duplicate />
+      </IconButton>
+      <IconButton label="Delete" variant="danger">
+        <Icons.Trash />
+      </IconButton>
+    </IconButtonGroup>


You will need to add source code as its incorrect for all variants and group. Also it would have been great if we also show withTooltip example in one of the example, so it replaces the default label?

@madhurisandbhor

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. ⚠️

⚠️

⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`. ⚠️

⚠️

⚠️ # Releases ## @strapi/[email protected] ### Minor Changes - [#1748](#1748) [`61936d6`](61936d6) Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - chore: standardise forwardRefs across components ### Patch Changes - [#1738](#1738) [`8a87483`](8a87483) Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix(IconButton): sizing was wrong compared to other buttons - [#1750](#1750) [`d89c9c3`](d89c9c3) Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - Fixed: Link doesn't show the hover color - [#1753](#1753) [`9df216b`](9df216b) Thanks [@simotae14](https://github.com/simotae14)! - fixed Modal Content scroll issues - [#1752](#1752) [`90da62e`](90da62e) Thanks [@remidej](https://github.com/remidej)! - fixed SubNavHeader not applying space between label and search icon - [#1749](#1749) [`c7c5ad6`](c7c5ad6) Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix: add click action on tag icon instead of on tag itself - Updated dependencies \[]: - @strapi/[email protected] ## @strapi/[email protected] ## @strapi/[email protected]

joshuaellis added 2 commits June 10, 2024 09:22

chore: update button stories

29d5c02

chore: refactor LinkButton to be an abstraction of Button

c67995d

joshuaellis added pr: fix This PR is fixing a bug source: design-system relates to design-system package labels Jun 10, 2024

joshuaellis requested review from madhurisandbhor, remidej and jhoward1994 June 10, 2024 14:03

joshuaellis self-assigned this Jun 10, 2024

vercel bot deployed to Preview – design-system June 10, 2024 14:04 View deployment

joshuaellis force-pushed the chore/buttons branch from 5a79a5c to e3129b9 Compare June 10, 2024 14:10

vercel bot deployed to Preview – design-system June 10, 2024 14:15 View deployment

chore: update IconButton & TextButton

a5dafb0

joshuaellis force-pushed the chore/buttons branch from e3129b9 to a5dafb0 Compare June 10, 2024 14:15

vercel bot had a problem deploying to Preview – design-system-website June 10, 2024 14:16 Failure

vercel bot deployed to Preview – design-system June 10, 2024 14:20 View deployment

vercel bot deployed to Preview – design_system_v2 June 10, 2024 14:22 View deployment

joshuaellis mentioned this pull request Jun 10, 2024

fix: LinkButton does not open in new tab #1047

Closed

joshuaellis linked an issue Jun 10, 2024 that may be closed by this pull request

[bug]: disabled prop is inconsistent across Button and IconButton #1345

Closed

remidej reviewed Jun 11, 2024

View reviewed changes

chore: grammer

7d1be2f

Co-authored-by: Rémi de Juvigny <[email protected]>

vercel bot deployed to Preview – design-system June 11, 2024 08:55 View deployment

vercel bot had a problem deploying to Preview – design-system-website June 11, 2024 08:55 Failure

vercel bot deployed to Preview – design_system_v2 June 11, 2024 08:56 View deployment

docs: update routing library guidelines

f623e78

vercel bot had a problem deploying to Preview – design-system-website June 11, 2024 09:16 Failure

vercel bot deployed to Preview – design-system June 11, 2024 09:19 View deployment

vercel bot deployed to Preview – design_system_v2 June 11, 2024 09:20 View deployment

joshuaellis requested a review from remidej June 11, 2024 09:41

remidej approved these changes Jun 11, 2024

View reviewed changes

madhurisandbhor reviewed Jun 11, 2024

View reviewed changes

packages/design-system/src/components/LinkButton/LinkButton.tsx Show resolved Hide resolved

joshuaellis merged commit 8a87483 into releases/2.0.0 Jun 11, 2024
11 of 12 checks passed

joshuaellis deleted the chore/buttons branch June 11, 2024 10:52

alexandrebodin mentioned this pull request Jun 11, 2024

chore: version packages for release (rc) #1741

Closed

madhurisandbhor reviewed Jun 11, 2024

View reviewed changes

alexandrebodin mentioned this pull request Jun 14, 2024

chore: version packages for release (rc) #1746

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: icon button sizes & update button docs #1738

fix: icon button sizes & update button docs #1738

Uh oh!

joshuaellis commented Jun 10, 2024 •

edited

Loading

Uh oh!

vercel bot commented Jun 10, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Jun 10, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jun 10, 2024 •

edited

Loading

Uh oh!

remidej left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joshuaellis commented Jun 11, 2024

Uh oh!

remidej commented Jun 11, 2024

Uh oh!

remidej left a comment

Uh oh!

Uh oh!

Uh oh!

madhurisandbhor Jun 11, 2024

Uh oh!

Uh oh!

fix: icon button sizes & update button docs #1738

fix: icon button sizes & update button docs #1738

Uh oh!

Conversation

joshuaellis commented Jun 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does it do?

Related issue(s)/PR(s)

Uh oh!

vercel bot commented Jun 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jun 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jun 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

remidej left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joshuaellis commented Jun 11, 2024

Uh oh!

remidej commented Jun 11, 2024

Uh oh!

remidej left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

madhurisandbhor Jun 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joshuaellis commented Jun 10, 2024 •

edited

Loading

vercel bot commented Jun 10, 2024 •

edited

Loading

changeset-bot bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading