github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-29 00:04:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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`] = `
<div>
<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"
type="button"
>
<span
class="icon-part d-flex align-items-center"
class="icon-part"
>
BootstrapIconMock_Heart
</span>
<span
class="text-part d-flex align-items-center"
class="text-part"
>
test with onClick
</span>
@ -24,17 +24,17 @@ exports[`IconButton correctly uses the onClick callback 1`] = `
exports[`IconButton renders heart icon 1`] = `
<div>
<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"
type="button"
>
<span
class="icon-part d-flex align-items-center"
class="icon-part"
>
BootstrapIconMock_Heart
</span>
<span
class="text-part d-flex align-items-center"
class="text-part"
>
test
</span>
@ -45,17 +45,17 @@ exports[`IconButton renders heart icon 1`] = `
exports[`IconButton renders with additional className 1`] = `
<div>
<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"
type="button"
>
<span
class="icon-part d-flex align-items-center"
class="icon-part"
>
BootstrapIconMock_Heart
</span>
<span
class="text-part d-flex align-items-center"
class="text-part"
>
test with additional className
</span>
@ -66,17 +66,17 @@ exports[`IconButton renders with additional className 1`] = `
exports[`IconButton renders with border 1`] = `
<div>
<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"
type="button"
>
<span
class="icon-part d-flex align-items-center"
class="icon-part"
>
BootstrapIconMock_Heart
</span>
<span
class="text-part d-flex align-items-center"
class="text-part"
>
test with border
</span>

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

@ -7,26 +7,23 @@
.btn-icon {
&.with-border {
.icon-part {
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.text-part {
padding: 0.375rem 0.75rem;
border-left: 1px solid rgba(0, 0, 0, 0.2);
padding-left: var(--bs-btn-padding-x);
}
}
.icon-part {
padding: 0.375rem 0.375rem;
display: flex;
gap: var(--bs-btn-padding-x);
.social-icon {
font-size: 1.5em;
}
.icon-part {
display: flex;
align-items: center;
justify-content: center;
}
.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 (
<Button
{...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 ?? ''
}`}
{...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'} />
</span>
<ShowIf condition={!!children}>
<span className={`${styles['text-part']} d-flex align-items-center`}>{children}</span>
<span className={`${styles['text-part']}`}>{children}</span>
</ShowIf>
</Button>
)