Skip to content

Commit

Permalink
fix(styles): Checked radio buttons is wrong on dark background (#2065)
Browse files Browse the repository at this point in the history
## 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 #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. #2170

Other additions:
- Added inline layout to snapshot

## UI

### Before


![image](https://github.com/swisspost/design-system/assets/12294151/a4f5b593-51b3-49aa-bbbb-cb73e39b7bae)


![image](https://github.com/swisspost/design-system/assets/12294151/1c8c2a1b-eab9-418b-ba4c-f2dff51668fa)

### After


![image](https://github.com/swisspost/design-system/assets/12294151/e2d8551b-7d5d-4474-a731-9e24f542a4f5)


![image](https://github.com/swisspost/design-system/assets/12294151/52a80a1d-ceef-4b07-b053-4d59a4aa35f2)

---------

Co-authored-by: Philipp Gfeller <[email protected]>
  • Loading branch information
imagoiq and gfellerph authored Nov 8, 2023
1 parent 8fce79d commit f8204bf
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/gorgeous-gorillas-confess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Fixed offset of radio button when checked and in inline layout.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
import meta from './radio.stories';
import meta, { renderInline } from './radio.stories';
import { html } from 'lit';
import { bombArgs } from '../../../utils/bombArgs';

Expand Down Expand Up @@ -40,6 +40,12 @@ export const Radio: Story = {
</div>
`,
)}
<!-- Inline radio buttons (sharing the same name) -->
${renderInline({ checkedRadio: 2, label: 'Not a unique label' }, {
viewMode: 'snapshot' as StoryContext['ViewMode'],
name: 'Inline',
} as Partial<StoryContext>)}
</div>
`;
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ type Story = StoryObj;

export const Default: Story = {};

function renderInline(args: Args, context: StoryContext) {
export function renderInline(args: Args, context: Partial<StoryContext>) {
const [_, updateArgs] = useArgs();
const baseId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
const id1 = baseId + '1';
Expand Down
3 changes: 2 additions & 1 deletion packages/styles/src/components/form-check.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,10 @@
border-radius: 50%;

&:checked::after {
border: spacing.$size-micro solid color.$white;
border: spacing.$size-micro solid transparent;
background-color: currentColor;
border-radius: inherit;
background-clip: padding-box;
}
}

Expand Down

0 comments on commit f8204bf

Please sign in to comment.