From 2e3c427d68ed33516a53d41ba4644a98f08ca8e3 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Thu, 21 Apr 2022 13:11:50 +0200 Subject: [PATCH 1/5] fix: remove transform to maintain fixed positioning in child elements --- packages/components/src/utils/animate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts index 10b5e497f2..00ae8472c0 100644 --- a/packages/components/src/utils/animate.ts +++ b/packages/components/src/utils/animate.ts @@ -61,13 +61,13 @@ export const KEYFRAMES = { offset: 0, ...keyframeDefaults, opacity: 0, - transform: 'translateY(-3rem)', + top: '-3rem' }, { offset: 1, ...keyframeDefaults, opacity: 1, - transform: 'translateY(0)', + top: 0 }, ], }; From 2838e077d464a1629800c2b93203d96df24ad165 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Thu, 21 Apr 2022 13:30:27 +0200 Subject: [PATCH 2/5] fix: format --- packages/components/src/utils/animate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts index 00ae8472c0..08dae8425b 100644 --- a/packages/components/src/utils/animate.ts +++ b/packages/components/src/utils/animate.ts @@ -61,13 +61,13 @@ export const KEYFRAMES = { offset: 0, ...keyframeDefaults, opacity: 0, - top: '-3rem' + top: '-3rem', }, { offset: 1, ...keyframeDefaults, opacity: 1, - top: 0 + top: 0, }, ], }; From 5fd655c397b9f06139026bc116e5614f8f972759 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 22 Apr 2022 15:02:53 +0200 Subject: [PATCH 3/5] fix: add fix explanatory comment --- packages/components/src/utils/animate.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts index 08dae8425b..417b03a42a 100644 --- a/packages/components/src/utils/animate.ts +++ b/packages/components/src/utils/animate.ts @@ -61,6 +61,10 @@ export const KEYFRAMES = { offset: 0, ...keyframeDefaults, opacity: 0, + /** + * we are not using transform here to avoid breaking positioning for nested fixed elements (i.e. a flyout menu in an animated modal) + * see 'fixed' section @link https://developer.mozilla.org/en-US/docs/Web/CSS/position + */ top: '-3rem', }, { From d10165713461d1612139f0be4097459bf1d446a6 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 22 Apr 2022 15:21:17 +0200 Subject: [PATCH 4/5] fix: format, lint --- .../src/components/data-grid/data-grid.tsx | 5 ++--- .../src/components/date-picker/date-picker.tsx | 5 ++--- packages/components/src/components/input/input.tsx | 14 ++++++-------- packages/components/src/html/date-picker.html | 11 +++++------ .../components/src/html/telekom/header-custom.html | 6 +++--- packages/components/src/utils/animate.ts | 3 ++- 6 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index 2837df0b89..727f894a93 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -272,9 +272,8 @@ export class DataGrid { if (this.rows[i].length !== this.fields.length) { // tslint:disable-next-line: no-console console.warn( - `Unable to render ${ - this.heading && `"${this.heading}" ` - }table: row data length not equal to supplied fields.` + `Unable to render ${this.heading && + `"${this.heading}" `}table: row data length not equal to supplied fields.` ); return false; } diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx index 03b84629b3..6609767b24 100644 --- a/packages/components/src/components/date-picker/date-picker.tsx +++ b/packages/components/src/components/date-picker/date-picker.tsx @@ -337,9 +337,8 @@ export class DatePicker { '.duet-date__day.is-today span.duet-date__vhidden' ); if (today) { - today.innerHTML = `${today.innerHTML}, ${ - this.localization?.today || 'today' - }`; + today.innerHTML = `${today.innerHTML}, ${this.localization?.today || + 'today'}`; } this.adjustButtonsLabelsForA11y(); diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx index 37ee28da88..c748d5d36b 100644 --- a/packages/components/src/components/input/input.tsx +++ b/packages/components/src/components/input/input.tsx @@ -156,14 +156,12 @@ export class Input { tag: 'deprecated', source: this.el, type: 'warn', - extraMessage: `Please use <${ - { - select: 'scale-dropdown', - checkbox: 'scale-checkbox', - radio: 'scale-radio-button', - textarea: 'scale-textarea', - }[this.type] || 'scale-text-field' - }> instead.`, + extraMessage: `Please use <${{ + select: 'scale-dropdown', + checkbox: 'scale-checkbox', + radio: 'scale-radio-button', + textarea: 'scale-textarea', + }[this.type] || 'scale-text-field'}> instead.`, }); // Keep this.value up-to-date for type="select". // This is important also for React, where `value` is used to control the element state. diff --git a/packages/components/src/html/date-picker.html b/packages/components/src/html/date-picker.html index 3241306fff..9b0fb22e88 100644 --- a/packages/components/src/html/date-picker.html +++ b/packages/components/src/html/date-picker.html @@ -55,9 +55,8 @@ } }, format(date) { - return `${date.getDate()}.${ - date.getMonth() + 1 - }.${date.getFullYear()}`; + return `${date.getDate()}.${date.getMonth() + + 1}.${date.getFullYear()}`; }, }; @@ -124,14 +123,14 @@ }); // Listen for when date is selected - picker.addEventListener('scaleChange', function (e) { + picker.addEventListener('scaleChange', function(e) { console.log('scaleChange selected date', e.detail.valueAsDate); }); - picker.addEventListener('scaleFocus', function (e) { + picker.addEventListener('scaleFocus', function(e) { console.log('scaleFocus', e); }); - picker.addEventListener('scaleBlur', function (e) { + picker.addEventListener('scaleBlur', function(e) { console.log('scaleBlur', e); }); diff --git a/packages/components/src/html/telekom/header-custom.html b/packages/components/src/html/telekom/header-custom.html index 47a22d38bf..0720a9451e 100644 --- a/packages/components/src/html/telekom/header-custom.html +++ b/packages/components/src/html/telekom/header-custom.html @@ -522,15 +522,15 @@ }, ]; footer.claimLang = 'de'; - navMainWithMegaMenu.addEventListener('mouseenter', function () { + navMainWithMegaMenu.addEventListener('mouseenter', function() { navMainWithMegaMenu.isMegaMenuVisible = true; header.isMegaMenuVisible = true; }); - navMainWithMegaMenu.addEventListener('mouseleave', function () { + navMainWithMegaMenu.addEventListener('mouseleave', function() { navMainWithMegaMenu.isMegaMenuVisible = false; header.isMegaMenuVisible = false; }); - document.body.addEventListener('keydown', function (event) { + document.body.addEventListener('keydown', function(event) { if (['Escape', 'Esc'].includes(event.key)) { event.preventDefault(); header.dispatchEvent(new Event('closeMenu')); diff --git a/packages/components/src/utils/animate.ts b/packages/components/src/utils/animate.ts index 417b03a42a..76538464e7 100644 --- a/packages/components/src/utils/animate.ts +++ b/packages/components/src/utils/animate.ts @@ -64,7 +64,8 @@ export const KEYFRAMES = { /** * we are not using transform here to avoid breaking positioning for nested fixed elements (i.e. a flyout menu in an animated modal) * see 'fixed' section @link https://developer.mozilla.org/en-US/docs/Web/CSS/position - */ + */ + top: '-3rem', }, { From 5f844990fd809bd74cc940d1e4af31d4285a03c5 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Fri, 22 Apr 2022 15:34:27 +0200 Subject: [PATCH 5/5] fix: format --- .../src/components/data-grid/data-grid.tsx | 5 +++-- .../src/components/date-picker/date-picker.tsx | 5 +++-- packages/components/src/components/input/input.tsx | 14 ++++++++------ packages/components/src/html/date-picker.html | 11 ++++++----- .../components/src/html/telekom/header-custom.html | 6 +++--- 5 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index 727f894a93..2837df0b89 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -272,8 +272,9 @@ export class DataGrid { if (this.rows[i].length !== this.fields.length) { // tslint:disable-next-line: no-console console.warn( - `Unable to render ${this.heading && - `"${this.heading}" `}table: row data length not equal to supplied fields.` + `Unable to render ${ + this.heading && `"${this.heading}" ` + }table: row data length not equal to supplied fields.` ); return false; } diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx index 6609767b24..03b84629b3 100644 --- a/packages/components/src/components/date-picker/date-picker.tsx +++ b/packages/components/src/components/date-picker/date-picker.tsx @@ -337,8 +337,9 @@ export class DatePicker { '.duet-date__day.is-today span.duet-date__vhidden' ); if (today) { - today.innerHTML = `${today.innerHTML}, ${this.localization?.today || - 'today'}`; + today.innerHTML = `${today.innerHTML}, ${ + this.localization?.today || 'today' + }`; } this.adjustButtonsLabelsForA11y(); diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx index c748d5d36b..37ee28da88 100644 --- a/packages/components/src/components/input/input.tsx +++ b/packages/components/src/components/input/input.tsx @@ -156,12 +156,14 @@ export class Input { tag: 'deprecated', source: this.el, type: 'warn', - extraMessage: `Please use <${{ - select: 'scale-dropdown', - checkbox: 'scale-checkbox', - radio: 'scale-radio-button', - textarea: 'scale-textarea', - }[this.type] || 'scale-text-field'}> instead.`, + extraMessage: `Please use <${ + { + select: 'scale-dropdown', + checkbox: 'scale-checkbox', + radio: 'scale-radio-button', + textarea: 'scale-textarea', + }[this.type] || 'scale-text-field' + }> instead.`, }); // Keep this.value up-to-date for type="select". // This is important also for React, where `value` is used to control the element state. diff --git a/packages/components/src/html/date-picker.html b/packages/components/src/html/date-picker.html index 9b0fb22e88..3241306fff 100644 --- a/packages/components/src/html/date-picker.html +++ b/packages/components/src/html/date-picker.html @@ -55,8 +55,9 @@ } }, format(date) { - return `${date.getDate()}.${date.getMonth() + - 1}.${date.getFullYear()}`; + return `${date.getDate()}.${ + date.getMonth() + 1 + }.${date.getFullYear()}`; }, }; @@ -123,14 +124,14 @@ }); // Listen for when date is selected - picker.addEventListener('scaleChange', function(e) { + picker.addEventListener('scaleChange', function (e) { console.log('scaleChange selected date', e.detail.valueAsDate); }); - picker.addEventListener('scaleFocus', function(e) { + picker.addEventListener('scaleFocus', function (e) { console.log('scaleFocus', e); }); - picker.addEventListener('scaleBlur', function(e) { + picker.addEventListener('scaleBlur', function (e) { console.log('scaleBlur', e); }); diff --git a/packages/components/src/html/telekom/header-custom.html b/packages/components/src/html/telekom/header-custom.html index 0720a9451e..47a22d38bf 100644 --- a/packages/components/src/html/telekom/header-custom.html +++ b/packages/components/src/html/telekom/header-custom.html @@ -522,15 +522,15 @@ }, ]; footer.claimLang = 'de'; - navMainWithMegaMenu.addEventListener('mouseenter', function() { + navMainWithMegaMenu.addEventListener('mouseenter', function () { navMainWithMegaMenu.isMegaMenuVisible = true; header.isMegaMenuVisible = true; }); - navMainWithMegaMenu.addEventListener('mouseleave', function() { + navMainWithMegaMenu.addEventListener('mouseleave', function () { navMainWithMegaMenu.isMegaMenuVisible = false; header.isMegaMenuVisible = false; }); - document.body.addEventListener('keydown', function(event) { + document.body.addEventListener('keydown', function (event) { if (['Escape', 'Esc'].includes(event.key)) { event.preventDefault(); header.dispatchEvent(new Event('closeMenu'));