Skip to content

fix(bulma-ui): apply textColor helper class on Navbar Menu, Start, End, and Burger #792

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

Merged
allxsmith merged 4 commits into from
Sep 27, 2026
Merged

fix(bulma-ui): apply textColor helper class on Navbar Menu, Start, End, and Burger #792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9366097
fix(bulma-ui): apply textColor helper class on Navbar Menu, Start, En…
bestaxbot Sep 27, 2026
e685b42
fix(bulma-ui): let textColor win over color on Navbar Brand, Burger, …
bestaxbot Sep 27, 2026
a93efe4
fix(bulma-ui): describe Navbar parts' color alias without claiming bg…
bestaxbot Sep 27, 2026
ddf7f68
fix(bulma-ui): keep Navbar's color parts out of the text-alias lint set
bestaxbot Sep 27, 2026
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
10 changes: 5 additions & 5 deletions bestax-mcp/data/components/Navbar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
"name": "color",
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
"default": null,
"description": "Bulma color modifier for the brand.",
"description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-brand.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
"required": false,
"inherited": false,
"deprecated": false
Expand Down Expand Up @@ -394,7 +394,7 @@
"name": "color",
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
"default": null,
"description": "Bulma color modifier for the burger.",
"description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-burger.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
"required": false,
"inherited": false,
"deprecated": false
Expand Down Expand Up @@ -487,7 +487,7 @@
"name": "color",
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
"default": null,
"description": "Bulma color modifier for the menu.",
"description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-menu.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
"required": false,
"inherited": false,
"deprecated": false
Expand Down Expand Up @@ -543,7 +543,7 @@
"name": "color",
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
"default": null,
"description": "Bulma color modifier.",
"description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
"required": false,
"inherited": false,
"deprecated": false
Expand Down Expand Up @@ -590,7 +590,7 @@
"name": "color",
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
"default": null,
"description": "Bulma color modifier.",
"description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
"required": false,
"inherited": false,
"deprecated": false
Expand Down
46 changes: 40 additions & 6 deletions bulma-ui/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,12 @@ export interface NavbarBrandProps
className?: string;
/** Text color for the brand. */
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
/** Bulma color modifier for the brand. */
/**
* Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
* `.navbar-brand.is-<color>` rule, so this is not a filled variant.
* `textColor` takes precedence when both are set, and is the one that
* reaches the full color list.
*/
color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
/** Brand content. */
children?: React.ReactNode;
Expand All @@ -142,10 +147,11 @@ export const NavbarBrand: React.FC<NavbarBrandProps> = ({
className,
children,
textColor,
color,
...props
}) => {
const { bulmaHelperClasses, rest } = useBulmaClasses({
color: textColor,
color: textColor ?? color,
...props,
});

Expand Down Expand Up @@ -276,7 +282,12 @@ export interface NavbarBurgerProps
className?: string;
/** Text color for the burger. */
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
/** Bulma color modifier for the burger. */
/**
* Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
* `.navbar-burger.is-<color>` rule, so this is not a filled variant.
* `textColor` takes precedence when both are set, and is the one that
* reaches the full color list.
*/
color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
/** Whether the burger is active. */
active?: boolean;
Expand All @@ -303,8 +314,12 @@ export interface NavbarBurgerProps
* @returns {JSX.Element} The rendered burger.
*/
export const NavbarBurger = forwardRef<HTMLButtonElement, NavbarBurgerProps>(
function NavbarBurger({ className, active, children, ...props }, ref) {
function NavbarBurger(
{ className, active, textColor, color, children, ...props },
ref
) {
const { bulmaHelperClasses, rest } = useBulmaClasses({
color: textColor ?? color,
...props,
});

Expand Down Expand Up @@ -349,7 +364,12 @@ export interface NavbarMenuProps
className?: string;
/** Text color for the menu. */
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
/** Bulma color modifier for the menu. */
/**
* Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
* `.navbar-menu.is-<color>` rule, so this is not a filled variant.
* `textColor` takes precedence when both are set, and is the one that
* reaches the full color list.
*/
color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
/** Whether the menu is active. */
active?: boolean;
Expand All @@ -367,10 +387,13 @@ export interface NavbarMenuProps
export const NavbarMenu: React.FC<NavbarMenuProps> = ({
className,
active,
textColor,
color,
children,
...props
}) => {
const { bulmaHelperClasses, rest } = useBulmaClasses({
color: textColor ?? color,
...props,
});
Comment thread
claude[bot] marked this conversation as resolved.

Expand Down Expand Up @@ -401,7 +424,12 @@ export interface NavbarStartEndProps
className?: string;
/** Text color. */
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
/** Bulma color modifier. */
/**
* Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
* `is-<color>` rule for this area, so this is not a filled variant.
* `textColor` takes precedence when both are set, and is the one that
* reaches the full color list.
*/
color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
/** Content. */
children?: React.ReactNode;
Expand All @@ -416,10 +444,13 @@ export interface NavbarStartEndProps
*/
export const NavbarStart: React.FC<NavbarStartEndProps> = ({
className,
textColor,
color,
children,
...props
}) => {
const { bulmaHelperClasses, rest } = useBulmaClasses({
color: textColor ?? color,
...props,
});
return (
Expand All @@ -445,10 +476,13 @@ export const NavbarStart: React.FC<NavbarStartEndProps> = ({
*/
export const NavbarEnd: React.FC<NavbarStartEndProps> = ({
className,
textColor,
color,
children,
...props
}) => {
const { bulmaHelperClasses, rest } = useBulmaClasses({
color: textColor ?? color,
...props,
});
return (
Expand Down
142 changes: 142 additions & 0 deletions bulma-ui/src/components/__tests__/Navbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,36 @@ describe('Navbar.Brand', () => {
);
expect(screen.getByTestId('brand')).toHaveClass('custom-brand');
});

it('applies textColor as a helper class and not as a DOM attribute', () => {
render(
<Navbar.Brand textColor="primary" data-testid="brand">
Brand
</Navbar.Brand>
);
const brand = screen.getByTestId('brand');
expect(brand).toHaveClass('has-text-primary');
expect(brand).not.toHaveAttribute('textColor');
});

it('renders color as a text color, with textColor taking precedence', () => {
const { rerender } = render(
<Navbar.Brand color="info" data-testid="brand">
Brand
</Navbar.Brand>
);
expect(screen.getByTestId('brand')).toHaveClass('has-text-info');

rerender(
<Navbar.Brand color="info" textColor="grey" data-testid="brand">
Brand
</Navbar.Brand>
);
const brand = screen.getByTestId('brand');
expect(brand).toHaveClass('has-text-grey');
expect(brand).not.toHaveClass('has-text-info');
expect(brand).not.toHaveAttribute('color');
});
});

describe('Navbar.Item', () => {
Expand Down Expand Up @@ -326,6 +356,28 @@ describe('Navbar.Burger', () => {
render(<Navbar.Burger ref={ref} />);
expect(ref.current).toBeInstanceOf(HTMLButtonElement);
});

it('applies textColor as a helper class and not as a DOM attribute', () => {
render(<Navbar.Burger textColor="primary" data-testid="burger" />);
const burger = screen.getByTestId('burger');
expect(burger).toHaveClass('has-text-primary');
expect(burger).not.toHaveAttribute('textColor');
});

it('renders color as a text color, with textColor taking precedence', () => {
const { rerender } = render(
<Navbar.Burger color="info" data-testid="burger" />
);
expect(screen.getByTestId('burger')).toHaveClass('has-text-info');

rerender(
<Navbar.Burger color="info" textColor="grey" data-testid="burger" />
);
const burger = screen.getByTestId('burger');
expect(burger).toHaveClass('has-text-grey');
expect(burger).not.toHaveClass('has-text-info');
expect(burger).not.toHaveAttribute('color');
});
});

describe('Navbar.Menu', () => {
Expand Down Expand Up @@ -356,6 +408,36 @@ describe('Navbar.Menu', () => {
);
expect(screen.getByTestId('menu')).toHaveClass('custom-menu');
});

it('applies textColor as a helper class and not as a DOM attribute', () => {
render(
<Navbar.Menu textColor="primary" data-testid="menu">
Menu
</Navbar.Menu>
);
const menu = screen.getByTestId('menu');
expect(menu).toHaveClass('has-text-primary');
expect(menu).not.toHaveAttribute('textColor');
});

it('renders color as a text color, with textColor taking precedence', () => {
const { rerender } = render(
<Navbar.Menu color="info" data-testid="menu">
Menu
</Navbar.Menu>
);
expect(screen.getByTestId('menu')).toHaveClass('has-text-info');

rerender(
<Navbar.Menu color="info" textColor="grey" data-testid="menu">
Menu
</Navbar.Menu>
);
const menu = screen.getByTestId('menu');
expect(menu).toHaveClass('has-text-grey');
expect(menu).not.toHaveClass('has-text-info');
expect(menu).not.toHaveAttribute('color');
});
});

describe('Navbar.Start & Navbar.End', () => {
Expand All @@ -378,6 +460,66 @@ describe('Navbar.Start & Navbar.End', () => {
render(<Navbar.End data-testid="end">End</Navbar.End>);
expect(screen.getByTestId('end')).toHaveClass('navbar-end');
});

it('applies textColor on Navbar.Start as a helper class and not as a DOM attribute', () => {
render(
<Navbar.Start textColor="primary" data-testid="start">
Start
</Navbar.Start>
);
const start = screen.getByTestId('start');
expect(start).toHaveClass('has-text-primary');
expect(start).not.toHaveAttribute('textColor');
});

it('applies textColor on Navbar.End as a helper class and not as a DOM attribute', () => {
render(
<Navbar.End textColor="primary" data-testid="end">
End
</Navbar.End>
);
const end = screen.getByTestId('end');
expect(end).toHaveClass('has-text-primary');
expect(end).not.toHaveAttribute('textColor');
});

it('renders color as a text color on Navbar.Start, with textColor taking precedence', () => {
const { rerender } = render(
<Navbar.Start color="info" data-testid="start">
Start
</Navbar.Start>
);
expect(screen.getByTestId('start')).toHaveClass('has-text-info');

rerender(
<Navbar.Start color="info" textColor="grey" data-testid="start">
Start
</Navbar.Start>
);
const start = screen.getByTestId('start');
expect(start).toHaveClass('has-text-grey');
expect(start).not.toHaveClass('has-text-info');
expect(start).not.toHaveAttribute('color');
});

it('renders color as a text color on Navbar.End, with textColor taking precedence', () => {
const { rerender } = render(
<Navbar.End color="info" data-testid="end">
End
</Navbar.End>
);
expect(screen.getByTestId('end')).toHaveClass('has-text-info');

rerender(
<Navbar.End color="info" textColor="grey" data-testid="end">
End
</Navbar.End>
);
const end = screen.getByTestId('end');
expect(end).toHaveClass('has-text-grey');
expect(end).not.toHaveClass('has-text-info');
expect(end).not.toHaveAttribute('color');
});
});

describe('Navbar.Dropdown', () => {
Expand Down
Loading
Loading