From c9aa6cdebe02af637e435dbd237a3cebc74f3eea Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Wed, 14 May 2025 12:23:11 +0200 Subject: [PATCH 1/5] WEB-2189 feat(mistica-css): ErrorFeedbackScreen --- css/mistica-common.css | 161 +++++++++++++++++++++++++++++++ examples/css/error-feedback.html | 114 ++++++++++++++++++++++ examples/css/index.html | 4 + examples/css/package.json | 2 +- examples/css/vite.config.js | 17 ++++ 5 files changed, 297 insertions(+), 1 deletion(-) create mode 100644 examples/css/error-feedback.html create mode 100644 examples/css/vite.config.js diff --git a/css/mistica-common.css b/css/mistica-common.css index e9888645fd..d10adda84b 100644 --- a/css/mistica-common.css +++ b/css/mistica-common.css @@ -1267,3 +1267,164 @@ button.mistica-display-card:has(.mistica-card__media):active:after { .mistica-checkbox-label:has(.mistica-checkbox:disabled) > .mistica-checkbox { opacity: initial; /* avoid applying 0.5 opacity twice */ } + +/* FeedbackScreen */ + +/* +const shake = keyframes({ + '10%, 90%': { + transform: 'translate(3px, 0)', + }, + '20%, 80%': { + transform: 'translate(6px, 0)', + }, + + '30%, 50%, 70%': { + transform: 'translate(0px, 0)', + }, + + '40%, 60%': { + transform: 'translate(8px, 0)', + }, +}); + +export const outerAnimation = style({ + animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`, + animationDelay: '0.84s', +}); +export const innerAnimation = style({ + animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`, + animationDelay: '0.8s', +}); +*/ + +@keyframes mistica-animation-shake { + 10%, + 90% { + transform: translate(3px, 0); + } + 20%, + 80% { + transform: translate(6px, 0); + } + 30%, + 50%, + 70% { + transform: translate(0px, 0); + } + 40%, + 60% { + transform: translate(8px, 0); + } +} + +@keyframes mistica-animation-text-appear { + 0% { + opacity: 0; + transform: translateY(var(--text-appear-animation-distance)); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.mistica-feedback-screen { + --text-animation: mistica-animation-text-appear 1s both cubic-bezier(0.215, 0.61, 0.355, 1); + --text-appear-animation-distance: 16px; + padding: 64px 0 16px; +} + +@media (min-width: 1024px) { + .mistica-feedback-screen { + --text-appear-animation-distance: 40px; + margin-top: 64px; + border-radius: var(--mistica-border-radius-legacyDisplay); + border: var(--mistica-boxed-border); + background: var(--mistica-color-backgroundContainer); + padding: 64px; + } + + .mistica-feedback-screen > .mistica-fixed-footer-buttons { + margin-top: 40px; + } +} + +@media (max-width: 1023px) { + .mistica-feedback-screen { + padding-bottom: 142px; + } +} + +.mistica-feedback-screen__asset { + --mistica-animation-shake: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + width: 48px; + height: 48px; + margin-bottom: 24px; +} + +.mistica-feedback-screen__asset-error-inside { + animation: var(--mistica-animation-shake); + animation-delay: 0.8s; +} + +.mistica-feedback-screen__asset-error-outside { + animation: var(--mistica-animation-shake); + animation-delay: 0.84s; +} + +.mistica-feedback-screen__title { + font-size: var(--mistica-font-size-6); + line-height: var(--mistica-line-height-6); + font-weight: var(--mistica-font-weight-6); + color: var(--mistica-color-textPrimary); + animation: var(--text-animation); + animation-delay: 0.6s; +} + +.mistica-feedback-screen__description { + margin-top: 16px; + font-size: var(--mistica-font-size-3); + line-height: var(--mistica-line-height-3); + font-weight: 400; + color: var(--mistica-color-textSecondary); + animation: var(--text-animation); + animation-delay: 0.8s; +} + +.mistica-feedback-screen__slot { + margin-top: 16px; + animation: var(--text-animation); + color: var(--mistica-color-textSecondary); + animation-delay: 1s; +} + +.mistica-fixed-footer-buttons { + display: flex; + gap: 16px; +} + +@media (max-width: 1023px) { + .mistica-fixed-footer, + .mistica-fixed-footer-buttons { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--mistica-color-background); + box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1); + } + + .mistica-fixed-footer-buttons { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + } +} + +@media (max-width: 1023px) and (min-width: 768px) { + .mistica-fixed-footer-buttons { + padding: 32px 24px; + } +} diff --git a/examples/css/error-feedback.html b/examples/css/error-feedback.html new file mode 100644 index 0000000000..f52a7704ae --- /dev/null +++ b/examples/css/error-feedback.html @@ -0,0 +1,114 @@ + + + + + + + Mistica CSS Example + + + +
+
+ + + + + + + + + + + + + + + + + +

Title

+

Description

+

Error reference: #95001

+
+ Action + Link + +
+
+
+ + diff --git a/examples/css/index.html b/examples/css/index.html index 2a06a91398..0489f11d19 100644 --- a/examples/css/index.html +++ b/examples/css/index.html @@ -82,6 +82,10 @@

Tag

Warning
Error
+

FeedbackScreen

+
+ See ErrorFeedbackScreen +

Checkbox

Without label

diff --git a/examples/css/package.json b/examples/css/package.json index edaf7891a7..57b05956c2 100644 --- a/examples/css/package.json +++ b/examples/css/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build --base=\"/mistica-css/\"", + "build": "vite build", "preview": "vite preview" }, "devDependencies": { diff --git a/examples/css/vite.config.js b/examples/css/vite.config.js new file mode 100644 index 0000000000..018f0cc18d --- /dev/null +++ b/examples/css/vite.config.js @@ -0,0 +1,17 @@ +import {dirname, resolve} from 'node:path'; +import {fileURLToPath} from 'node:url'; +import {defineConfig} from 'vite'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +export default defineConfig({ + base: '/mistica-css/', + build: { + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html'), + 'error-feedback': resolve(__dirname, 'error-feedback.html'), + }, + }, + }, +}); From 5d3026b794b0295a9631f8f366a2e52163b3cc98 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Wed, 14 May 2025 13:06:13 +0200 Subject: [PATCH 2/5] fix link --- examples/css/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/css/index.html b/examples/css/index.html index 0489f11d19..a44fd7ff64 100644 --- a/examples/css/index.html +++ b/examples/css/index.html @@ -84,7 +84,9 @@

Tag

FeedbackScreen

- See ErrorFeedbackScreen + See ErrorFeedbackScreen

Checkbox

From 510a99aece000694723c9027ce806fea9de9f4b9 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Wed, 14 May 2025 14:01:18 +0200 Subject: [PATCH 3/5] clean up --- css/mistica-common.css | 50 ++++++++++-------------------------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/css/mistica-common.css b/css/mistica-common.css index d10adda84b..98832a22d2 100644 --- a/css/mistica-common.css +++ b/css/mistica-common.css @@ -1270,58 +1270,30 @@ button.mistica-display-card:has(.mistica-card__media):active:after { /* FeedbackScreen */ -/* -const shake = keyframes({ - '10%, 90%': { - transform: 'translate(3px, 0)', - }, - '20%, 80%': { - transform: 'translate(6px, 0)', - }, - - '30%, 50%, 70%': { - transform: 'translate(0px, 0)', - }, - - '40%, 60%': { - transform: 'translate(8px, 0)', - }, -}); - -export const outerAnimation = style({ - animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`, - animationDelay: '0.84s', -}); -export const innerAnimation = style({ - animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`, - animationDelay: '0.8s', -}); -*/ - @keyframes mistica-animation-shake { 10%, 90% { - transform: translate(3px, 0); + transform: translateX(3px); } 20%, 80% { - transform: translate(6px, 0); + transform: translateX(6px); } 30%, 50%, 70% { - transform: translate(0px, 0); + transform: translateX(0); } 40%, 60% { - transform: translate(8px, 0); + transform: translateX(8px); } } @keyframes mistica-animation-text-appear { 0% { opacity: 0; - transform: translateY(var(--text-appear-animation-distance)); + transform: translateY(var(--text-appear-distance)); } 100% { opacity: 1; @@ -1331,13 +1303,13 @@ export const innerAnimation = style({ .mistica-feedback-screen { --text-animation: mistica-animation-text-appear 1s both cubic-bezier(0.215, 0.61, 0.355, 1); - --text-appear-animation-distance: 16px; + --text-appear-distance: 16px; padding: 64px 0 16px; } @media (min-width: 1024px) { .mistica-feedback-screen { - --text-appear-animation-distance: 40px; + --text-appear-distance: 40px; margin-top: 64px; border-radius: var(--mistica-border-radius-legacyDisplay); border: var(--mistica-boxed-border); @@ -1357,19 +1329,19 @@ export const innerAnimation = style({ } .mistica-feedback-screen__asset { - --mistica-animation-shake: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + --asset-animation: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; width: 48px; height: 48px; margin-bottom: 24px; } .mistica-feedback-screen__asset-error-inside { - animation: var(--mistica-animation-shake); + animation: var(--asset-animation); animation-delay: 0.8s; } .mistica-feedback-screen__asset-error-outside { - animation: var(--mistica-animation-shake); + animation: var(--asset-animation); animation-delay: 0.84s; } @@ -1423,7 +1395,7 @@ export const innerAnimation = style({ } } -@media (max-width: 1023px) and (min-width: 768px) { +@media (min-width: 768px) and (max-width: 1023px) { .mistica-fixed-footer-buttons { padding: 32px 24px; } From fbf83aa5c3d3ca76b700739328de88eb6512cb80 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Wed, 14 May 2025 14:03:14 +0200 Subject: [PATCH 4/5] comment --- css/mistica-common.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/mistica-common.css b/css/mistica-common.css index 98832a22d2..bf0c02f95b 100644 --- a/css/mistica-common.css +++ b/css/mistica-common.css @@ -1324,6 +1324,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after { @media (max-width: 1023px) { .mistica-feedback-screen { + /* Space for fixed buttons */ padding-bottom: 142px; } } From 6ee674acc2ff425e6387a4ca5cd7252f620763fa Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Tue, 20 May 2025 15:05:54 +0200 Subject: [PATCH 5/5] use auto color scheme for error-feedback.html --- examples/css/error-feedback.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/css/error-feedback.html b/examples/css/error-feedback.html index f52a7704ae..566b808abb 100644 --- a/examples/css/error-feedback.html +++ b/examples/css/error-feedback.html @@ -7,7 +7,7 @@ Mistica CSS Example - +