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

fix: adjust padding in badge to prevent icon offset #2136

Merged
merged 3 commits into from
Dec 16, 2024
Merged

fix: adjust padding in badge to prevent icon offset #2136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
64c2561
fix padding
noahwaldner Dec 12, 2024
31b6c39
adjust small size
noahwaldner Dec 12, 2024
036df4d
fix tests
noahwaldner Dec 16, 2024
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
5 changes: 5 additions & 0 deletions .changeset/ten-llamas-unite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@frontify/fondue": patch
---

fix: fix padding in badge component which cause the status to be offset
20 changes: 4 additions & 16 deletions packages/fondue/src/components/Badge/Badge.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ const BADGE_DISMISS = '[data-test-id=badge-dismiss]';
const BADGE_BUTTON = '[data-test-id=badge-button]';

const checkMediumSize = () => {
cy.get(BADGE_BUTTON).should('have.class', 'tw-px-2');
cy.get(BADGE_BUTTON).should('have.class', 'tw-px-2.5');
cy.get(BADGE_BUTTON).should('have.class', 'tw-h-6');
cy.get(BADGE_BUTTON).should('have.class', 'tw-gap-x-0.5');
cy.get(BADGE_BUTTON).should('have.class', 'tw-gap-x-1');
};

describe('Badge component', () => {
Expand Down Expand Up @@ -50,13 +50,13 @@ describe('Badge component', () => {
it('should render badge with icon with specific size', () => {
cy.mount(<Badge icon={<IconDocumentText size={IconSize.Size16} />}>{BADGE_TEXT}</Badge>);

cy.get(BADGE_ICON_ID).should('exist').and('have.css', 'width', '20px');
cy.get(BADGE_ICON_ID).should('exist').and('have.css', 'width', '16px');
});

it('should render with small size', () => {
cy.mount(<Badge size="small">{BADGE_TEXT}</Badge>);

cy.get(BADGE_BUTTON).should('have.class', 'tw-px-1.5');
cy.get(BADGE_BUTTON).should('have.class', 'tw-px-2');
cy.get(BADGE_BUTTON).should('have.class', 'tw-h-5');
});

Expand Down Expand Up @@ -247,16 +247,4 @@ describe('Badge component', () => {

cy.get(BADGE_BUTTON).invoke('attr', 'title').should('equal', `${BADGE_TEXT}_1_${BADGE_TEXT}_2_${BADGE_TEXT}`);
});

it('should have padding between icon and label', () => {
cy.mount(<Badge icon={<IconDocumentText />}>{BADGE_TEXT}</Badge>);

cy.get(BADGE_ICON_ID).should('have.css', 'padding-right', '4px');
});

it('should have no icon padding if there is no label', () => {
cy.mount(<Badge icon={<IconDocumentText />} />);

cy.get(BADGE_ICON_ID).should('have.css', 'padding-right', '0px');
});
});
8 changes: 2 additions & 6 deletions packages/fondue/src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,17 +73,13 @@ export const Badge = ({
{icon && (
<span
data-test-id={`${dataTestId}-icon`}
className={merge([
'tw-flex-none tw-leading-none',
disabled && 'tw-opacity-30',
!!children && 'tw-pr-1',
])}
className={merge(['tw-flex-none tw-leading-none', disabled && 'tw-opacity-30'])}
>
{cloneElement(icon, { size: IconSize.Size16 })}
</span>
)}
{children && (
<span className="tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate tw-px-0.5">
<span className="tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate">
{children}
</span>
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/fondue/src/components/Badge/BadgeStatusIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { badgeStatusClasses, isBadgeStatus } from './helpers';
import { type BadgeStatusIconProps } from './types';

export const BadgeStatusIcon = ({ status, disabled, 'data-test-id': dataTestId = 'badge' }: BadgeStatusIconProps) => (
<div className="tw-px-0.5 tw-flex-none tw-inline-flex tw-justify-center tw-items-center tw-pr-1">
<div className="tw-flex-none tw-inline-flex tw-justify-center tw-items-center ">
<span
data-test-id={`${dataTestId}-status`}
className={merge([
Expand Down
15 changes: 12 additions & 3 deletions packages/fondue/src/components/Badge/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,21 @@ export const getSizeClasses = (
isDismissable: boolean,
) => {
const isSmall = size === 'small';
const hasMaximumTwoComponents = !(children && status && icon);

if (isSmall) {
return merge(['tw-h-5 tw-px-1.5', isDismissable && 'tw-pr-5']);
return merge([
'tw-h-5 tw-px-2 tw-gap-x-1',
hasMaximumTwoComponents && 'tw-gap-x-1.5',
isDismissable && 'tw-pr-5',
]);
} else {
const hasMaximumTwoComponents = !(children && status && icon);
return merge(['tw-h-6', 'tw-px-2', hasMaximumTwoComponents && 'tw-gap-x-0.5', isDismissable && 'tw-pr-6']);
return merge([
'tw-h-6',
'tw-px-2.5 tw-gap-x-1',
hasMaximumTwoComponents && 'tw-gap-x-2',
isDismissable && 'tw-pr-6',
]);
}
};

Expand Down
Loading