Skip to content

feat(styles): update buttons padding, gap and border-radius#1666

Merged
imagoiq merged 5 commits into
mainfrom
1573-button-new-padding-gap-radius
Aug 3, 2023
Merged

feat(styles): update buttons padding, gap and border-radius#1666
imagoiq merged 5 commits into
mainfrom
1573-button-new-padding-gap-radius

Conversation

@imagoiq

@imagoiq imagoiq commented Jul 25, 2023

Copy link
Copy Markdown
Contributor

Following #1571 (comment) and discussion from today.

Updated:

  • Padding
  • Internal gap
  • Border-radius

Figma: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?node-id=9096%3A36684&mode=dev

@imagoiq imagoiq self-assigned this Jul 25, 2023
@changeset-bot

changeset-bot Bot commented Jul 25, 2023 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6a0b5b9

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

This PR includes changesets to release 9 packages
Name Type
@swisspost/design-system-styles Patch
@swisspost/design-system-components-angular Patch
@swisspost/design-system-components Patch
@swisspost/design-system-demo Patch
@swisspost/design-system-documentation-v7 Patch
@swisspost/design-system-documentation Patch
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header Patch
@swisspost/design-system-components-react 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

@imagoiq imagoiq linked an issue Jul 25, 2023 that may be closed by this pull request
Styles: Update button #1573
Closed
@swisspost-bot

swisspost-bot commented Jul 25, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

Preview environment ready: https://preview-1666--swisspost-design-system-next-v7.netlify.app
Preview environment ready: https://preview-1666--swisspost-web-frontend.netlify.app
Preview environment ready: https://preview-1666--swisspost-design-system-next.netlify.app

@swisspost-bot

swisspost-bot commented Jul 25, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

Preview environment ready: https://preview-1666--swisspost-design-system-next.netlify.app

alizedebray
alizedebray requested changes Jul 26, 2023
View reviewed changes

@alizedebray alizedebray left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Changes work well with basic/icon buttons, only animated buttons look a bit off:
image

From Dimitri's comment, it doesn't have to be pixel perfect, you can probably just update the $btn-animation-distance-map for the text and arrow placement to look like what we currently have.
image

@alizedebray

alizedebray commented Jul 26, 2023

Copy link
Copy Markdown
Contributor

Can you also update the icon size for large buttons, it is 24px currently instead of 22px in Figma?

@imagoiq imagoiq requested a review from alizedebray July 27, 2023 09:03
@alizedebray alizedebray requested a review from rouvenpost August 2, 2023 06:51
@rouvenpost

rouvenpost commented Aug 2, 2023

Copy link
Copy Markdown

The «Like» Button does not show in any of the Variants.

@imagoiq imagoiq removed the request for review from rouvenpost August 2, 2023 14:56
@imagoiq

imagoiq commented Aug 2, 2023

Copy link
Copy Markdown
Contributor Author

I think this one is ready to be merged, if you could have a look, please @gfellerph @alizedebray @oliverschuerch

gfellerph
gfellerph requested changes Aug 2, 2023
View reviewed changes

@gfellerph gfellerph left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can you add a changeset please? The rest is looking good to me.

@imagoiq imagoiq requested a review from gfellerph August 3, 2023 05:46
@sonarqubecloud

sonarqubecloud Bot commented Aug 3, 2023

Copy link
Copy Markdown

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

gfellerph
gfellerph approved these changes Aug 3, 2023
View reviewed changes

@gfellerph gfellerph left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thx

alizedebray
alizedebray approved these changes Aug 3, 2023
View reviewed changes
Comment thread .changeset/polite-radios-train.md Outdated
@imagoiq @alizedebray
Update .changeset/polite-radios-train.md
6a0b5b9 
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
@imagoiq imagoiq merged commit bc5f222 into main Aug 3, 2023
@imagoiq imagoiq deleted the 1573-button-new-padding-gap-radius branch August 3, 2023 07:51
@github-actions github-actions Bot mentioned this pull request Aug 3, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gfellerph gfellerph gfellerph approved these changes

@alizedebray alizedebray alizedebray approved these changes

@oliverschuerch oliverschuerch Awaiting requested review from oliverschuerch

Assignees

@imagoiq imagoiq

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Styles: Update button

5 participants

@imagoiq @swisspost-bot @alizedebray @rouvenpost @gfellerph