Skip to content
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

Jump to bottom

UI: Fix IconButton not being aligned correctly in blocks #24529

Merged
merged 8 commits into from
Oct 20, 2023
Merged

UI: Fix IconButton not being aligned correctly in blocks #24529

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f11b035
Update Toolbar.tsx
cdedreuille Oct 20, 2023
3eaad3c
Fix listItem story + icon color
cdedreuille Oct 20, 2023
d9e82e7
Fix story on Tooltip Link List
cdedreuille Oct 20, 2023
ae331e9
Fix old links name in stories
cdedreuille Oct 20, 2023
8e37338
Update Toolbar.tsx
cdedreuille Oct 20, 2023
55cb7ae
Merge branch 'release-8-0' into charles-fix-icon-button-docs
cdedreuille Oct 20, 2023
7759cb8
Improved empty state
cdedreuille Oct 20, 2023
e39c617
Update Toolbar.tsx
cdedreuille Oct 20, 2023
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
77 changes: 39 additions & 38 deletions code/ui/blocks/src/components/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,41 +24,6 @@ interface LoadingProps {

export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps;

const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
<>
<IconButton
key="zoomin"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
zoom(0.8);
}}
title="Zoom in"
>
<ZoomIcon />
</IconButton>
<IconButton
key="zoomout"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
zoom(1.25);
}}
title="Zoom out"
>
<ZoomOutIcon />
</IconButton>
<IconButton
key="zoomreset"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
resetZoom();
}}
title="Reset zoom"
>
<ZoomResetIcon />
</IconButton>
</>
);

const Bar = styled(FlexBar)({
position: 'absolute',
left: 0,
Expand All @@ -67,6 +32,11 @@ const Bar = styled(FlexBar)({
transition: 'transform .2s linear',
});

const Wrapper = styled.div({
display: 'flex',
alignItems: 'center',
});

export const Toolbar: FC<ToolbarProps> = ({
isLoading,
storyId,
Expand All @@ -76,12 +46,43 @@ export const Toolbar: FC<ToolbarProps> = ({
...rest
}) => (
<Bar {...rest}>
<Fragment key="left">
<Wrapper key="left">
{isLoading ? (
[1, 2, 3].map((key) => <IconButtonSkeleton key={key} />)
) : (
<Zoom {...{ zoom, resetZoom }} />
<>
<IconButton
key="zoomin"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
zoom(0.8);
}}
title="Zoom in"
>
<ZoomIcon />
</IconButton>
<IconButton
key="zoomout"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
zoom(1.25);
}}
title="Zoom out"
>
<ZoomOutIcon />
</IconButton>
<IconButton
key="zoomreset"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
resetZoom();
}}
title="Reset zoom"
>
<ZoomResetIcon />
</IconButton>
</>
)}
</Fragment>
</Wrapper>
</Bar>
);