From 99e476ef9f7d2336649e547cf95bd5d97f197551 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 20 Sep 2023 05:34:01 +0300 Subject: [PATCH 01/19] chore: alert-dialog --- .../src/stories/AlertDialogDemo.vue | 42 +++--- .../alert-dialog/src/stories/Chromatic.vue | 136 +++++++++--------- .../alert-dialog/src/stories/Controlled.vue | 14 +- .../alert-dialog/src/stories/Styled.vue | 14 +- 4 files changed, 103 insertions(+), 103 deletions(-) diff --git a/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue b/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue index 88a5041f0..d316b063e 100644 --- a/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue +++ b/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue @@ -29,11 +29,11 @@ withDefaults(defineProps(), { diff --git a/packages/components/popper/src/stories/Styled.vue b/packages/components/popper/src/stories/Styled.vue index 023236b70..85fac6a24 100644 --- a/packages/components/popper/src/stories/Styled.vue +++ b/packages/components/popper/src/stories/Styled.vue @@ -14,15 +14,15 @@ const open = ref(false) diff --git a/packages/components/toolbar/src/stories/ToolbarExample.vue b/packages/components/toolbar/src/stories/ToolbarExample.vue index 7538aa97d..f342b7bc7 100644 --- a/packages/components/toolbar/src/stories/ToolbarExample.vue +++ b/packages/components/toolbar/src/stories/ToolbarExample.vue @@ -24,46 +24,46 @@ const props = defineProps<{

{{ props.title }}

- + Button - + Button (disabled) - + Link - - + + Togglea - - - + + + Left - + Center - + Right - + @@ -66,7 +66,7 @@ exports[`OkuAlertDialog > Controlled > should be able to close 1`] = ` aria-controls="oku-21" aria-expanded="false" aria-haspopup="dialog" - class="triggerClass" + class="alert_dialog_triggerClass" data-state="closed" type="button" > @@ -138,7 +138,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = ` aria-controls="oku-18" aria-expanded="true" aria-haspopup="dialog" - class="triggerClass" + class="alert_dialog_triggerClass" data-state="open" type="button" > @@ -156,7 +156,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
@@ -167,7 +167,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
Controlled > should be able to open 1`] = ` >

Are you sure?

This will do a very dangerous thing. Thar be dragons!

+"
@@ -275,7 +275,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to close 1`] = ` aria-controls="oku-9" aria-expanded="false" aria-haspopup="dialog" - class="triggerClass" + class="alert_dialog_triggerClass" data-state="closed" type="button" > @@ -321,7 +321,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = ` aria-controls="oku-6" aria-expanded="true" aria-haspopup="dialog" - class="triggerClass" + class="alert_dialog_triggerClass" data-state="open" type="button" > @@ -339,7 +339,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
@@ -350,7 +350,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
StyledVue > should be able to open 1`] = ` >

Are you sure?

This will do a very dangerous thing. Thar be dragons!

"`; +exports[`OkuPopper > Animated > document.body has correct html 1`] = `"
open
"`; exports[`OkuPopper > Animated > renders correctly 1`] = ` "
-
open
+
open
" `; -exports[`OkuPopper > Animated > should be able to close 1`] = `"
open
"`; +exports[`OkuPopper > Animated > should be able to close 1`] = `"
open
"`; -exports[`OkuPopper > OneScroll > renders correctly 1`] = `"

In scrolling container

9
9
"`; +exports[`OkuPopper > OneScroll > renders correctly 1`] = `"

In scrolling container

9
9
"`; -exports[`OkuPopper > OneScroll > should be able to close 1`] = `"

In scrolling container

9
9
"`; +exports[`OkuPopper > OneScroll > should be able to close 1`] = `"

In scrolling container

9
9
"`; exports[`OkuPopper > StyledVue > renders correctly 1`] = ` "
-
open
+
open
-
+
" `; exports[`OkuPopper > StyledVue > should be able to close 1`] = ` "
-
open
+
open
" `; exports[`OkuPopper > Transition > renders correctly 1`] = ` -"
Open
+"
Open
" `; -exports[`OkuPopper > Transition > renders correctly 2`] = `"
Open
"`; +exports[`OkuPopper > Transition > renders correctly 2`] = `"
Open
"`; -exports[`OkuPopper > Transition > should be able to close 1`] = `"
Open
"`; +exports[`OkuPopper > Transition > should be able to close 1`] = `"
Open
"`; exports[`OkuPopper > WithCustomArrow > renders correctly 1`] = ` "
-
open
+
open
-
+
" `; exports[`OkuPopper > WithPortal > renders correctly 1`] = ` "
-
open
+
open
" diff --git a/packages/components/popper/tests/popper.test.ts b/packages/components/popper/tests/popper.test.ts index 73c4323bd..0a8e4ea01 100644 --- a/packages/components/popper/tests/popper.test.ts +++ b/packages/components/popper/tests/popper.test.ts @@ -60,7 +60,7 @@ describe('OkuPopper', () => { attachTo: document.body, }) - await wrapper.find('[class="anchorClass"]').trigger('click') + await wrapper.find('[class="popper_anchorClass"]').trigger('click') await nextTick() }) @@ -94,7 +94,7 @@ describe('OkuPopper', () => { attachTo: document.body, }) - await wrapper.find('[class="anchorClass"]').trigger('click') + await wrapper.find('[class="popper_anchorClass"]').trigger('click') await nextTick() }) @@ -128,7 +128,7 @@ describe('OkuPopper', () => { wrapper = mount(OneScroll, { attachTo: document.body, }) - await wrapper.find('[class="anchorClass small"]').trigger('click') + await wrapper.find('[class="popper_anchorClass small"]').trigger('click') }) /** @@ -157,7 +157,7 @@ describe('OkuPopper', () => { wrapper = mount(Transition, { attachTo: document.body, }) - await wrapper.find('[class="anchorClass"]').trigger('click') + await wrapper.find('[class="popper_anchorClass"]').trigger('click') await new Promise(resolve => setTimeout(resolve, 300)) await nextTick() @@ -194,7 +194,7 @@ describe('OkuPopper', () => { wrapper = mount(WithCustomArrow, { attachTo: document.body, }) - await wrapper.find('[class="anchorClass"]').trigger('click') + await wrapper.find('[class="popper_anchorClass"]').trigger('click') }) /** @@ -217,7 +217,7 @@ describe('OkuPopper', () => { attachTo: document.body, }) - await wrapper.find('[class="anchorClass"]').trigger('click') + await wrapper.find('[class="popper_anchorClass"]').trigger('click') }) /** diff --git a/packages/components/presence/tests/__snapshots__/presence.test.ts.snap b/packages/components/presence/tests/__snapshots__/presence.test.ts.snap index 3b88cf8b3..cb0d57e31 100644 --- a/packages/components/presence/tests/__snapshots__/presence.test.ts.snap +++ b/packages/components/presence/tests/__snapshots__/presence.test.ts.snap @@ -103,7 +103,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount click 1`] = Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMountAnimation > should be able to mount click 2`] = ` @@ -126,7 +126,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 1 Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 2`] = ` @@ -138,7 +138,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 2 Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 3`] = ` @@ -150,7 +150,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 3 Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleMountAnimations > renders correctly 1`] = ` @@ -173,7 +173,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount cli Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount click 2`] = ` @@ -196,7 +196,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount visibility 2`] = ` @@ -208,7 +208,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount visibility 3`] = ` @@ -220,7 +220,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > renders correctly 1`] = ` @@ -243,7 +243,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount click 2`] = ` @@ -266,7 +266,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount visibility 2`] = ` @@ -278,7 +278,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount visibility 3`] = ` @@ -290,7 +290,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithOpenAndCloseAnimation > renders correctly 1`] = ` @@ -313,7 +313,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount click Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount click 2`] = ` @@ -336,7 +336,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visibility 2`] = ` @@ -348,7 +348,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visibility 3`] = ` @@ -360,7 +360,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithUnmountAnimation > renders correctly 1`] = ` @@ -383,7 +383,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount click 1`] Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithUnmountAnimation > should be able to mount click 2`] = ` @@ -406,7 +406,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility 2`] = ` @@ -418,7 +418,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility 3`] = ` @@ -430,7 +430,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility Visibility (triggers cancel event) -
Content
" +
Content
" `; exports[`OkuPresence > renders correctly 1`] = `""`; diff --git a/packages/components/toast/src/stories/ToastDemo.vue b/packages/components/toast/src/stories/ToastDemo.vue index f354d1d24..19b3348e5 100644 --- a/packages/components/toast/src/stories/ToastDemo.vue +++ b/packages/components/toast/src/stories/ToastDemo.vue @@ -104,7 +104,7 @@ export interface IToastProps { margin: 0; } -.button { +/* .button { border: 1px solid black; border-radius: 4px; background: gainsboro; @@ -117,7 +117,7 @@ export interface IToastProps { background: royalblue; border-color: darkblue; color: white; -} +} */ .close { position: absolute; diff --git a/packages/components/toast/src/stories/toast.css b/packages/components/toast/src/stories/toast.css deleted file mode 100644 index 175eef0a4..000000000 --- a/packages/components/toast/src/stories/toast.css +++ /dev/null @@ -1,177 +0,0 @@ -.toast_viewport { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border: 1px solid; - display: flex; - flex-direction: column; - overflow: hidden; - padding: v-bind(VIEWPORT_PADDING); - gap: v-bind(VIEWPORT_PADDING); - list-style: none; -} - -.toast { - position: relative; - overflow: hidden; - list-style: none; - width: 230px; - border-radius: 4px; - border: 1px solid black; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - padding: 10px; - font-size: 12px; -} - -.header { - padding: 5px 10px; - margin: -10px -10px 10px; - background: black; - color: white; - position: relative; - height: 22px; - display: flex; - align-items: center; -} - -.title { - font-size: inherit; - font-weight: normal; -} - -.description { - margin: 0; -} - -.button { - border: 1px solid black; - border-radius: 4px; - background: gainsboro; - font-family: inherit; - padding: 2px 5px; -} - -.button:hover, -.button:focus { - background: royalblue; - border-color: darkblue; - color: white; -} - -.close { - position: absolute; - top: 50%; - right: 5px; - transform: translateY(-50%); - width: 18px; - height: 18px; - padding: 0; -} - -@keyframes toast_fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes toast_fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - -@keyframes toast_slideRight { - from { - transform: translateX(var(--oku-toast-swipe-end-x)); - } - - to { - transform: translateX(calc(100% + v-bind(VIEWPORT_PADDING))); - } -} - -@keyframes toast_slideLeft { - from { - transform: translateX(var(--oku-toast-swipe-end-x)); - } - - to { - transform: translateX(calc(-100% - v-bind(VIEWPORT_PADDING))); - } -} - -@keyframes toast_slideUp { - from { - transform: translateY(var(--oku-toast-swipe-end-y)); - } - - to { - transform: translateY(calc(-100% - v-bind(VIEWPORT_PADDING))); - } -} - -@keyframes toast_slideDown { - from { - transform: translateY(var(--oku-toast-swipe-end-y)); - } - - to { - transform: translateY(calc(100% + v-bind(VIEWPORT_PADDING))); - } -} - -.toast_errorToast { - display: flex; - align-items: center; - justify-content: space-between; -} - -[data-state="open"] { - animation: toast_fadeIn 200ms ease-out; -} - -[data-state="closed"] { - animation: toast_fadeOut 200ms ease-out; -} - -[data-swipe="move"] { - transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y)); -} - -[data-swipe="cancel"] { - transform: translate(0, 0); - transition: transform 200ms ease-out; -} - -[data-swipe="end"][data-swipe-direction="right"] { - animation-name: toast_slideRight; -} - -[data-swipe="end"][data-swipe-direction="left"] { - animation-name: toast_slideLeft; -} - -[data-swipe="end"][data-swipe-direction="up"] { - animation-name: toast_slideUp; -} - -[data-swipe="end"][data-swipe-direction="down"] { - animation-name: toast_slideDown; -} - -.toast_chromatic_toast_viewport { - display: inline-flex; - border: 5px solid royalblue; - flex-direction: column; - padding: v-bind(VIEWPORT_PADDING); - gap: v-bind(VIEWPORT_PADDING); -} From 415bf0174e65a6d35ee0c2c31185268a3a81e4d2 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 20 Sep 2023 06:36:31 +0300 Subject: [PATCH 18/19] chore: delete apply tailwindcss --- packages/components/presence/src/stories/Toggles.vue | 4 ++-- .../roving-focus/src/stories/RovingFocusDemo.vue | 4 ++-- packages/components/switch/src/stories/SwitchDemo.vue | 8 -------- packages/components/toolbar/src/stories/ToolbarDemo.vue | 2 -- .../components/tooltip/src/stories/CustomDurations.vue | 4 ---- 5 files changed, 4 insertions(+), 18 deletions(-) diff --git a/packages/components/presence/src/stories/Toggles.vue b/packages/components/presence/src/stories/Toggles.vue index 0c271afc5..bfdc365a3 100644 --- a/packages/components/presence/src/stories/Toggles.vue +++ b/packages/components/presence/src/stories/Toggles.vue @@ -37,7 +37,7 @@ function handleToggleVisibility() { diff --git a/packages/components/roving-focus/src/stories/RovingFocusDemo.vue b/packages/components/roving-focus/src/stories/RovingFocusDemo.vue index e26e42bed..bf013bcda 100644 --- a/packages/components/roving-focus/src/stories/RovingFocusDemo.vue +++ b/packages/components/roving-focus/src/stories/RovingFocusDemo.vue @@ -272,12 +272,12 @@ h1 { font-weight: bold; } -button { +/* button { border: 1px solid black; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 400; padding: 2px; -} +} */ diff --git a/packages/components/switch/src/stories/SwitchDemo.vue b/packages/components/switch/src/stories/SwitchDemo.vue index 7186aba41..b4beed5ba 100644 --- a/packages/components/switch/src/stories/SwitchDemo.vue +++ b/packages/components/switch/src/stories/SwitchDemo.vue @@ -153,14 +153,6 @@ function sendForm(event: any) { -webkit-transition: 0.4s; transition: background-color 166ms ease-out; - &:focus { - @apply outline-none shadow-sm; - } - - &[data-state="checked"] { - @apply bg-green-700 border-green-500; - } - &[data-disabled] { opacity: 0.5; } diff --git a/packages/components/toolbar/src/stories/ToolbarDemo.vue b/packages/components/toolbar/src/stories/ToolbarDemo.vue index 06e640a23..4adc28f7f 100644 --- a/packages/components/toolbar/src/stories/ToolbarDemo.vue +++ b/packages/components/toolbar/src/stories/ToolbarDemo.vue @@ -25,8 +25,6 @@ withDefaults(defineProps(), { From 6256c3a39ccb936925f5e01fd03332c38698cd62 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 20 Sep 2023 06:45:57 +0300 Subject: [PATCH 19/19] fix: toast css --- .../components/toast/src/stories/Animated.vue | 4 +- .../toast/src/stories/Chromatic.vue | 20 +++--- .../toast/src/stories/Controlled.vue | 2 +- .../components/toast/src/stories/Cypress.vue | 4 +- .../toast/src/stories/FromDialog.vue | 2 +- .../toast/src/stories/ToastDemo.vue | 72 ++++++++++--------- .../src/stories/ToastUpgradeAvailable.vue | 2 +- 7 files changed, 57 insertions(+), 49 deletions(-) diff --git a/packages/components/toast/src/stories/Animated.vue b/packages/components/toast/src/stories/Animated.vue index 1290a61c6..1851d0ea9 100644 --- a/packages/components/toast/src/stories/Animated.vue +++ b/packages/components/toast/src/stories/Animated.vue @@ -46,9 +46,9 @@ function handelAnimatedOpen() { Slide down - + Swipe me {{ swipeDirection }} - + Dismiss diff --git a/packages/components/toast/src/stories/Chromatic.vue b/packages/components/toast/src/stories/Chromatic.vue index 4ed851eff..e4bd20fbe 100644 --- a/packages/components/toast/src/stories/Chromatic.vue +++ b/packages/components/toast/src/stories/Chromatic.vue @@ -47,7 +47,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -63,7 +63,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -86,7 +86,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -107,7 +107,7 @@ const SNAPSHOT_DELAY = ref(300) Uncontrolled foreground closed - + Action @@ -130,7 +130,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -151,7 +151,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -173,7 +173,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -194,7 +194,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -216,7 +216,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action @@ -237,7 +237,7 @@ const SNAPSHOT_DELAY = ref(300) Description - + Action diff --git a/packages/components/toast/src/stories/Controlled.vue b/packages/components/toast/src/stories/Controlled.vue index 604588397..250b4ed01 100644 --- a/packages/components/toast/src/stories/Controlled.vue +++ b/packages/components/toast/src/stories/Controlled.vue @@ -42,7 +42,7 @@ watchEffect((onInvalidate) => { There was an error Try again diff --git a/packages/components/toast/src/stories/Cypress.vue b/packages/components/toast/src/stories/Cypress.vue index 3c10e91f2..a7a20428c 100644 --- a/packages/components/toast/src/stories/Cypress.vue +++ b/packages/components/toast/src/stories/Cypress.vue @@ -31,12 +31,12 @@ const count = ref(0) Toast {{ index + 1 }} description - + Toast button {{ index + 1 }}.1 Toast button {{ index + 1 }}.2 diff --git a/packages/components/toast/src/stories/FromDialog.vue b/packages/components/toast/src/stories/FromDialog.vue index 49fb66271..835dd7595 100644 --- a/packages/components/toast/src/stories/FromDialog.vue +++ b/packages/components/toast/src/stories/FromDialog.vue @@ -31,7 +31,7 @@ const open = ref(false) There was an error Try again diff --git a/packages/components/toast/src/stories/ToastDemo.vue b/packages/components/toast/src/stories/ToastDemo.vue index 19b3348e5..eaba16b6f 100644 --- a/packages/components/toast/src/stories/ToastDemo.vue +++ b/packages/components/toast/src/stories/ToastDemo.vue @@ -104,20 +104,21 @@ export interface IToastProps { margin: 0; } -/* .button { +.buttonClass { border: 1px solid black; border-radius: 4px; background: gainsboro; font-family: inherit; padding: 2px 5px; -} -.button:hover, -.button:focus { - background: royalblue; - border-color: darkblue; - color: white; -} */ + &:hover, + &:focus { + background: royalblue; + border-color: darkblue; + color: white; + } + +} .close { position: absolute; @@ -195,37 +196,44 @@ export interface IToastProps { justify-content: space-between; } -[data-state="open"] { - animation: toast_fadeIn 200ms ease-out; -} +.animatedRootClass { + &[data-state="open"] { + animation: toast_fadeIn 200ms ease-out; + } -[data-state="closed"] { - animation: toast_fadeOut 200ms ease-out; -} + &[data-state="closed"] { + animation: toast_fadeOut 200ms ease-out; + } -[data-swipe="move"] { - transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y)); -} + &[data-swipe="move"] { + transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y)); + } -[data-swipe="cancel"] { - transform: translate(0, 0); - transition: transform 200ms ease-out; -} + &[data-swipe="cancel"] { + transform: translate(0, 0); + transition: transform 200ms ease-out; + } -[data-swipe="end"][data-swipe-direction="right"] { - animation-name: toast_slideRight; -} + &[data-swipe="end"] { + animation-duration: 300ms; + animation-timing-function: ease-out; -[data-swipe="end"][data-swipe-direction="left"] { - animation-name: toast_slideLeft; -} + &[data-swipe-direction="right"] { + animation-name: toast_slideRight; + } -[data-swipe="end"][data-swipe-direction="up"] { - animation-name: toast_slideUp; -} + &[data-swipe-direction="left"] { + animation-name: toast_slideLeft; + } -[data-swipe="end"][data-swipe-direction="down"] { - animation-name: toast_slideDown; + &[data-swipe-direction="up"] { + animation-name: toast_slideUp; + } + + &[data-swipe-direction="down"] { + animation-name: toast_slideDown; + } + } } .toast_chromatic_toast_viewport { diff --git a/packages/components/toast/src/stories/ToastUpgradeAvailable.vue b/packages/components/toast/src/stories/ToastUpgradeAvailable.vue index 61380269a..742e4052a 100644 --- a/packages/components/toast/src/stories/ToastUpgradeAvailable.vue +++ b/packages/components/toast/src/stories/ToastUpgradeAvailable.vue @@ -19,7 +19,7 @@ defineProps({ We've just released Oku version 1.0 - + Upgrade