Skip to content

Commit f3cffec

Browse files
allmarkedupallmarkedup
committed
Use with_ prefix for slots
1 parent daa8c90 commit f3cffec

21 files changed

+92
-92
lines changed

‎app/components/lookbook/display_options/editor/component.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<%= render_component_tag class: "px-2" do %>
22
<% if fields.many? %>
33
<%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
4-
<% button.dropdown do %>
4+
<% button.with_dropdown do %>
55
<div class="p-3 space-y-3">
66
<%= safe_join(fields) %>
77
</div>

‎app/components/lookbook/embed/component.html.erb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
33

44
<%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
5-
<% toolbar.section padded: true do %>
5+
<% toolbar.with_section padded: true do %>
66
<h3>
77
<%= @target.preview.label %> (<%= @target.label %>)
88
</h3>
99
<% end %>
10-
<% toolbar.section align: :right, divide: :left do %>
10+
<% toolbar.with_section align: :right, divide: :left do %>
1111
<%= lookbook_render :button_group do |group| %>
12-
<% group.button icon: :eye,
12+
<% group.with_button icon: :eye,
1313
href: lookbook_inspect_path(@target.path, @params),
1414
tooltip: "View in Inspector" %>
15-
<% group.button icon: :external_link,
15+
<% group.with_button icon: :external_link,
1616
href: lookbook_preview_path(@target.path, @params),
1717
tooltip: "Open in new window",
1818
target: "_blank" %>

‎app/components/lookbook/header/component.html.erb‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%= render_component_tag :header do %>
22
<%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
3-
<% toolbar.section padded: true do %>
3+
<% toolbar.with_section padded: true do %>
44
<% if branding.present? %>
55
<a
66
<% if landing_path %>href="<%= landing_path %>"<% end %>
@@ -10,7 +10,7 @@
1010
<% end %>
1111
<% end %>
1212

13-
<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
13+
<% toolbar.with_section padded: false, align: :right, class: "flex items-center" do %>
1414

1515
<div x-show="loading" x-cloak>
1616
<svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -21,23 +21,23 @@
2121

2222
<%= lookbook_render :button_group do |group| %>
2323
<% if @debug_menu %>
24-
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
24+
<% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
2525
<% menu = lookbook_render :debug_menu,
2626
version: Lookbook::VERSION,
2727
docs_url: "https://lookbook.build/guide",
2828
repo_url: "https://github.com/ViewComponent/lookbook" do %>
2929
<%= helpers.pretty_json(Lookbook.debug_data) %>
3030
<% end %>
31-
<% button.dropdown({}).with_content(menu) %>
31+
<% button.with_dropdown({}).with_content(menu) %>
3232
<% end %>
3333
<% end %>
3434

35-
<% group.button icon: :menu,
35+
<% group.with_button icon: :menu,
3636
"@click.stop": "toggleSidebar",
3737
"x-show": "$store.layout.mobile && sidebarHidden",
3838
class: "!text-lookbook-header-text" %>
3939

40-
<% group.button icon: :x,
40+
<% group.with_button icon: :x,
4141
"@click.stop": "toggleSidebar",
4242
"x-show": "$store.layout.mobile && !sidebarHidden",
4343
"@keydown.esc.window": "closeMobileSidebar",

‎app/components/lookbook/tabs/component.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ class Tabs::Component < Lookbook::BaseComponent
55
attrs[:name] ||= "tab-#{@tab_counter}"
66
attrs[:position] ||= @tab_counter
77
attrs[:theme] ||= @theme
8-
dropdown_tab(**attrs)
8+
with_dropdown_tab(**attrs)
99
Lookbook::Tabs::Tab::Component.new(**attrs)
1010
end
1111

‎app/views/layouts/lookbook/application.html.erb‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
alpine_data: "$store.layout.main",
66
":class": "$store.layout.mobile && '!block'" do |layout| %>
77

8-
<% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
8+
<% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
99
":class": "{
1010
'transition': $store.layout.mobile,
1111
'translate-x-full': $store.layout.mobile && sidebarHidden,
@@ -19,41 +19,41 @@
1919
style: "height: calc(100vh - 2.5rem);" do |layout| %>
2020

