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.

Sign up for GitHub

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(core/radiobutton, core/checkbox): align text if line break occurs #214

Merged
merged 2 commits into from
Dec 5, 2022
Merged

feat(core/radiobutton, core/checkbox): align text if line break occurs #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f137495
fix(core/checkbox, core/radiobutton): align text in case of an word b…
danielleroux Dec 5, 2022
194bc28
feat: align text
danielleroux Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/core/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ function buildProjectsWithThemes() {
/**
* See https://playwright.dev/docs/test-configuration.
*/
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config: PlaywrightTestConfig = {
testMatch: '*.e2e.ts',
/* Maximum time one test can run for. */
Expand All @@ -55,7 +56,7 @@ const config: PlaywrightTestConfig = {
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
workers: 10,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
Expand Down
15 changes: 8 additions & 7 deletions packages/core/scss/components/_checkboxes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,8 @@
[type='checkbox']:not(:checked) + label,
[type='checkbox']:checked + label {
position: relative;
display: flex;
align-items: center;
line-height: $default-space;
display: inline-flex;
align-items: flex-start;
user-select: none;

color: var(--theme-checkbox-label--color);
Expand All @@ -45,6 +44,10 @@
content: '';
width: $size;
height: $size;
min-width: $size;
min-height: $size;
max-width: $size;
max-height: $size;
float: left;
margin-right: $small-space;

Expand Down Expand Up @@ -110,8 +113,7 @@
border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
position: absolute;
top: 0.3rem;
left: 0.35rem;
margin: 0.3125rem 0.3125rem 0.1875rem;
transform: rotate(-53deg) scale(2);
}

Expand Down Expand Up @@ -151,8 +153,7 @@
height: 0.125rem;
border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
position: absolute;
top: $small-space;
left: $tiny-space;
margin: 0.5rem 0 0 0.25rem;
}

& + label:before {
Expand Down
7 changes: 6 additions & 1 deletion packages/core/scss/components/_radiobuttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@

[type='radio']:not(:checked) + label,
[type='radio']:checked + label {
display: inline-flex;
align-items: flex-start;
position: relative;
line-height: $size;
user-select: none;

color: var(--theme-radiobtn-label--color);
Expand All @@ -36,6 +37,10 @@
content: '';
width: $size;
height: $size;
min-width: $size;
min-height: $size;
max-width: $size;
max-height: $size;
float: left;
margin-right: $small-space;

Expand Down
Binary file modified ...ckbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...kbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions packages/core/src/components/checkbox/test/long-text/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!--
SPDX-FileCopyrightText: 2022 Siemens AG

SPDX-License-Identifier: MIT
-->

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
</head>
<body>
<div style="width: 8rem">
<div style="margin-bottom: 1rem">
<input type="checkbox" id="checkbox_01" checked />
<label for="checkbox_01"
>Very very very long text text text which is so long long long
long</label
>
</div>

<div style="margin-bottom: 1rem">
<input type="checkbox" id="checkbox_02" checked disabled />
<label for="checkbox_02"
>Very very very long text text text which is so long long long
long</label
>
</div>

<div style="margin-bottom: 1rem">
<input type="checkbox" id="checkbox_01" />
<label for="checkbox_01"
>Very very very long text text text which is so long long long
long</label
>
</div>

<div>
<input type="checkbox" id="checkbox_02" disabled />
<label for="checkbox_02"
>Very very very long text text text which is so long long long
long</label
>
</div>
</div>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
28 changes: 27 additions & 1 deletion packages/core/src/components/my-component/my-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,32 @@ import { Component, h, Host } from '@stencil/core';
})
export class MyComponent {
render() {
return <Host></Host>;
return (
<Host style={{ width: '8rem' }}>
<input
type="checkbox"
id="cb_1"
ref={(r) => {
r.indeterminate = true;
}}
/>
<label htmlFor="cb_1">Test</label>

<input checked id="checkbox_1_1" name="group_1" type="radio" />
<label htmlFor="checkbox_1_1">
Checkbox extra long text long so long a little bit longer please
</label>

<input id="checkbox_1_2" name="group_1" type="radio" />
<label htmlFor="checkbox_1_2">
Checkbox extra long text long so long a little bit longer please
</label>

<input disabled id="checkbox_1_3" name="group_1" type="radio" />
<label htmlFor="checkbox_1_3">
Checkbox extra long text long so long a little bit longer please
</label>
</Host>
);
}
}
38 changes: 38 additions & 0 deletions packages/core/src/components/radiobutton/test/long-text/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!--
SPDX-FileCopyrightText: 2022 Siemens AG

SPDX-License-Identifier: MIT
-->

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
</head>
<body>
<div style="width: 8rem">
<input checked id="checkbox_1_1" name="group_1" type="radio" />
<label for="checkbox_1_1"
>With extra long text so long maybe longer even long long long
long</label
>

<input id="checkbox_1_2" name="group_1" type="radio" />
<label for="checkbox_1_2"
>With extra long text so long maybe longer even long long long
long</label
>

<input disabled id="checkbox_1_3" name="group_1" type="radio" />
<label for="checkbox_1_3"
>With extra long text so long maybe longer even long long long
long</label
>
</div>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions packages/core/src/components/radiobutton/test/radiobutton.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,9 @@ regressionTest.describe('radiobutton', () => {
await page.goto(`radiobutton/test/no-checked`);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('long text', async ({ page }) => {
await page.goto(`radiobutton/test/long-text`);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
});
Binary file added ...2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.