mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-13 14:44:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: fixes sizing problems of icon buttons

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-08 20:20:24 +01:00
parent e0a80cf06a
commit 160f0f8297
3 changed files with 24 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap
View file

@ -3,17 +3,17 @@
exports[`IconButton correctly uses the onClick callback 1`] = ` exports[`IconButton correctly uses the onClick callback 1`] = `
<div> <div>
<button <button
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary" class="btn-icon d-inline-flex align-items-stretch btn btn-primary"
data-testid="icon-button" data-testid="icon-button"
type="button" type="button"
> >
<span <span
class="icon-part d-flex align-items-center" class="icon-part"
> >
BootstrapIconMock_Heart BootstrapIconMock_Heart
</span> </span>
<span <span
class="text-part d-flex align-items-center" class="text-part"
> >
test with onClick test with onClick
</span> </span>
@ -24,17 +24,17 @@ exports[`IconButton correctly uses the onClick callback 1`] = `
exports[`IconButton renders heart icon 1`] = ` exports[`IconButton renders heart icon 1`] = `
<div> <div>
<button <button
class="btn-icon p-0 d-inline-flex align-items-stretch btn btn-primary" class="btn-icon d-inline-flex align-items-stretch btn btn-primary"
data-testid="icon-button" data-testid="icon-button"
type="button" type="button"
> >
<span <span
class="icon-part d-flex align-items-center" class="icon-part"
> >
BootstrapIconMock_Heart BootstrapIconMock_Heart
</span> </span>
<span <span
class="text-part d-flex align-items-center" class="text-part"
> >
test test
</span> </span>
@ -45,17 +45,17 @@ exports[`IconButton renders heart icon 1`] = `
exports[`IconButton renders with additional className 1`] = ` exports[`IconButton renders with additional className 1`] = `
<div> <div>
<button <button
class="btn-icon p-0 d-inline-flex align-items-stretch testClass btn btn-primary" class="btn-icon d-inline-flex align-items-stretch testClass btn btn-primary"
data-testid="icon-button" data-testid="icon-button"
type="button" type="button"
> >
<span <span
class="icon-part d-flex align-items-center" class="icon-part"
> >
BootstrapIconMock_Heart BootstrapIconMock_Heart
</span> </span>
<span <span
class="text-part d-flex align-items-center" class="text-part"
> >
test with additional className test with additional className
</span> </span>
@ -66,17 +66,17 @@ exports[`IconButton renders with additional className 1`] = `
exports[`IconButton renders with border 1`] = ` exports[`IconButton renders with border 1`] = `
<div> <div>
<button <button
class="btn-icon p-0 d-inline-flex align-items-stretch with-border btn btn-primary" class="btn-icon d-inline-flex align-items-stretch with-border btn btn-primary"
data-testid="icon-button" data-testid="icon-button"
type="button" type="button"
> >
<span <span
class="icon-part d-flex align-items-center" class="icon-part"
> >
BootstrapIconMock_Heart BootstrapIconMock_Heart
</span> </span>
<span <span
class="text-part d-flex align-items-center" class="text-part"
> >
test with border test with border
</span> </span>

19
frontend/src/components/common/icon-button/icon-button.module.scss
View file

@ -7,26 +7,23 @@
.btn-icon { .btn-icon {
&.with-border { &.with-border {
.icon-part {
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.text-part { .text-part {
padding: 0.375rem 0.75rem; border-left: 1px solid rgba(0, 0, 0, 0.2);
padding-left: var(--bs-btn-padding-x);
} }
} }
gap: var(--bs-btn-padding-x);
.icon-part { .icon-part {
padding: 0.375rem 0.375rem;
display: flex; display: flex;
align-items: center;
.social-icon { justify-content: center;
font-size: 1.5em;
}
} }
.text-part { .text-part {
padding: 0.375rem 0.75rem 0.375rem 0; display: flex;
align-items: center;
} }
} }

6
frontend/src/components/common/icon-button/icon-button.tsx
View file

@ -42,15 +42,15 @@ export const IconButton: React.FC<IconButtonProps> = ({
return ( return (
<Button <Button
{...props} {...props}
className={`${styles['btn-icon']} p-0 d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${ className={`${styles['btn-icon']} d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
className ?? '' className ?? ''
}`} }`}
{...testId('icon-button')}> {...testId('icon-button')}>
<span className={`${styles['icon-part']} d-flex align-items-center`}> <span className={`${styles['icon-part']}`}>
<UiIcon size={iconSize} icon={icon} className={'icon'} /> <UiIcon size={iconSize} icon={icon} className={'icon'} />
</span> </span>
<ShowIf condition={!!children}> <ShowIf condition={!!children}>
<span className={`${styles['text-part']} d-flex align-items-center`}>{children}</span> <span className={`${styles['text-part']}`}>{children}</span>
</ShowIf> </ShowIf>
</Button> </Button>
) )