From d7a2dfd7bece6f9acc87e97b15c8654125b940cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sun, 15 Sep 2024 21:39:22 +0200 Subject: [PATCH 1/2] update style to match new icon style --- packages/uui-caret/lib/uui-caret.element.ts | 17 ++++--- .../lib/uui-symbol-expand.element.ts | 16 +++++-- .../lib/uui-symbol-sort.element.ts | 44 +++++++++++++------ packages/uui-table/lib/uui-table.story.ts | 1 + 4 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/uui-caret/lib/uui-caret.element.ts b/packages/uui-caret/lib/uui-caret.element.ts index f58c7c99c..15de128ce 100644 --- a/packages/uui-caret/lib/uui-caret.element.ts +++ b/packages/uui-caret/lib/uui-caret.element.ts @@ -25,8 +25,17 @@ export class UUICaretElement extends LitElement { } render() { - return html` - + return html` + `; } @@ -39,10 +48,8 @@ export class UUICaretElement extends LitElement { } svg { - fill: currentColor; transform-origin: 50% 50%; - transition: transform 280ms cubic-bezier(0.17, -0.88, 0.82, 1.84); /* Julia's beloved easing */ - } + transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1); :host([open]) svg { transform: rotate(180deg); diff --git a/packages/uui-symbol-expand/lib/uui-symbol-expand.element.ts b/packages/uui-symbol-expand/lib/uui-symbol-expand.element.ts index c4ac934d5..a51863791 100644 --- a/packages/uui-symbol-expand/lib/uui-symbol-expand.element.ts +++ b/packages/uui-symbol-expand/lib/uui-symbol-expand.element.ts @@ -18,8 +18,17 @@ export class UUISymbolExpandElement extends LitElement { public open = false; render() { - return html` - + return html` + `; } @@ -32,10 +41,9 @@ export class UUISymbolExpandElement extends LitElement { } svg { - fill: currentColor; transform: rotate(-90deg); transform-origin: 50% 50%; - transition: transform 120ms ease-in-out; + transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1); width: 100%; height: 100%; } diff --git a/packages/uui-symbol-sort/lib/uui-symbol-sort.element.ts b/packages/uui-symbol-sort/lib/uui-symbol-sort.element.ts index dad5c2d52..06290cdf6 100644 --- a/packages/uui-symbol-sort/lib/uui-symbol-sort.element.ts +++ b/packages/uui-symbol-sort/lib/uui-symbol-sort.element.ts @@ -19,14 +19,31 @@ export class UUISymbolSortElement extends ActiveMixin(LitElement) { public descending = false; render() { - return html` - + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round"> + - - + + `; } @@ -35,9 +52,9 @@ export class UUISymbolSortElement extends ActiveMixin(LitElement) { :host { position: relative; display: inline-block; - width: 0.8em; + width: 0.9em; height: 1em; - vertical-align: middle; + //vertical-align: middle; pointer-events: none; } @@ -45,29 +62,28 @@ export class UUISymbolSortElement extends ActiveMixin(LitElement) { position: absolute; left: 0; top: 50%; - width: 0.8em; - fill: currentColor; + width: 0.9em; transform-origin: 50% 50%; transition: transform 120ms ease-in-out, opacity 120ms, margin-top 240ms; opacity: 0; - margin-top: -0.5em; + margin-top: -8em; } #up { transform: rotate(180deg); - margin-top: -0.7em; + margin-top: -1.05em; } #down { - margin-top: -0.3em; + margin-top: -0.55em; } :host([active]) #up { - margin-top: calc(-0.5em - (0.2em * var(--uui-symbol-sort-hover, 0))); + margin-top: calc(-0.8em - (0.25em * var(--uui-symbol-sort-hover, 0))); } :host([active]) #down { - margin-top: calc(-0.5em + (0.2em * var(--uui-symbol-sort-hover, 0))); + margin-top: calc(-0.8em + (0.25em * var(--uui-symbol-sort-hover, 0))); } :host(:hover) { diff --git a/packages/uui-table/lib/uui-table.story.ts b/packages/uui-table/lib/uui-table.story.ts index 0dd7fcb68..568f452a3 100644 --- a/packages/uui-table/lib/uui-table.story.ts +++ b/packages/uui-table/lib/uui-table.story.ts @@ -1,6 +1,7 @@ import '.'; import './uui-table-advanced-example'; import '@umbraco-ui/uui-box/lib'; +import '@umbraco-ui/uui-symbol-sort/lib'; import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit'; From 403164228ee6b3055aa038e555b09e4b52802688 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 16 Sep 2024 08:05:11 +0200 Subject: [PATCH 2/2] remove width and height --- packages/uui-caret/lib/uui-caret.element.ts | 2 -- packages/uui-symbol-expand/lib/uui-symbol-expand.element.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/uui-caret/lib/uui-caret.element.ts b/packages/uui-caret/lib/uui-caret.element.ts index 15de128ce..aca8f8a6c 100644 --- a/packages/uui-caret/lib/uui-caret.element.ts +++ b/packages/uui-caret/lib/uui-caret.element.ts @@ -27,8 +27,6 @@ export class UUICaretElement extends LitElement { render() { return html`