Skip to content

Commit

Permalink
move deprecated argTypes.defaultValue to args (Tooltip & Popover) (#6387
Browse files Browse the repository at this point in the history 
)

Co-authored-by: Yihui Liao <[email protected]>
  • Loading branch information
@sookmax @yihuiliao
sookmax and yihuiliao authored May 16, 2024
1 parent d7f78e8 commit b294de8
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 23 deletions.
28 changes: 15 additions & 13 deletions packages/react-aria-components/stories/Popover.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,80 +43,82 @@ export const PopoverExample = () => (
Submit
</Button>
</form>
)}
)}
</Dialog>
</Popover>
</DialogTrigger>
);
);

export const PopoverArrowBoundaryOffsetExample = {
args: {
topLeft: 25,
topRight: 25,
leftTop: 15,
leftBottom: 15,
rightTop: 15,
rightBottom: 15,
bottomLeft: 25,
bottomRight: 25
},
argTypes: {
topLeft: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
topRight: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
leftTop: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
leftBotton: {
defaultValue: 15,
leftBottom: {
control: {
type: 'range',
min: -100,
max: 100
}
},
rightTop: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
rightBottom: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
bottomLeft: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
bottomRight: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
}
},
render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{display: 'flex'}}>
Expand Down Expand Up @@ -206,7 +208,7 @@ export const PopoverArrowBoundaryOffsetExample = {
<Popover
placement="left bottom"
shouldFlip={false}
arrowBoundaryOffset={leftBotton}
arrowBoundaryOffset={leftBottom}
style={{
background: 'Canvas',
color: 'CanvasText',
Expand Down
22 changes: 12 additions & 10 deletions packages/react-aria-components/stories/Tooltip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,73 +40,75 @@ export const TooltipExample = () => (
);

export const TooltipArrowBoundaryOffsetExample = {
args: {
topLeft: 25,
topRight: 25,
leftTop: 15,
leftBottom: 15,
rightTop: 15,
rightBottom: 15,
bottomLeft: 25,
bottomRight: 25
},
argTypes: {
topLeft: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
topRight: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
leftTop: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
leftBotton: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
rightTop: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
rightBottom: {
defaultValue: 15,
control: {
type: 'range',
min: -100,
max: 100
}
},
bottomLeft: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
},
bottomRight: {
defaultValue: 25,
control: {
type: 'range',
min: -100,
max: 100
}
}
},
render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{display: 'flex'}}>
Expand Down Expand Up @@ -191,7 +193,7 @@ export const TooltipArrowBoundaryOffsetExample = {
placement="left bottom"
shouldFlip={false}
offset={7}
arrowBoundaryOffset={leftBotton}
arrowBoundaryOffset={leftBottom}
style={{
background: 'Canvas',
color: 'CanvasText',
Expand Down

1 comment on commit b294de8

@rspbot
Copy link

@rspbot rspbot commented on b294de8 May 16, 2024

Choose a reason for hiding this comment

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

Verdaccio builds:
CRA Test App
NextJS Test App
RAC Tailwind Example
RAC Spectrum + Tailwind Example
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs
Storybook

Please sign in to comment.