Skip to content

feat(side-panel): add useSidePanelState hook, animation zhoosh #4230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 11, 2025
Merged

feat(side-panel): add useSidePanelState hook, animation zhoosh #4230

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5bf6cf4
chore(side-panel): add zhoosh
nkrantz Feb 5, 2025
b4ba31b
docs(side-panel): more examples
nkrantz Feb 5, 2025
a6e467a
chore: things i forgot
nkrantz Feb 5, 2025
c5ff4e5
chore: update state return and only use modal on mobile
nkrantz Feb 7, 2025
861c23f
chore: save some lines
nkrantz Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/paste-core/components/side-panel/src/SidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,16 @@ const config = {
interface SidePanelContentsProps extends SidePanelProps {
sidePanelId: string;
styles: any;
isMobile: boolean;
}

const getAs = (isMobile: boolean): any => {
if (isMobile) return ModalDialogPrimitiveContent as any;
return "div";
};

const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProps>(
({ label, element, sidePanelId, styles, children, ...props }, ref) => {
({ label, element, sidePanelId, styles, isMobile, children, ...props }, ref) => {
// Get the offset of the side panel from the top of the viewport
const sidePanelRef = React.useRef<HTMLDivElement>(null);
const mergedSidePanelRef = useMergeRefs(sidePanelRef, ref) as React.RefObject<HTMLDivElement>;
Expand All @@ -83,7 +89,7 @@ const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProp
{...safelySpreadBoxProps(props)}
position="absolute"
role="dialog"
as={ModalDialogPrimitiveContent as any}
as={getAs(isMobile)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: i feel like this would just be a ternary and save some lines

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, just pushed this

aria-label={label}
top={0}
right={0}
Expand Down Expand Up @@ -183,6 +189,7 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
sidePanelId={sidePanelId}
styles={styles}
label={label}
isMobile
ref={ref}
>
{children}
Expand All @@ -195,6 +202,7 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
sidePanelId={sidePanelId}
styles={styles}
label={label}
isMobile={false}
ref={ref}
>
{children}
Expand Down
8 changes: 2 additions & 6 deletions packages/paste-core/components/side-panel/src/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,8 @@ import type { SidePanelStateReturn, UseSidePanelStateProps } from "./types";
export const useSidePanelState = ({ open = false }: UseSidePanelStateProps = {}): SidePanelStateReturn => {
const [isOpen, setIsOpen] = React.useState(open);

const toggleSidePanel = (): void => {
setIsOpen(!isOpen);
};

return {
sidePanel: { isOpen, setIsOpen },
toggleSidePanel,
isOpen,
setIsOpen,
};
};
31 changes: 11 additions & 20 deletions packages/paste-core/components/side-panel/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,30 +177,21 @@ export interface SidePanelContextProps {
}

export interface SidePanelStateReturn {
sidePanel: {
/**
* State for the Side Panel. Determines whether the Side Panel is open or closed.
*
* @type {boolean}
* @default false
* @memberof SidePanelStateReturn
*/
isOpen: boolean;
/**
* Sets the state of the Side Panel between open and closed.
*
* @type {React.Dispatch<React.SetStateAction<boolean>>}
* @memberof SidePanelStateReturn
*/
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
/**
* Toggles the Side Panel between open and closed states. Apply to the `onClick` of the component that triggers the Side Panel.
* State for the Side Panel. Determines whether the Side Panel is open or closed.
*
* @type {() => void}
* @type {boolean}
* @default false
* @memberof SidePanelStateReturn
*/
isOpen: boolean;
/**
* Sets the state of the Side Panel between open and closed.
*
* @type {React.Dispatch<React.SetStateAction<boolean>>}
* @memberof SidePanelStateReturn
*/
toggleSidePanel: () => void;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

export interface UseSidePanelStateProps {
Expand Down
6 changes: 2 additions & 4 deletions packages/paste-core/components/side-panel/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,11 @@ Default.parameters = {
};

export const NoContent: StoryFn = () => {
const { sidePanel, toggleSidePanel } = useSidePanelState({ open: true });
const sidePanel = useSidePanelState({ open: true });
return (
<SidePanelContainer {...sidePanel}>
<SidePanelPushContentWrapper>
<SidePanelButton variant="primary" onClick={toggleSidePanel}>
open sesame
</SidePanelButton>
<SidePanelButton variant="primary">open sesame</SidePanelButton>
</SidePanelPushContentWrapper>
<SidePanel label="intelligent assistant chat">
<SidePanelHeader>header</SidePanelHeader>content
Expand Down
6 changes: 3 additions & 3 deletions packages/paste-website/src/pages/components/side-panel/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export const SidePanelExample = (): React.ReactNode => {

### Using the state hook

Side Panel comes with the option of using a hook to manage the open and close state of the panel. The `useSidePanelState` hook returns an object to spread onto SidePanelContainer and a function to pass to the `onClick` of SidePanelButton.
Side Panel comes with the option of using a hook to manage the open and close state of the panel. The `useSidePanelState` hook returns an object to spread onto SidePanelContainer. To change the default state of the Side Panel from closed to open, pass `open: true` to the hook.

<LivePreview
scope={{
Expand All @@ -257,11 +257,11 @@ Side Panel comes with the option of using a hook to manage the open and close st
height="300px"
>
{`const SidePanelExample = () => {
const { sidePanel, toggleSidePanel } = useSidePanelState({});
const sidePanel = useSidePanelState({});
return (
<SidePanelContainer {...sidePanel}>
<SidePanelPushContentWrapper>
<SidePanelButton variant="primary" onClick={toggleSidePanel}>
<SidePanelButton variant="primary">
Toggle Side Panel
</SidePanelButton>
</SidePanelPushContentWrapper>
Expand Down
Loading