Skip to content

fix: clean up storybook demo warnings and deprecated patterns #214

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
SerhiiFesenko wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: clean up storybook demo warnings and deprecated patterns #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b4e148
refactor(storybook): remove unused SaladUI.Menu imports from dashboar…
SerhiiFesenko Sep 22, 2025
e8f32e5
refactor(tabs): remove deprecated builder pattern from tabs component
SerhiiFesenko Sep 22, 2025
b426ea4
refactor(select): remove deprecated builder pattern from select compo…
SerhiiFesenko Sep 22, 2025
7174577
fix(sidebar): clean up component attributes
SerhiiFesenko Sep 22, 2025
d6ec700
fix(dropdown): add unique IDs to dropdown menus in sidebar demos
SerhiiFesenko Sep 22, 2025
2e7e635
style(sidebar): fix self-closing component tags
SerhiiFesenko Sep 22, 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
11 changes: 5 additions & 6 deletions storybook/lib/salad_storybook_web/live/demo/dashboard_one_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ defmodule SaladStorybookWeb.Demo.DashboardOne do
import SaladUI.Card
import SaladUI.DropdownMenu
import SaladUI.Input
import SaladUI.Menu
import SaladUI.Sheet
import SaladUI.Skeleton
import SaladUI.Table
Expand Down Expand Up @@ -209,13 +208,13 @@ defmodule SaladStorybookWeb.Demo.DashboardOne do
</.dropdown_menu>
</header>
<main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<.tabs :let={builder} default="all" id="tabs">
<.tabs default="all" id="tabs">
<div class="flex items-center">
<.tabs_list>
<.tabs_trigger value="all" builder={builder}>All</.tabs_trigger>
<.tabs_trigger value="active" builder={builder}>Active</.tabs_trigger>
<.tabs_trigger value="draft" builder={builder}>Draft</.tabs_trigger>
<.tabs_trigger value="archived" builder={builder} class="hidden sm:flex">
<.tabs_trigger value="all">All</.tabs_trigger>
<.tabs_trigger value="active">Active</.tabs_trigger>
<.tabs_trigger value="draft">Draft</.tabs_trigger>
<.tabs_trigger value="archived" class="hidden sm:flex">
Archived
</.tabs_trigger>
</.tabs_list>
Expand Down
1 change: 0 additions & 1 deletion storybook/lib/salad_storybook_web/live/demo/dashboard_three_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ defmodule SaladStorybookWeb.Demo.DashboardThree do
import SaladUI.Card
import SaladUI.DropdownMenu
import SaladUI.Input
import SaladUI.Menu
import SaladUI.Sheet
import SaladUI.Table

Expand Down
1 change: 0 additions & 1 deletion storybook/lib/salad_storybook_web/live/demo/dashboard_two_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ defmodule SaladStorybookWeb.Demo.DashboardTwo do
import SaladUI.Card
import SaladUI.DropdownMenu
import SaladUI.Input
import SaladUI.Menu
import SaladUI.Pagination
import SaladUI.Progress
import SaladUI.Separator
Expand Down
6 changes: 2 additions & 4 deletions storybook/lib/salad_storybook_web/live/demo/demo.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ defmodule SaladStorybookWeb.Demo.Demo do
<h2 class="text-xl font-semibold">Country Selector</h2>

