From ddfc8ba35c85a43e1ec8272c2618a9cae84c34eb Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 08:17:31 +0100 Subject: [PATCH 1/2] Add List component - Implements List component with DaisyUI styling - Adds comprehensive test coverage - Includes responsive class comments for Tailwind --- lib/phlexy_ui/list.rb | 50 +++++++++++++++ spec/lib/phlexy_ui/list_spec.rb | 108 ++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+) create mode 100644 lib/phlexy_ui/list.rb create mode 100644 spec/lib/phlexy_ui/list_spec.rb diff --git a/lib/phlexy_ui/list.rb b/lib/phlexy_ui/list.rb new file mode 100644 index 0000000..6aabc75 --- /dev/null +++ b/lib/phlexy_ui/list.rb @@ -0,0 +1,50 @@ +# frozen_string_literal: true + +module PhlexyUI + # @component html class="list" + class List < Base + def initialize(*, as: :ul, **) + super(*, **) + @as = as + end + + def view_template(&) + generate_classes!( + # "list" + component_html_class: :list, + modifiers_map: modifiers, + base_modifiers:, + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end + + def row(**options, &) + generate_classes!( + # "list-row" + component_html_class: :"list-row", + options: + ).then do |classes| + li(class: classes, **options, &) + end + end + + register_modifiers( + # "sm:list-col-wrap" + # "@sm:list-col-wrap" + # "md:list-col-wrap" + # "@md:list-col-wrap" + # "lg:list-col-wrap" + # "@lg:list-col-wrap" + col_wrap: "list-col-wrap", + # "sm:list-col-grow" + # "@sm:list-col-grow" + # "md:list-col-grow" + # "@md:list-col-grow" + # "lg:list-col-grow" + # "@lg:list-col-grow" + col_grow: "list-col-grow" + ) + end +end diff --git a/spec/lib/phlexy_ui/list_spec.rb b/spec/lib/phlexy_ui/list_spec.rb new file mode 100644 index 0000000..8702e81 --- /dev/null +++ b/spec/lib/phlexy_ui/list_spec.rb @@ -0,0 +1,108 @@ +require "spec_helper" + +describe PhlexyUI::List do + subject(:output) { render described_class.new } + + it "is expected to match the formatted HTML" do + expected_html = html <<~HTML + + HTML + + is_expected.to eq(expected_html) + end + + describe "with row method" do + subject(:output) do + render described_class.new do |l| + l.row { "Row 1" } + l.row { "Row 2" } + end + end + + it "renders rows" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + + describe "conditions" do + { + col_wrap: "list-col-wrap", + col_grow: "list-col-grow" + }.each do |modifier, css| + context "when given :#{modifier} modifier" do + subject(:output) { render described_class.new(modifier) } + + it "renders it apart from the main class" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + end + + context "when given multiple conditions" do + subject(:output) { render described_class.new(:col_wrap, :col_grow) } + + it "renders them separately" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + end + + describe "data" do + subject(:output) do + render described_class.new(data: {foo: "bar"}) + end + + it "renders it correctly" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + + describe "responsiveness" do + %i[sm md lg xl @sm @md @lg @xl].each do |viewport| + context "when given an :#{viewport} responsive option" do + subject(:output) do + render described_class.new(:col_wrap, responsive: {viewport => :col_grow}) + end + + it "renders it separately with a responsive prefix" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + end + end + + describe "passing :as option" do + subject(:output) { render described_class.new(as: :ol) } + + it "renders as the given tag" do + expected_html = html <<~HTML +
    + HTML + + expect(output).to eq(expected_html) + end + end +end From a790dea47d93ab24ff64ce6c62c41714ff50ccb3 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 08:24:38 +0100 Subject: [PATCH 2/2] Fix List component to properly support list-row, list-col-wrap, and list-col-grow - Remove col_wrap and col_grow as modifiers on the list element - Add col_wrap and col_grow as helper methods that create properly classed elements - These helpers should be used within list rows, matching DaisyUI's actual usage - Update tests to reflect correct DaisyUI patterns - Add tests for custom element types with col_grow and col_wrap --- lib/phlexy_ui/list.rb | 35 ++++++----- spec/lib/phlexy_ui/list_spec.rb | 107 ++++++++++++++++++++++---------- 2 files changed, 93 insertions(+), 49 deletions(-) diff --git a/lib/phlexy_ui/list.rb b/lib/phlexy_ui/list.rb index 6aabc75..1c0d557 100644 --- a/lib/phlexy_ui/list.rb +++ b/lib/phlexy_ui/list.rb @@ -30,21 +30,24 @@ def row(**options, &) end end - register_modifiers( - # "sm:list-col-wrap" - # "@sm:list-col-wrap" - # "md:list-col-wrap" - # "@md:list-col-wrap" - # "lg:list-col-wrap" - # "@lg:list-col-wrap" - col_wrap: "list-col-wrap", - # "sm:list-col-grow" - # "@sm:list-col-grow" - # "md:list-col-grow" - # "@md:list-col-grow" - # "lg:list-col-grow" - # "@lg:list-col-grow" - col_grow: "list-col-grow" - ) + def col_wrap(as: :div, **options, &) + generate_classes!( + # "list-col-wrap" + component_html_class: :"list-col-wrap", + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end + + def col_grow(as: :div, **options, &) + generate_classes!( + # "list-col-grow" + component_html_class: :"list-col-grow", + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end end end diff --git a/spec/lib/phlexy_ui/list_spec.rb b/spec/lib/phlexy_ui/list_spec.rb index 8702e81..243db40 100644 --- a/spec/lib/phlexy_ui/list_spec.rb +++ b/spec/lib/phlexy_ui/list_spec.rb @@ -31,35 +31,70 @@ end end - describe "conditions" do - { - col_wrap: "list-col-wrap", - col_grow: "list-col-grow" - }.each do |modifier, css| - context "when given :#{modifier} modifier" do - subject(:output) { render described_class.new(modifier) } - - it "renders it apart from the main class" do - expected_html = html <<~HTML - - HTML - - expect(output).to eq(expected_html) + describe "with col_wrap method" do + subject(:output) do + render described_class.new do |l| + l.row do + l.col_wrap { "Wrapping content" } end end end - context "when given multiple conditions" do - subject(:output) { render described_class.new(:col_wrap, :col_grow) } + it "renders col_wrap inside row" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end - it "renders them separately" do - expected_html = html <<~HTML - - HTML + describe "with col_grow method" do + subject(:output) do + render described_class.new do |l| + l.row do + l.col_grow { "Growing content" } + end + end + end + + it "renders col_grow inside row" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end - expect(output).to eq(expected_html) + describe "with col_grow custom element" do + subject(:output) do + render described_class.new do |l| + l.row do + l.col_grow(as: :span) { "Growing content" } + end end end + + it "renders col_grow as specified element" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end end describe "data" do @@ -76,21 +111,27 @@ end end - describe "responsiveness" do - %i[sm md lg xl @sm @md @lg @xl].each do |viewport| - context "when given an :#{viewport} responsive option" do - subject(:output) do - render described_class.new(:col_wrap, responsive: {viewport => :col_grow}) + describe "with both col_wrap and col_grow in same row" do + subject(:output) do + render described_class.new do |l| + l.row do + l.col_grow { "Growing content" } + l.col_wrap { "Wrapping content" } end + end + end - it "renders it separately with a responsive prefix" do - expected_html = html <<~HTML - - HTML + it "renders both column types in one row" do + expected_html = html <<~HTML + + HTML - expect(output).to eq(expected_html) - end - end + expect(output).to eq(expected_html) end end