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

fix(core/key-value-list-label): label behavior #942

Merged
merged 12 commits into from
Jan 16, 2024
Merged

fix(core/key-value-list-label): label behavior #942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eddc0b5
fix(core/key-value-list-label): label behavior
matthiashader Nov 23, 2023
d7c0152
fix(core/dropdown-item) prevent unwatned truncation (#961)
jul-lam Dec 5, 2023
3076820
fix(core/menu-settings) update labels dynamically (#937)
jul-lam Dec 5, 2023
f98c77b
docs(core/modal-header): add apis (#956)
nuke-ellington Dec 7, 2023
4f50607
docs: add analytics (#980)
danielleroux Dec 7, 2023
f33705a
feat(core/dropdown): allow trigger to toggle dropdown (#872)
nuke-ellington Dec 8, 2023
a37a0d8
fix(core/empty-state): center header texts for large layouts (#985)
nuke-ellington Dec 8, 2023
b54aecc
fix(core/select|category-filter): disable native autocomplete (#987)
nuke-ellington Dec 11, 2023
d0effde
Merge branch 'main' into fix/key-value-list-label
nuke-ellington Dec 12, 2023
6df7a15
test(core/key-value): add overflow vrt
nuke-ellington Dec 12, 2023
3afdb3e
Merge branch 'main' into fix/key-value-list-label
nuke-ellington Jan 15, 2024
a81cc1a
test(core/menu-settings): update vrt snapshots
nuke-ellington Jan 15, 2024
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
8 changes: 8 additions & 0 deletions packages/core/src/components/key-value/key-value.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'common-variables';
@import 'mixins/text-truncation';

:host(.keyValue) {
display: flex;
Expand All @@ -15,6 +16,13 @@
flex-grow: 1;
align-items: flex-start;

&,
.content__label,
.content__value {
@include ellipsis;
max-width: 100%;
}

.content__label {
color: var(--theme-color-soft-text);
}
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/tests/key-value/key-value.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,9 @@ regressionTest.describe('key value', () => {
await page.goto('key-value/basic');
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('overflow', async ({ page }) => {
await page.goto('key-value/overflow');
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
});
Binary file added ...e.e2e.ts-snapshots/key-value-overflow-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 ....e2e.ts-snapshots/key-value-overflow-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.
72 changes: 72 additions & 0 deletions packages/core/src/tests/key-value/overflow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!--
SPDX-FileCopyrightText: 2023 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>
<ix-key-value label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." value="Value"></ix-key-value>

<ix-key-value icon="location" label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." value="Value"></ix-key-value>

<ix-key-value
label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
label-position="left"
value="Value"
></ix-key-value>

<ix-key-value
icon="location"
label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
label-position="left"
value="Value"
></ix-key-value>

<ix-key-value label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
<input
class="form-control"
placeholder="Enter text here"
type="text"
slot="custom-value"
/>
</ix-key-value>

<ix-key-value icon="location" label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
<input
class="form-control"
placeholder="Enter text here"
type="text"
slot="custom-value"
/>
</ix-key-value>

<ix-key-value label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." label-position="left">
<input
class="form-control"
placeholder="Enter text here"
type="text"
slot="custom-value"
/>
</ix-key-value>

<ix-key-value icon="location" label="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." label-position="left">
<input
class="form-control"
placeholder="Enter text here"
type="text"
slot="custom-value"
/>
</ix-key-value>

<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>