From 7f668e418f566bc54192432108defc881098d0b1 Mon Sep 17 00:00:00 2001 From: YounesChellaf Date: Tue, 22 Oct 2024 16:09:33 +0200 Subject: [PATCH 1/3] Fix Button/Modal/AppLayout css regarding build issues + add components export in lib.ts --- app/lib.ts | 3 +++ .../actions/Button/Button.module.scss | 10 +++++----- .../overlays/Modal/Modal.module.scss | 18 +++++++++--------- .../overlays/Toast/Toast.stories.tsx | 4 ++-- src/layouts/AppLayout/AppLayout.module.scss | 12 ++++++------ 5 files changed, 25 insertions(+), 22 deletions(-) diff --git a/app/lib.ts b/app/lib.ts index 689ac80..cf6c072 100644 --- a/app/lib.ts +++ b/app/lib.ts @@ -30,11 +30,14 @@ export { Spinner } from '../src/components/graphics/Spinner/Spinner.tsx'; export { PropertyList } from '../src/components/lists/PropertyList/PropertyList.tsx'; export { Tabs } from '../src/components/navigations/Tabs/Tabs.tsx'; +export { Tab } from '../src/components/navigations/Tabs/Tabs.tsx'; +export { Stepper } from '../src/components/navigations/Stepper/Stepper.tsx'; export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx'; export { Modal } from '../src/components/overlays/Modal/Modal.tsx'; export { type ToastContent, ToastContainer, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx'; export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx'; +export { TooltipProvider } from '../src/components/overlays/Tooltip/TooltipProvider.tsx'; // Layouts diff --git a/src/components/actions/Button/Button.module.scss b/src/components/actions/Button/Button.module.scss index cbf4803..ac91775 100644 --- a/src/components/actions/Button/Button.module.scss +++ b/src/components/actions/Button/Button.module.scss @@ -32,11 +32,6 @@ /* letter-spacing: 0.1ch; */ text-transform: uppercase; - @media (prefers-reduced-motion: no-preference) { - transition: none 150ms ease-in-out; - transition-property: border, background, color; - } - /* Tertiary (default) */ border-color: transparent; background-color: transparent; @@ -72,6 +67,11 @@ --bk-button-color-contrast: #{bk.$theme-button-primary-text-non-active}; cursor: not-allowed; } + + @media (prefers-reduced-motion: no-preference) { + transition: none 150ms ease-in-out; + transition-property: border, background, color; + } /* & > :global(.icon) { font-size: 1.2rem; } */ diff --git a/src/components/overlays/Modal/Modal.module.scss b/src/components/overlays/Modal/Modal.module.scss index 289fb43..7720d75 100644 --- a/src/components/overlays/Modal/Modal.module.scss +++ b/src/components/overlays/Modal/Modal.module.scss @@ -87,6 +87,15 @@ flex: 1; /* Make sure we cover all available space */ overflow: auto; } + + transition: + opacity 1ms ease-out, + scale 1ms ease-out, + overlay 1ms ease-out allow-discrete, + display 1ms ease-out allow-discrete; + opacity: 0; + scale: 0.98 0.98; + transition-duration: 200ms; /* Exit transition duration */ /* Variant: slide out */ --modal-slide-out-inset: var(--bk-sizing-3); @@ -129,15 +138,6 @@ /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs */ - opacity: 0; - scale: 0.98 0.98; - transition: - opacity 1ms ease-out, - scale 1ms ease-out, - overlay 1ms ease-out allow-discrete, - display 1ms ease-out allow-discrete; - transition-duration: 200ms; /* Exit transition duration */ - &:modal { display: flex; opacity: 1; diff --git a/src/components/overlays/Toast/Toast.stories.tsx b/src/components/overlays/Toast/Toast.stories.tsx index 4bc70ec..d99a375 100644 --- a/src/components/overlays/Toast/Toast.stories.tsx +++ b/src/components/overlays/Toast/Toast.stories.tsx @@ -12,11 +12,11 @@ import { Button } from '../../actions/Button/Button.tsx'; import { notify, CopyActionButton, ToastMessage, ToastContainer } from './Toast.tsx'; -type ToastArg = React.ComponentProps; +type ToastArg = React.ComponentProps; type Story = StoryObj; export default { - component: ToastMessage, + component: ToastContainer, parameters: { layout: 'centered', }, diff --git a/src/layouts/AppLayout/AppLayout.module.scss b/src/layouts/AppLayout/AppLayout.module.scss index 5573b69..d241508 100644 --- a/src/layouts/AppLayout/AppLayout.module.scss +++ b/src/layouts/AppLayout/AppLayout.module.scss @@ -19,12 +19,7 @@ --bk-app-layout-sidebar-width-open: 220px; --bk-app-layout-sidebar-width: var(--bk-app-layout-sidebar-width-open); - - //&:has([slot='sidebar']:hover) { --bk-app-layout-sidebar-width: 80px; } // TEST - @media (prefers-reduced-motion: no-preference) { - transition: grid 300ms; - } - + /* Note: do not use vw/vh, because we may want to show the layout in a container (e.g. story) */ min-width: 100cqw; min-height: 100cqh; @@ -106,5 +101,10 @@ 'footer' max-content / 1fr; } + + //&:has([slot='sidebar']:hover) { --bk-app-layout-sidebar-width: 80px; } // TEST + @media (prefers-reduced-motion: no-preference) { + transition: grid 300ms; + } } } From 11edabbbf7d7af4bee6faa624b8171fe06c6bdfd Mon Sep 17 00:00:00 2001 From: YounesChellaf Date: Tue, 29 Oct 2024 15:16:28 +0100 Subject: [PATCH 2/3] resolve conflicts --- .idea/.gitignore | 5 +++++ .idea/baklava.iml | 12 ++++++++++++ .idea/material_theme_project_new.xml | 12 ++++++++++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ src/styling/variables.scss | 2 +- 6 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/baklava.iml create mode 100644 .idea/material_theme_project_new.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/baklava.iml b/.idea/baklava.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/baklava.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml new file mode 100644 index 0000000..7b49ce2 --- /dev/null +++ b/.idea/material_theme_project_new.xml @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..f110fba --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/styling/variables.scss b/src/styling/variables.scss index b2e25a7..bde02ad 100644 --- a/src/styling/variables.scss +++ b/src/styling/variables.scss @@ -47,7 +47,7 @@ $color-blackberry-100: #777392 !default; $color-blackberry-200: #5f5a7c !default; $color-blackberry-300: #484266 !default; $color-blackberry-400: #332b50 !default; -$color-blackberry-500: #2d294b !default; +$color-blackberry-500: #39355c !default; $color-blackberry-600: #262645 !default; $color-blackberry-700: #202440 !default; $color-blackberry-800: #1a1c37 !default; From 20972891f905bfefc6e3ce39e6b60b0c619fbde2 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Tue, 29 Oct 2024 15:44:25 +0100 Subject: [PATCH 3/3] deduplicate imports from same file --- app/lib.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/lib.ts b/app/lib.ts index cf6c072..e596d33 100644 --- a/app/lib.ts +++ b/app/lib.ts @@ -29,8 +29,7 @@ export { Spinner } from '../src/components/graphics/Spinner/Spinner.tsx'; export { PropertyList } from '../src/components/lists/PropertyList/PropertyList.tsx'; -export { Tabs } from '../src/components/navigations/Tabs/Tabs.tsx'; -export { Tab } from '../src/components/navigations/Tabs/Tabs.tsx'; +export { Tab, Tabs } from '../src/components/navigations/Tabs/Tabs.tsx'; export { Stepper } from '../src/components/navigations/Stepper/Stepper.tsx'; export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx';