From ac094638cb49711dbe4aaf68e48a1d83b00bbb86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 28 Jun 2022 13:56:33 +0200
Subject: [PATCH 1/3] fix disable-child-interaction going over edges
---
packages/uui-table/lib/uui-table-cell.element.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/uui-table/lib/uui-table-cell.element.ts b/packages/uui-table/lib/uui-table-cell.element.ts
index b52627054..16d34eeea 100644
--- a/packages/uui-table/lib/uui-table-cell.element.ts
+++ b/packages/uui-table/lib/uui-table-cell.element.ts
@@ -14,6 +14,7 @@ export class UUITableCellElement extends LitElement {
static styles = [
css`
:host {
+ position: relative;
display: table-cell;
height: var(--uui-table-cell-height, var(--uui-size-12));
padding: var(
From 46fd23efdd4961754021e4fb5dd154211a2aa5ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 28 Jun 2022 13:57:39 +0200
Subject: [PATCH 2/3] only show oultine when using keyboard navigation
---
.../uui-table/lib/uui-table-row.element.ts | 29 +++++++++++++++++--
1 file changed, 26 insertions(+), 3 deletions(-)
diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index 70808247a..cd45faa05 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -23,24 +23,47 @@ export class UUITableRowElement extends SelectOnlyMixin(
:host {
display: table-row;
position: relative;
+ outline-offset: -3px;
}
:host([selectable]) {
cursor: pointer;
}
+ :host(:focus) {
+ outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+ var(--uui-color-focus);
+ }
:host([selected]) {
outline: 2px solid
var(--uui-table-row-color-selected, var(--uui-color-selected));
- outline-offset: -3px;
}
-
- :host(:focus) {
+ :host([selected]:focus) {
outline-color: var(--uui-color-focus);
}
`,
];
+ constructor() {
+ super();
+
+ // hide outline if mouse-interaction:
+ let hadMouseDown = false;
+ this.addEventListener('blur', () => {
+ if (hadMouseDown === false) {
+ this.style.setProperty('--uui-show-focus-outline', '1');
+ }
+ hadMouseDown = false;
+ });
+ this.addEventListener('mousedown', () => {
+ this.style.setProperty('--uui-show-focus-outline', '0');
+ hadMouseDown = true;
+ });
+ this.addEventListener('mouseup', () => {
+ hadMouseDown = false;
+ });
+ }
+
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'row');
From 7dabc5cc61d9373f2369646ccbe2ebe39c22c1df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 28 Jun 2022 13:57:56 +0200
Subject: [PATCH 3/3] use new color system
---
packages/uui-css/lib/uui-text.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/uui-css/lib/uui-text.css b/packages/uui-css/lib/uui-text.css
index 5f567d47c..82e9e5b1f 100644
--- a/packages/uui-css/lib/uui-text.css
+++ b/packages/uui-css/lib/uui-text.css
@@ -104,10 +104,10 @@
.uui-text a:link,
.uui-text a:active {
- color: var(--uui-color-space-cadet);
+ color: var(--uui-color-interactive);
}
.uui-text a:hover {
- color: var(--uui-color-violet-blue);
+ color: var(--uui-color-interactive-emphasis);
}
.uui-text small {