<.select
:let={builder}
id="country-select"
value={@selected_country}
name="country"
Expand All @@ -66,7 +65,7 @@ defmodule SaladStorybookWeb.Demo.Demo do
<.select_trigger class="w-[180px]">
<.select_value placeholder="Select your country" />
</.select_trigger>
<.select_content builder={builder}>
<.select_content>
<.select_group>
<.select_label>Americas</.select_label>
<.select_item value="us">United States</.select_item>
Expand All @@ -89,7 +88,6 @@ defmodule SaladStorybookWeb.Demo.Demo do
</div>
<div class="mt-8">
<.select
:let={builder}
id="skills-select"
name="skills"
multiple={true}
Expand All @@ -99,7 +97,7 @@ defmodule SaladStorybookWeb.Demo.Demo do
<.select_trigger>
<.select_value placeholder="Select skills" />
</.select_trigger>
<.select_content builder={builder}>
<.select_content>
<.select_group>
<.select_label>Programming</.select_label>
<.select_item value="javascript">JavaScript</.select_item>
Expand Down
8 changes: 3 additions & 5 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_five.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,7 @@ defmodule SaladStorybookWeb.Demo.SidebarFive do
<.sidebar_main data={@data}></.sidebar_main>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
Expand Down Expand Up @@ -250,7 +248,7 @@ defmodule SaladStorybookWeb.Demo.SidebarFive do
<.label for="search" class="sr-only">
Search
</.label>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8"></.sidebar_input>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8" />
<search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50">
</search>
</.sidebar_group_content>
Expand All @@ -263,7 +261,7 @@ defmodule SaladStorybookWeb.Demo.SidebarFive do
~H"""
<.sidebar_menu>
<.sidebar_menu_item>
<.dropdown_menu class="block">
<.dropdown_menu id="sidebar-five-dropdown" class="block">
<.dropdown_menu_trigger>
<.sidebar_menu_button
size="lg"
Expand Down
6 changes: 2 additions & 4 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_four.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,7 @@ defmodule SaladStorybookWeb.Demo.SidebarFour do
<.sidebar_main data={@data}></.sidebar_main>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
Expand Down Expand Up @@ -252,7 +250,7 @@ defmodule SaladStorybookWeb.Demo.SidebarFour do
~H"""
<.sidebar_menu>
<.sidebar_menu_item>
<.dropdown_menu class="block">
<.dropdown_menu id="sidebar-four-dropdown" class="block">
<.dropdown_menu_trigger>
<.sidebar_menu_button
size="lg"
Expand Down
12 changes: 5 additions & 7 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_one.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,22 +166,20 @@ defmodule SaladStorybookWeb.Demo.SidebarOne do
</.sidebar_group_content>
</.sidebar_group>
</.sidebar_content>
<.sidebar_rail></.sidebar_rail>
<.sidebar_rail />
</.sidebar>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.separator orientation="vertical" class="mr-2 h-4"></.separator>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item class="hidden md:block">
<.breadcrumb_link href="#">
Building Your Application
</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator class="hidden md:block"></.breadcrumb_separator>
<.breadcrumb_separator class="hidden md:block" />
<.breadcrumb_item>
<.breadcrumb_page>
Data Fetching
Expand Down Expand Up @@ -211,7 +209,7 @@ defmodule SaladStorybookWeb.Demo.SidebarOne do
<.label for="search" class="sr-only">
Search
</.label>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8"></.sidebar_input>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8" />
<search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50">
</search>
</.sidebar_group_content>
Expand Down
13 changes: 5 additions & 8 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_six.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,18 +146,16 @@ defmodule SaladStorybookWeb.Demo.SidebarSix do
<.sidebar_main data={@data}></.sidebar_main>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.separator orientation="vertical" class="mr-2 h-4"></.separator>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item class="hidden md:block">
<.breadcrumb_link href="#">
Building Your Application
</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator class="hidden md:block"></.breadcrumb_separator>
<.breadcrumb_separator class="hidden md:block" />
<.breadcrumb_item>
<.breadcrumb_page>
Data Fetching
Expand Down Expand Up @@ -268,7 +266,6 @@ defmodule SaladStorybookWeb.Demo.SidebarSix do
<.collapsible
:for={item <- @items}
id={id(item.title)}
aschild="aschild"
open={item[:is_active]}
class="group/collapsible block"
>
Expand Down Expand Up @@ -312,7 +309,7 @@ defmodule SaladStorybookWeb.Demo.SidebarSix do
<.sidebar_menu>
<.sidebar_menu_item :for={item <- @projects}>
<.dropdown_menu id="projects" style="-ml-8 block">
<.dropdown_menu_trigger show_on_hover>
<.dropdown_menu_trigger>
<.as_child tag={&sidebar_menu_button/1} child="a" href={item.url}>
<.dynamic tag={item.icon} />
<span>
Expand Down Expand Up @@ -393,7 +390,7 @@ defmodule SaladStorybookWeb.Demo.SidebarSix do
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
Copy link

@sourcery-ai sourcery-ai bot Sep 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Changed sideoffset to side-offset for dropdown menu; check for prop compatibility.

Verify that dropdown_menu uses side-offset as the prop name; otherwise, the offset will not work as intended.

side="right"
align="end"
sideoffset="{4}"
side-offset={4}
>
<.dropdown_menu_label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
Expand Down
12 changes: 5 additions & 7 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_three.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,18 +146,16 @@ defmodule SaladStorybookWeb.Demo.SidebarThree do
<.sidebar_main data={@data}></.sidebar_main>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.separator orientation="vertical" class="mr-2 h-4"></.separator>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item class="hidden md:block">
<.breadcrumb_link href="#">
Building Your Application
</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator class="hidden md:block"></.breadcrumb_separator>
<.breadcrumb_separator class="hidden md:block" />
<.breadcrumb_item>
<.breadcrumb_page>
Data Fetching
Expand Down Expand Up @@ -239,7 +237,7 @@ defmodule SaladStorybookWeb.Demo.SidebarThree do
<.label for="search" class="sr-only">
Search
</.label>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8"></.sidebar_input>
<.sidebar_input id="search" placeholder="Search the docs..." class="pl-8" />
<search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50">
</search>
</.sidebar_group_content>
Expand All @@ -252,7 +250,7 @@ defmodule SaladStorybookWeb.Demo.SidebarThree do
~H"""
<.sidebar_menu>
<.sidebar_menu_item>
<.dropdown_menu class="block">
<.dropdown_menu id="sidebar-three-dropdown" class="block">
<.dropdown_menu_trigger>
<.sidebar_menu_button
size="lg"
Expand Down
4 changes: 1 addition & 3 deletions storybook/lib/salad_storybook_web/live/demo/sidebar_two.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,9 +185,7 @@ defmodule SaladStorybookWeb.Demo.SidebarTwo do
</.sidebar>
<.sidebar_inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<.sidebar_trigger target="main-sidebar" class="-ml-1">
<Lucideicons.panel_left class="w-4 h-4" />
</.sidebar_trigger>
<.sidebar_trigger target="main-sidebar" class="-ml-1" />
<.separator orientation="vertical" class="mr-2 h-4" />
<.breadcrumb>
<.breadcrumb_list>
Expand Down
Loading