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

fix(styles): Checked radio buttons is wrong on dark background #2065

Merged
merged 12 commits into from
Nov 8, 2023

Conversation

imagoiq
Copy link
Contributor

@imagoiq imagoiq commented Oct 11, 2023

What

This PR is a bit confusing as it addresses two problems.

  1. Checked radio button were creating a visual shift in inline layout. It was fixed with fix(styles): Small variants for checkbox and radio #2086 by using a border instead of a margin. But it created the second following problem.
  2. Checked radio button on dark background blends the circle indicator with the background. Styles: selected radios on dark background are broken #2170

Other additions:

  • Added inline layout to snapshot

UI

Before

image

image

After

image

image

@imagoiq imagoiq self-assigned this Oct 11, 2023
@changeset-bot
Copy link

changeset-bot bot commented Oct 11, 2023

🦋 Changeset detected

Latest commit: 33627a5

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

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

@swisspost-bot
Copy link
Contributor

swisspost-bot commented Oct 11, 2023

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

Copy link
Member

@gfellerph gfellerph left a comment

Choose a reason for hiding this comment

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

Do we want to wait for the changes in #2123?

packages/styles/src/components/form-check.scss Outdated Show resolved Hide resolved
@imagoiq imagoiq linked an issue Nov 7, 2023 that may be closed by this pull request
@imagoiq imagoiq changed the title fix(styles): Checked radio buttons with inline layout is offset fix(styles): Checked radio buttons is wrong on dark background Nov 7, 2023
'@swisspost/design-system-styles': patch
---

Fixed offset of radio button when checked and in inline layout.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As the second problem is caused by the first and that the first was not announced in a previous changelog, I'll stick to this sentence about the first problem.

@@ -83,9 +83,10 @@
border-radius: 50%;

&:checked::after {
border: spacing.$size-micro solid color.$white;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The border addition was erroneously introduced in #2086

@@ -11,6 +11,7 @@ module.exports = {
],
overrides: [],
parser: '@typescript-eslint/parser',
ignorePatterns: ['.eslintrc.js'],
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copy link

sonarcloud bot commented Nov 7, 2023

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

@imagoiq imagoiq merged commit f8204bf into main Nov 8, 2023
10 checks passed
@imagoiq imagoiq deleted the fix/inline-radio-button-checked-offset branch November 8, 2023 10:41
gfellerph pushed a commit that referenced this pull request Nov 10, 2023
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.


# Releases
## @swisspost/internet-header@1.13.0

### Minor Changes

- Added a link to settings in the user drop-down menu for business
users. (by [@alizedebray](https://github.com/alizedebray) with
[#2234](#2234))

### Patch Changes

- Replaced the old twitter logo with the new X logo. (by
[@b1aserlu](https://github.com/b1aserlu) with
[#2176](#2176))
-   Updated dependencies:
    -   @swisspost/design-system-styles@6.4.4

## @swisspost/design-system-components@1.6.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.4.4

## @swisspost/design-system-intranet-header@5.0.4

### Patch Changes

- Added a descriptive text to the Post logo home link. (by
[@b1aserlu](https://github.com/b1aserlu) with
[#2101](#2101))
-   Updated dependencies:
    -   @swisspost/design-system-styles@6.4.4

## @swisspost/design-system-styles@6.4.4

### Patch Changes

- Added official way to use label in a floating-label select as a
placeholder. (by [@imagoiq](https://github.com/imagoiq) with
[#2200](#2200))

- Fixed display of button-group input when using checkbox or radio
variant. (by [@imagoiq](https://github.com/imagoiq) with
[#2133](#2133))

- Fixed offset of radio button when checked and in inline layout. (by
[@imagoiq](https://github.com/imagoiq) with
[#2065](#2065))

- The following placeholders from the `\_text.scss` file are depreacted
an will be removed in a future version: `%list-adjustment`,
`%module-container`, `%default-module-spacer`, `%text-container`. (by
[@b1aserlu](https://github.com/b1aserlu) with
[#2171](#2171))

- Fixed default icon flashing when using a `post-icon` on alerts. (by
[@imagoiq](https://github.com/imagoiq) with
[#2244](#2244))

## @swisspost/design-system-documentation@2.4.0

### Minor Changes

- Added docs page on how to use columns. (by
[@davidritter-dotcom](https://github.com/davidritter-dotcom) with
[#2062](#2062))

### Patch Changes

- Added official way to use label in a floating-label select as a
placeholder. (by [@imagoiq](https://github.com/imagoiq) with
[#2200](#2200))

- Extended the `@swisspost/design-system-components` package
getting-started docs page to show multiple ways how it can be
used/imported in different project setups. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#2214](#2214))

-   Updated dependencies:
    -   @swisspost/internet-header@1.13.0
    -   @swisspost/design-system-styles@6.4.4
    -   @swisspost/design-system-components@1.6.2
    -   @swisspost/design-system-components-react@1.0.22

## @swisspost/design-system-components-react@1.0.22

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@1.6.2

## @swisspost/design-system-demo@7.0.4

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.4.4
    -   @swisspost/design-system-intranet-header@5.0.4

## @swisspost/design-system-intranet-header-workspace@3.0.4

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.4.4

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styles: selected radios on dark background are broken
3 participants