2121
<% if @previews.any? %>
22-
<% layout.pane class: "overflow-hidden" do %>
22+
<% layout.with_pane class: "overflow-hidden" do %>
2323
<%= lookbook_render :nav,
2424
id: "previews-nav",
2525
tree: @previews.to_tree,
2626
alpine_data: "$store.nav.previews" do |nav| %>
27-
<%= nav.toolbar do |toolbar| %>
28-
<% toolbar.section padded: true do %>
27+
<%= nav.with_toolbar do |toolbar| %>
28+
<% toolbar.with_section padded: true do %>
2929
<h4 class="pt-1">Previews</h4>
3030
<% end %>
31-
<% toolbar.section align: :right, padded: false do %>
31+
<% toolbar.with_section align: :right, padded: false do %>
3232
<%= lookbook_render :button_group, size: :xs do |group| %>
33-
<% group.button icon: :minus_square,
33+
<% group.with_button icon: :minus_square,
3434
tooltip: "Collapse all",
3535
"@click": "closeAll" %>
3636
<% end %>
3737
<% end %>
3838
<% end %>
39-
<% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
39+
<% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
4040
<% end %>
4141
<% end %>
4242
<% end %>
4343

4444
<% if @pages.any? %>
45-
<% layout.pane class: "overflow-hidden" do %>
45+
<% layout.with_pane class: "overflow-hidden" do %>
4646
<%= lookbook_render :nav,
4747
id: "pages-nav",
4848
tree: @pages.to_tree,
4949
alpine_data: "$store.nav.pages" do |nav| %>
50-
<%= nav.toolbar do |toolbar| %>
51-
<% toolbar.section padded: true do %>
50+
<%= nav.with_toolbar do |toolbar| %>
51+
<% toolbar.with_section padded: true do %>
5252
<h4 class="pt-1">Pages</h4>
5353
<% end %>
54-
<% toolbar.section align: :right, padded: false do %>
54+
<% toolbar.with_section align: :right, padded: false do %>
5555
<%= lookbook_render :button_group, size: :xs do |group| %>
56-
<% group.button icon: :minus_square,
56+
<% group.with_button icon: :minus_square,
5757
tooltip: "Collapse all",
5858
"@click": "closeAll" %>
5959
<% end %>
@@ -66,7 +66,7 @@
6666
<% end %>
6767
<% end %>
6868

69-
<% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
69+
<% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
7070
<%= content_for?(:main) ? yield(:main) : yield %>
7171
<% end %>
7272
<% end %>

‎app/views/layouts/lookbook/shell.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<% end %>
1616

1717
<%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
18-
<% header.branding { @config.project_name } %>
18+
<% header.with_branding { @config.project_name } %>
1919
<% end %>
2020

2121
<%= content_for?(:shell) ? yield(:shell) : yield %>

‎app/views/lookbook/inspector/panels/_params.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
99
<%= lookbook_render "params/editor" do |editor| %>
1010
<% @params.each do |param| %>
11-
<% editor.field param: param %>
11+
<% editor.with_field param: param %>
1212
<% end %>
1313
<% end %>
1414
</div>

‎app/views/lookbook/inspector/show.html.erb‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,57 +5,57 @@
55
"preview-target": @target.id
66
} do |layout| %>
77

8-
<%= layout.pane class: "flex flex-col h-full overflow-hidden",
8+
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
99
"x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
1010

1111
<%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
12-
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
12+
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
1313
<%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
1414
<%= @main_panels.each do |panel| %>
15-
<% tabs.tab name: panel.name,
15+
<% tabs.with_tab name: panel.name,
1616
label: panel.label,
1717
hotkey: panel.hotkey,
1818
disabled: panel.disabled %>
1919
<% end %>
2020
<% end %>
2121
<% end %>
2222

23-
<% toolbar.section align: :right, class: "flex-none" do %>
23+
<% toolbar.with_section align: :right, class: "flex-none" do %>
2424
<% if @dynamic_display_options.any? %>
2525
<%= lookbook_render "display_options/editor" do |editor| %>
2626
<% @dynamic_display_options.each do |key, opts| %>
27-
<% editor.field name: key, opts: opts, value: @static_display_options[key] %>
27+
<% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
2828
<% end %>
2929
<% end %>
3030
<% end %>
3131
<% end %>
3232

33-
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
33+
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
3434
<%= lookbook_render :button_group do |group| %>
35-
<% group.button icon: :link,
35+
<% group.with_button icon: :link,
3636
tooltip: "Copy preview URL",
3737
copy: true do %>
3838
<%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
3939
<% end %>
4040

