From 8c6fa88e75841f230688aa64c2a9011c41548b5f Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Tue, 16 Jan 2024 10:27:22 +1000 Subject: [PATCH 1/7] fixes #620 preview --- .../responsive-modal-button/index.ts | 2 ++ .../responsive-modal.component.tsx | 31 +++++++++++++++++++ .../responsive-modal.types.tsx | 3 ++ .../live-code/live-code.component.tsx | 22 ++++++++++++- .../modal-backdrop.component.tsx | 4 +-- .../modal-backdrop/modal-backdrop.styles.ts | 8 +++++ .../modal-backdrop/modal-backdrop.types.ts | 6 ++++ .../modal-dialog-body.styles.ts | 2 +- .../modal-dialog/modal-dialog.component.tsx | 4 +-- .../modal-dialog/modal-dialog.styles.ts | 5 ++- .../modal-dialog/modal-dialog.types.ts | 4 +++ .../src/components/modal/modal.component.tsx | 6 ++-- .../ui/src/components/modal/modal.stories.tsx | 6 ++-- .../ui/src/components/modal/modal.types.ts | 2 +- 14 files changed, 93 insertions(+), 12 deletions(-) create mode 100644 apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/index.ts create mode 100644 apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.component.tsx create mode 100644 apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.types.tsx diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/index.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/index.ts new file mode 100644 index 000000000..28725cb1d --- /dev/null +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/index.ts @@ -0,0 +1,2 @@ +export { ResponsiveModal } from './responsive-modal.component'; +export { type ResponsiveModalProps } from './responsive-modal.types'; diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.component.tsx new file mode 100644 index 000000000..2a8849673 --- /dev/null +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.component.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { Modal } from '@westpac/ui'; +import { DesktopIcon, GelIcon, PhoneIcon, TabletIcon } from '@westpac/ui/icon'; + +import { ResponsiveModalProps } from '.'; + +export function ResponsiveModal({ children, ...props }: ResponsiveModalProps) { + return ( + + +
+

Responsive Demo

