Skip to content

Add support for custom togglerClasses in Dropdown widget, and addDropdownClass() method. #289

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add support for custom togglerClasses in Dropdown widget, and addDropdownClass() method. #289

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
36a9db6
Add support for custom toggler classes in `Dropdown` widget.
terabytesoftw Aug 1, 2025
2d2919a
Add dropdown CSS class support to `Nav` widget and corresponding tests.
terabytesoftw Aug 1, 2025
b4375aa
Add CSS class retrieval method to `Dropdown` and enhance `Nav` widget…
terabytesoftw Aug 2, 2025
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
13 changes: 11 additions & 2 deletions src/Dropdown.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,16 @@ public function direction(DropdownDirection $direction): self
return $new;
}

/**
* Returns the CSS classes for the container.
*
* @return array The CSS classes for the container.
*/
public function getCssClasses(): array
{
return $this->cssClasses;
}

/**
* Returns the list of links to appear in the dropdown.
*
Expand Down Expand Up @@ -936,7 +946,6 @@ private function renderToggler(string|null $togglerId): string

$togglerAttributes = $this->togglerAttributes;
$togglerClasses = $this->togglerClasses;

$classes = $togglerAttributes['class'] ?? null;

unset($togglerAttributes['class']);
Expand All @@ -953,7 +962,7 @@ private function renderToggler(string|null $togglerId): string
$classes,
],
),
default => Html::addCssClass($togglerAttributes, $togglerClasses),
default => Html::addCssClass($togglerAttributes, [...$togglerClasses, $classes]),
};

if ($this->togglerLink) {
Expand Down
28 changes: 27 additions & 1 deletion src/Nav.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ final class Nav extends Widget
private array $attributes = [];
private array $cssClasses = [];
private string $currentPath = '';
private array $dropdownCssClasses = [self::NAV_ITEM_DROPDOWN_CLASS];
private bool $fade = true;
private bool|string $id = false;
/** @var array<int, Dropdown|NavLink> */
Expand Down Expand Up @@ -158,6 +159,31 @@ public function addCssStyle(array|string $style, bool $overwrite = true): self
return $new;
}

/**
* Adds one or more CSS classes to the existing classes for dropdown.
*
* Multiple classes can be added by passing them as separate arguments. `null` values are filtered out
* automatically.
*
* @param BackedEnum|string|null ...$class One or more CSS class names to add. Pass `null` to skip adding a class.
*
* @return self A new instance with the specified CSS classes added to existing ones for dropdown.
*
* @link https://html.spec.whatwg.org/#classes
*
* Example usage:
* ```php
* $nav->addDropdownClass('custom-class', null, 'another-class', BackGroundColor::PRIMARY);
* ```
*/
public function addDropdownClass(BackedEnum|string|null ...$class): self
{
$new = clone $this;
$new->dropdownCssClasses = [...$this->dropdownCssClasses, ...$class];

return $new;
}

/**
* Sets attribute value.
*
Expand Down Expand Up @@ -581,7 +607,7 @@ private function renderItemsDropdown(Dropdown $items): Li
$dropDownItems = $this->isDropdownActive($items);

return Li::tag()
->addClass(self::NAV_ITEM_DROPDOWN_CLASS)
->addClass(...$this->dropdownCssClasses, ...$dropDownItems->getCssClasses())
->addContent(
"\n",
$dropDownItems
Expand Down
171 changes: 171 additions & 0 deletions tests/NavTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1475,4 +1475,175 @@ public function testWorkingWithFlexUtilities(): void
->render(),
);
}

public function testDropdownAddTogglerClass(): void
{
Assert::equalsWithoutLE(
<<<HTML
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle test-class" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" aria-disabled="true">Disabled</a>
</li>
</ul>
HTML,
Nav::widget()
->items(
NavLink::to('Active', '#', active: true),
Dropdown::widget()
->addTogglerClass('test-class')
->items(
DropdownItem::link('Action', '#'),
DropdownItem::link('Another action', '#'),
DropdownItem::link('Something else here', '#'),
DropdownItem::divider(),
DropdownItem::link('Separated link', '#'),
)
->togglerContent('Dropdown'),
NavLink::to('Link', url: '#'),
NavLink::to('Disabled', '#', disabled: true),
)
->styles(NavStyle::TABS)
->render(),
);
}

public function testDropdownAddClassForAllItemsDropdown(): void
{
Assert::equalsWithoutLE(
<<<HTML
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Active</a>
</li>
<li class="nav-item dropdown test-class">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" aria-disabled="true">Disabled</a>
</li>
</ul>
HTML,
Nav::widget()
->addDropdownClass('test-class')
->items(
NavLink::to('Active', '#', active: true),
Dropdown::widget()
->items(
DropdownItem::link('Action', '#'),
DropdownItem::link('Another action', '#'),
DropdownItem::link('Something else here', '#'),
DropdownItem::divider(),
DropdownItem::link('Separated link', '#'),
)
->togglerContent('Dropdown'),
NavLink::to('Link', url: '#'),
NavLink::to('Disabled', '#', disabled: true),
)
->styles(NavStyle::TABS)
->render(),
);
}

public function testDropdownAddClassForIndividualItemDropdown(): void
{
Assert::equalsWithoutLE(
<<<HTML
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Active</a>
</li>
<li class="nav-item dropdown test-class">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" aria-disabled="true">Disabled</a>
</li>
</ul>
HTML,
Nav::widget()
->items(
NavLink::to('Active', '#', active: true),
Dropdown::widget()
->addClass('test-class')
->items(
DropdownItem::link('Action', '#'),
DropdownItem::link('Another action', '#'),
DropdownItem::link('Something else here', '#'),
DropdownItem::divider(),
DropdownItem::link('Separated link', '#'),
)
->togglerContent('Dropdown'),
NavLink::to('Link', url: '#'),
NavLink::to('Disabled', '#', disabled: true),
)
->styles(NavStyle::TABS)
->render(),
);
}
}
Loading