4141
<% if @pages.any? %>
42-
<% group.button icon: :code,
42+
<% group.with_button icon: :code,
4343
tooltip: "Copy page embed code",
4444
copy: true do %>
4545
&lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
4646
<% end %>
4747
<% end %>
4848

49-
<% group.button icon: :refresh_cw,
49+
<% group.with_button icon: :refresh_cw,
5050
tooltip: "Refresh preview",
5151
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
5252

53-
<% group.button icon: :external_link,
53+
<% group.with_button icon: :external_link,
5454
href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
5555
tooltip: "Open preview in new window",
5656
target: "_blank" %>
5757

58-
<% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
58+
<% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
5959
tooltip: "Show drawer",
6060
"@click": "$store.inspector.drawer.hidden = false",
6161
class: "rotate-180",
@@ -68,7 +68,7 @@
6868
<div class="h-full relative overflow-auto">
6969
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
7070
<% @main_panels.each do |panel| %>
71-
<% tabs.panel name: panel.name do %>
71+
<% tabs.with_panel name: panel.name do %>
7272
<%= lookbook_render :inspector_panel, name: panel.name do %>
7373
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
7474
<% end %>
@@ -78,25 +78,25 @@
7878
</div>
7979
<% end %>
8080

81-
<%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
81+
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
8282
"x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
8383

8484
<%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
85-
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
85+
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
8686
<%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
8787
<%= @drawer_panels.each do |panel| %>
88-
<% tabs.tab name: panel.name,
88+
<% tabs.with_tab name: panel.name,
8989
label: panel.label,
9090
hotkey: panel.hotkey,
9191
disabled: panel.disabled %>
9292
<% end %>
9393
<% end %>
9494
<% end %>
9595

96-
<% toolbar.section align: :right, class: "flex-none relative z-10" do %>
96+
<% toolbar.with_section align: :right, class: "flex-none relative z-10" do %>
9797
<%= lookbook_render :button_group do |group| %>
9898
<%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
99-
<% group.button icon: :copy,
99+
<% group.with_button icon: :copy,
100100
tooltip: "Copy panel contents",
101101
copy: !!panel.copy,
102102
"x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
@@ -107,27 +107,27 @@
107107
<% end %>
108108
<% end %>
109109

110-
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
110+
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
111111
<%= lookbook_render :button_group do |group| %>
112112

113-
<% group.button icon: :corner_up_right,
113+
<% group.with_button icon: :corner_up_right,
114114
tooltip: "Move drawer to right",
115115
"@click": "switchOrientation",
116116
"x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
117117
cloak: true %>
118118

119-
<% group.button icon: :corner_up_right,
119+
<% group.with_button icon: :corner_up_right,
120120
"x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
121121
disabled: true,
122122
cloak: true %>
123123

124-
<% group.button icon: :corner_left_down,
124+
<% group.with_button icon: :corner_left_down,
125125
tooltip: "Move drawer to bottom",
126126
"@click": "switchOrientation",
127127
"x-show": "vertical",
128128
cloak: true %>
129129

130-
<% group.button icon: :x_circle,
130+
<% group.with_button icon: :x_circle,
131131
tooltip: "Hide drawer",
132132
"@click": "$store.inspector.drawer.hidden = true",
133133
cloak: true %>
@@ -138,7 +138,7 @@
138138
<div class="h-full overflow-auto">
139139
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
140140
<% @drawer_panels.each do |panel| %>
141-
<% tabs.panel name: panel.name do %>
141+
<% tabs.with_panel name: panel.name do %>
142142
<%= lookbook_render :inspector_panel, name: panel.name do %>
143143
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
144144
<% end %>

‎app/views/lookbook/pages/show.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<% if @page.sections.any? %>
1414
<%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
1515
<% @page.sections.each do |section| %>
16-
<% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
16+
<% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
1717
<%= page_controller.render_page(section) %>
1818
<% end %>
1919
<% end %>

‎spec/components/button_group_component_spec.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
RSpec.describe Lookbook::ButtonGroup::Component, type: :component do
44
it "renders the component" do
55
render_inline(described_class.new) do |group|
6-
group.button icon: :book
6+
group.with_button icon: :book
77
end
88

99
expect(page).to have_css("[data-component='button-group']")

0 commit comments

Comments
 (0)