+ +
+
+
+
+
+
+ + + + +
+
+
{children}
+ + + ); +} diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.types.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.types.tsx new file mode 100644 index 000000000..a7aea8ed4 --- /dev/null +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button/responsive-modal.types.tsx @@ -0,0 +1,3 @@ +import { ModalProps } from '@westpac/ui'; + +export type ResponsiveModalProps = ModalProps; diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx index 2b601e30b..2c9647d4f 100644 --- a/apps/site/src/components/code/components/live-code/live-code.component.tsx +++ b/apps/site/src/components/code/components/live-code/live-code.component.tsx @@ -1,10 +1,15 @@ -import { AlertIcon, ArrowRightIcon } from '@westpac/ui/icon'; +import { AlertIcon, ArrowRightIcon, NewWindowIcon } from '@westpac/ui/icon'; import copy from 'clipboard-copy'; import { themes } from 'prism-react-renderer'; import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react'; import { LiveContext, LiveEditor, LivePreview } from 'react-live'; +import { useOverlayTriggerState } from 'react-stately'; import { VariantProps } from 'tailwind-variants'; +import { ResponsiveModal } from '@/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button'; + +import { Button } from '../../code.inject-components'; + import { styles as liveCodeStyles } from './live-code.styles'; import { LiveCodeProps } from './live-code.types'; @@ -15,6 +20,7 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }: const liveOnChange = live.onChange; const [localCopy, setLocalCopy] = useState(live.code); const [isCodeVisible, toggleIsCodeVisible] = useState(showCode); + const responsiveModalState = useOverlayTriggerState({}); const styles = liveCodeStyles({ isCodeVisible, @@ -49,6 +55,17 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }: return (
+ {live.error ? (
@@ -89,6 +106,9 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }: />
)} + + +
); } diff --git a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx index 520c06ad0..6082184eb 100644 --- a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx +++ b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx @@ -4,11 +4,11 @@ import { Overlay, useModalOverlay } from 'react-aria'; import { styles as backdropStyles } from './modal-backdrop.styles.js'; import { type ModalBackdropProps } from './modal-backdrop.types.js'; -export function ModalBackdrop({ zIndex = 100, portalContainer, ...props }: ModalBackdropProps) { +export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }: ModalBackdropProps) { const { children, state, className } = props; const ref = useRef(null); - const styles = backdropStyles({ className }); + const styles = backdropStyles({ className, fullSize: size === 'full' }); const { modalProps, underlayProps } = useModalOverlay(props, state, ref); diff --git a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts index 375a950a8..c5db8a030 100644 --- a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts +++ b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts @@ -5,4 +5,12 @@ export const styles = tv({ base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2', modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown', }, + variants: { + fullSize: { + true: { + modal: 'top-0 flex flex-1 flex-col', + base: 'flex flex-col p-0', + }, + }, + }, }); diff --git a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts index f773f2d77..c70584362 100644 --- a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts +++ b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts @@ -1,6 +1,8 @@ import { type AriaModalOverlayProps } from 'react-aria'; import { type OverlayTriggerState } from 'react-stately'; +import { ModalDialogProps } from '../index.js'; + export type ModalBackdropProps = { /** * Inner part of backdrop @@ -14,6 +16,10 @@ export type ModalBackdropProps = { * Element where backdrop will be placed */ portalContainer?: Element; + /** + * size + */ + size?: ModalDialogProps['size']; /** * OverlayTriggerState props */ diff --git a/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts b/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts index 00e960e48..f50ce75b9 100644 --- a/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts +++ b/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts @@ -1,5 +1,5 @@ import { tv } from 'tailwind-variants'; export const styles = tv({ - base: 'px-4 py-3', + base: 'flex-1 px-4 py-3', }); diff --git a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.component.tsx b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.component.tsx index 730984d98..8a331ce33 100644 --- a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.component.tsx +++ b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.component.tsx @@ -11,14 +11,14 @@ import { type ModalDialogProps } from './modal-dialog.types.js'; export function ModalDialog({ className, body, onClose, size = 'md', ...props }: ModalDialogProps) { const { children } = props; const { isFocusVisible, focusProps } = useFocusRing(); - const styles = dialogStyles({ className, size, isFocusVisible }); + const styles = dialogStyles({ size, isFocusVisible }); const ref = useRef(null); const { dialogProps, titleProps } = useDialog(props, ref); return ( -
+
{onClose && ( + {showResponsiveDemo && ( + + )} {live.error ? (
diff --git a/apps/site/src/components/code/components/live-code/live-code.types.ts b/apps/site/src/components/code/components/live-code/live-code.types.ts index bc4932322..1254e14ad 100644 --- a/apps/site/src/components/code/components/live-code/live-code.types.ts +++ b/apps/site/src/components/code/components/live-code/live-code.types.ts @@ -1 +1,6 @@ -export type LiveCodeProps = { className?: string; enableLiveCode?: boolean; showCode?: boolean }; +export type LiveCodeProps = { + className?: string; + enableLiveCode?: boolean; + showCode?: boolean; + showResponsiveDemo?: boolean; +}; From 33c632a68e181af9a72361482bbed855c9debd5c Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Tue, 16 Jan 2024 11:00:53 +1000 Subject: [PATCH 4/7] fix --- apps/site/src/components/document-renderer/code/code.types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/components/document-renderer/code/code.types.ts b/apps/site/src/components/document-renderer/code/code.types.ts index 9dae31f1d..25c5fe6fc 100644 --- a/apps/site/src/components/document-renderer/code/code.types.ts +++ b/apps/site/src/components/document-renderer/code/code.types.ts @@ -4,4 +4,5 @@ export type CodeProps = { enableLiveCode?: boolean; language?: string; showCode?: boolean; + showResponsiveDemo?: boolean; }; From baa3ba1ee839fc2c39be6fca30d908f654b304be Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Tue, 16 Jan 2024 15:04:52 +1000 Subject: [PATCH 5/7] fixes #620 moda with scroll --- .../components/modal-dialog-body/modal-dialog-body.styles.ts | 2 +- .../modal/components/modal-dialog/modal-dialog.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts b/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts index f50ce75b9..571590d05 100644 --- a/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts +++ b/packages/ui/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts @@ -1,5 +1,5 @@ import { tv } from 'tailwind-variants'; export const styles = tv({ - base: 'flex-1 px-4 py-3', + base: 'flex-1 overflow-auto px-4 py-3', }); diff --git a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.styles.ts b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.styles.ts index 3350ad64e..8a9299d54 100644 --- a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.styles.ts +++ b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.styles.ts @@ -10,7 +10,7 @@ export const styles = tv( variants: { size: { full: { - base: 'w-full flex-1', + base: 'max-h-screen w-full flex-1', }, lg: { base: 'w-[56.25rem]', From 1c5af3788f82366ba7af3cec2fb11a5fc579e397 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Tue, 16 Jan 2024 15:18:22 +1000 Subject: [PATCH 6/7] fixes the name --- .../components/modal-backdrop/modal-backdrop.component.tsx | 2 +- .../modal/components/modal-backdrop/modal-backdrop.styles.ts | 2 +- .../modal/components/modal-dialog/modal-dialog.types.ts | 4 ++-- packages/ui/src/components/modal/modal.component.tsx | 4 ++-- packages/ui/src/components/modal/modal.types.ts | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx index 6082184eb..2a7b1becd 100644 --- a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx +++ b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx @@ -8,7 +8,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }: const { children, state, className } = props; const ref = useRef(null); - const styles = backdropStyles({ className, fullSize: size === 'full' }); + const styles = backdropStyles({ className, fullscreen: size === 'full' }); const { modalProps, underlayProps } = useModalOverlay(props, state, ref); diff --git a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts index c5db8a030..61d12de43 100644 --- a/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts +++ b/packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts @@ -6,7 +6,7 @@ export const styles = tv({ modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown', }, variants: { - fullSize: { + fullscreen: { true: { modal: 'top-0 flex flex-1 flex-col', base: 'flex flex-col p-0', diff --git a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.types.ts b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.types.ts index 85ce285d5..476072398 100644 --- a/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.types.ts +++ b/packages/ui/src/components/modal/components/modal-dialog/modal-dialog.types.ts @@ -19,9 +19,9 @@ export type ModalDialogProps = { */ className?: string; /** - * Full size + * Full screen */ - fullSize?: boolean; + fullscreen?: boolean; /** * onClose callback */ diff --git a/packages/ui/src/components/modal/modal.component.tsx b/packages/ui/src/components/modal/modal.component.tsx index d926077ef..45262b930 100644 --- a/packages/ui/src/components/modal/modal.component.tsx +++ b/packages/ui/src/components/modal/modal.component.tsx @@ -5,11 +5,11 @@ import React from 'react'; import { ModalBackdrop, ModalDialog } from './components/index.js'; import { type ModalProps } from './modal.types.js'; -export function Modal({ children, title, role, body, size, className, fullSize, ...props }: ModalProps) { +export function Modal({ children, title, role, body, size, className, fullscreen, ...props }: ModalProps) { return ( Date: Wed, 17 Jan 2024 09:50:30 +1000 Subject: [PATCH 7/7] adding padding-top to have space --- .../code/components/live-code/live-code.component.tsx | 3 ++- .../code/components/live-code/live-code.styles.ts | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx index 5e347ac27..f26c6b69d 100644 --- a/apps/site/src/components/code/components/live-code/live-code.component.tsx +++ b/apps/site/src/components/code/components/live-code/live-code.component.tsx @@ -28,6 +28,7 @@ export function LiveCode({ const responsiveModalState = useOverlayTriggerState({}); const styles = liveCodeStyles({ + showResponsiveDemo, isCodeVisible, language: live.language as VariantProps['language'], }); @@ -62,7 +63,7 @@ export function LiveCode({
{showResponsiveDemo && (