protos 0.4.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e18641b7b93b0f94886468a48ed3c3263bb5edd72dbaeabfc03e346598f0d409
-  data.tar.gz: 207f45d2b30525c4ed65f83943c2c4eb0617a72dacabc7238a9f3cd4309ad96d
+  metadata.gz: 875e55f36d03988e78d0e6834e840094b089ee1e755c003b6483a07a503bfbf4
+  data.tar.gz: 6b0bdbfc22451928316c73dd931cdeebe3e47cf20c596b3d5318b3145f51b5bc
 SHA512:
-  metadata.gz: 844cc78e0e2972c8e726a46af3ed08e420c3581d93c79f04b266019f10a38f2441b4ec1a76ec787b16592698cc80c742d1d87d8cc793ac0259bd5baa0acbc893
-  data.tar.gz: 7b0c9022724175b60e5d1f53efb75237f944889e07fee18c8ff99165b1ae8b87843e9d0fb7ad3f8358788af565938e240141d386f29f31ac372efb71a95c40b0
+  metadata.gz: 62c59568bcf8631d3d9c40de57ddb6b1df2f92183c0e9aa92e8be6b0da7d6e325e440a869eda3f1fd0cb93f651f9db8598a9914cc89b6454a1cda7f5a04517fc
+  data.tar.gz: 2ef45fba8e402133e4345fa91186713dc864e11d737bf3200548340cf7ed3d115e08b406b6d5c98eab8d568d4178b37d1b5e43fa13569dcc873fda6a8f338be9

data/CHANGELOG.md

@@ -1,19 +1,28 @@
 ## [Unreleased]
 
-## [0.1.0] - 2024-03-01
+## [0.5.0] - 2024-08-27
 
-- Initial release
+- Fixes all accessibility violations according to Axe Core
+- Reduces responsibility of Tabs to only be a tablist, no tab panels
+- Fixes passing ID to popovers, dropdowns, drawers, etc to not override the
+  input ID
+- Changes trigger on popover to be a button instead of a div
 
-## [0.2.0] - 2024-03-06
+## [0.4.3] - 2024-08-14
 
-- Chose to move away from daisyUI dropdown defaults as they have problems
-  displaying properly in too many situations
-- Opted for using a protos-stimulus controller that uses tippy.js
+- Removes unneeded auto-loading in Rails which fixes collisions with `protos-markdown`
+- Adds fixes for handling form submissions within modals with `protos-stimulus`
+  v0.0.3
+- Adds ability to disable margin on p tags with `Protos::Typography`
 
-## [0.3.0] - 2024-04-06
+## [0.4.2] - 2024-04-30
 
-- Updates to phlex v0.10 by changing all `template` methods to `view_template`
-- Improvements to README
+- Adds ability to pass arrays of tokens to themes
+- Removes unnecessary calls to `tokens`, preferring arrays of strings for
+  performance
+- Improvements to performance with constant hash lookups and early returns on
+  `mix`
+- Adds steps component
 
 ## [0.4.0] - 2024-04-09
 
@@ -21,11 +30,17 @@
 - Apparently `render` is called differently within ERB
 - Suggested to change all calls to immediately render, would improve ergonomics
 
-## [0.4.2] - 2024-04-30
+## [0.3.0] - 2024-04-06
 
-- Adds ability to pass arrays of tokens to themes
-- Removes unnecessary calls to `tokens`, preferring arrays of strings for
-  performance
-- Improvements to performance with constant hash lookups and early returns on
-  `mix`
-- Adds steps component
+- Updates to phlex v0.10 by changing all `template` methods to `view_template`
+- Improvements to README
+
+## [0.2.0] - 2024-03-06
+
+- Chose to move away from daisyUI dropdown defaults as they have problems
+  displaying properly in too many situations
+- Opted for using a protos-stimulus controller that uses tippy.js
+
+## [0.1.0] - 2024-03-01
+
+- Initial release

data/lib/protos/accordion/item.rb

@@ -5,16 +5,16 @@ module Protos
     class Item < Component
       # DOCS: An accorion is just a collapse with radio buttons.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, type: Types::String | Types::Integer
 
       def view_template(&block)
         li(**attrs) do
-          render Collapse.new(theme: collapse_theme) do
-            # form: "" prevents the radio button from being submitted if its
-            # within a form
-            input(type: :radio, name: id, form: "", autocomplete: :off)
-            yield if block
-          end
+          render Collapse.new(
+            theme: collapse_theme,
+            input_id: @input_id.to_s,
+            input_type: :radio,
+            &block
+          )
         end
       end
 

data/lib/protos/accordion.rb

@@ -7,20 +7,30 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
-    option :id, default: -> { "collapse-#{SecureRandom.hex(4)}" }
-
     def view_template(&)
       ul(**attrs, &)
     end
 
-    def item(*, **, &) = render Item.new(*, id:, **, &)
+    def item(*, input_id: nil, **, &)
+      self.current_input_id = input_id
+
+      render Item.new(*, input_id: current_input_id, **, &)
+    end
 
     def content(...) = render Collapse::Content.new(...)
 
-    def title(*, **, &) = render Collapse::Title.new(*, id:, **, &)
+    def title(*, **, &)
+      render Collapse::Title.new(*, input_id: current_input_id, **, &)
+    end
 
     private
 
+    attr_reader :current_input_id
+
+    def current_input_id=(value)
+      @current_input_id = value || "collapse-#{SecureRandom.hex(4)}"
+    end
+
     def theme
       {
         container: "join join-vertical"

data/lib/protos/alert/actions.rb

@@ -11,6 +11,12 @@ module Protos
 
       private
 
+      def default_attrs
+        {
+          aria_label: "alert-actions"
+        }
+      end
+
       def theme
         {
           container: "flex gap-xs items-center"

data/lib/protos/breadcrumbs.rb

@@ -15,6 +15,12 @@ module Protos
 
     private
 
+    def default_attrs
+      {
+        aria_label: "breadcrumbs"
+      }
+    end
+
     def theme
       {
         container: "breadcrumbs"

data/lib/protos/collapse/title.rb

@@ -5,14 +5,15 @@ module Protos
     class Title < Component
       # DOCS: The title of a collapse. This is the content that is always
       # visible and is used to toggle the collapse.
-      option :id,
-             type: Types::Coercible::String,
+
+      option :input_id,
+             type: Types::String | Types::Integer | Types::Nil,
              reader: false,
-             default: -> { "" }
+             default: -> { }
 
       def view_template(&)
-        if @id.size.positive?
-          label(for: @id, **attrs, &)
+        if @input_id
+          label(for: @input_id.to_s, **attrs, &)
         else
           div(**attrs, &)
         end

data/lib/protos/collapse.rb

@@ -6,19 +6,30 @@ module Protos
     # is visible at all times, and the content is only visible when expanded.
     # https://daisyui.com/components/collapse/
 
-    option :checkbox, default: -> { false }, type: Types::Bool, reader: false
-    option :id,
+    option :input_type, default: -> { :checkbox }, reader: false
+    option :input_id,
+           reader: false,
            default: -> { "collapse-#{SecureRandom.hex(4)}" },
            type: Types::String
 
     def view_template
       div(**attrs) do
-        input(type: "checkbox", id:, autocomplete: :off) if @checkbox
+        if @input_type
+          input(
+            type: @input_type,
+            id: @input_id,
+            name: @input_id,
+            autocomplete: :off,
+            # form: "" prevents the radio button from being submitted if its
+            # within a form
+            form: ""
+          )
+        end
         yield if block_given?
       end
     end
 
-    def title(*, **, &) = render Title.new(*, id:, **, &)
+    def title(*, **, &) = render Title.new(*, input_id: @input_id, **, &)
 
     def content(...) = render Content.new(...)
 

data/lib/protos/command/group.rb

@@ -12,6 +12,14 @@ module Protos
           ul(class: css[:list], &block)
         end
       end
+
+      private
+
+      def default_attrs
+        {
+          data: { "protos--command-target": "group" }
+        }
+      end
     end
   end
 end

data/lib/protos/command/input.rb

@@ -12,12 +12,15 @@ module Protos
              }
 
       def view_template(&block)
-        div(**attrs) do
+        li(**attrs) do
           label(class: css[:label]) do
             div(class: css[:icon], &block) if block
             input(
               type: :text,
-              data: { action: "protos--command#filter" },
+              data: {
+                action: "protos--command#filter",
+                "protos--command-target": "input"
+              },
               class: css[:input],
               placeholder:,
               autocomplete: :off

data/lib/protos/command/item.rb

@@ -13,7 +13,10 @@ module Protos
 
       def default_attrs
         {
-          data: { "protos--command-target": "item" }
+          data: {
+            "protos--command-target": "item",
+            action: "turbo:submit-end->protos--modal#handleFormSubmit"
+          }
         }
       end
     end

data/lib/protos/command/title.rb

@@ -7,7 +7,7 @@ module Protos
       # inside a Protos::Command::Group component.
 
       def view_template(&)
-        h2(**attrs, &)
+        li { h2(**attrs, &) }
       end
 
       private

data/lib/protos/command.rb

@@ -10,21 +10,21 @@ module Protos
       div(**attrs, &)
     end
 
-    def input(...) = render Input.new(...)
+    def input(...) = render Command::Input.new(...)
 
-    def list(...) = render List.new(...)
+    def list(...) = render Command::List.new(...)
 
-    def trigger(...) = render Trigger.new(...)
+    def trigger(...) = render Command::Trigger.new(...)
 
-    def dialog(...) = render Dialog.new(...)
+    def dialog(...) = render Command::Dialog.new(...)
 
-    def title(...) = render Title.new(...)
+    def title(...) = render Command::Title.new(...)
 
-    def group(...) = render Group.new(...)
+    def group(...) = render Command::Group.new(...)
 
-    def item(...) = render Item.new(...)
+    def item(...) = render Command::Item.new(...)
 
-    def empty(...) = render Empty.new(...)
+    def empty(...) = render Command::Empty.new(...)
 
     private
 

data/lib/protos/drawer/side.rb

@@ -6,11 +6,15 @@ module Protos
       # DOCS: The content that will be shown when you open the drawer using the
       # trigger. This would be hidden until triggered.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template
         aside(**attrs) do
-          label(for: id, aria_label: "close sidebar", class: css[:toggle])
+          label(
+            for: @input_id,
+            aria_label: "close sidebar",
+            class: css[:toggle]
+          )
           yield if block_given?
         end
       end

data/lib/protos/drawer/trigger.rb

@@ -6,10 +6,10 @@ module Protos
       # DOCS: The trigger for a drawer. When this is clicked the side will open
       # and overlap the main content with a darker overlay.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template(&)
-        label(for: id, **attrs, &)
+        label(for: @input_id, **attrs, &)
       end
 
       private

data/lib/protos/drawer.rb

@@ -7,20 +7,29 @@ module Protos
     # trigger is clicked.
     # https://daisyui.com/components/drawer/
 
-    option :id, type: Types::Coercible::String
+    option :id,
+           reader: false,
+           type: Types::Coercible::String,
+           default: -> { "drawer-#{SecureRandom.hex(4)}" }
 
     def view_template
       div(**attrs) do
-        input(id:, type: :checkbox, class: css[:toggle], autocomplete: :off)
+        input(
+          id: @id,
+          type: :checkbox,
+          class: css[:toggle],
+          autocomplete: :off,
+          form: ""
+        )
         yield if block_given?
       end
     end
 
     def content(...) = render Content.new(...)
 
-    def side(*, **, &) = render Side.new(*, id:, **, &)
+    def side(*, **, &) = render Side.new(*, input_id: @id, **, &)
 
-    def trigger(*, **, &) = render Trigger.new(*, id:, **, &)
+    def trigger(*, **, &) = render Trigger.new(*, input_id: @id, **, &)
 
     private
 

data/lib/protos/engine.rb

@@ -2,9 +2,7 @@
 
 module Protos
   class Engine < ::Rails::Engine
-    # DOCS: This is the engine for the Protos gem. It allows autoloading the lib
-    # when used inside a Rails app.
-
-    config.autoload_paths += Dir["#{config.root}/lib/"]
+    # DOCS: This is the engine for the Protos gem. It allows autoloading the
+    # lib when used inside a Rails app.
   end
 end

data/lib/protos/popover/trigger.rb

@@ -7,7 +7,7 @@ module Protos
       # or click on to show the popover.
 
       def view_template(&)
-        div(**attrs, &)
+        button(**attrs, &)
       end
 
       private
@@ -15,7 +15,8 @@ module Protos
       def default_attrs
         {
           data: { "protos--popover-target": "trigger" },
-          tabindex: 0
+          tabindex: 0,
+          type: :button
         }
       end
     end

data/lib/protos/swap.rb

@@ -8,7 +8,13 @@ module Protos
 
     def view_template
       label(**attrs) do
-        input(type: :checkbox, class: css[:input], autocomplete: :off)
+        input(
+          type: :checkbox,
+          class: css[:input],
+          autocomplete: :off,
+          form: "",
+          aria_label: "swap"
+        )
         yield if block_given?
       end
     end

data/lib/protos/tabs/tab.rb

@@ -5,35 +5,24 @@ module Protos
     class Tab < Component
       # DOCS: A single tab in a tabs component
 
-      option :id
-      option :label
       option :active, default: -> { false }
       option :disabled, default: -> { false }
 
       def view_template(&)
-        input(
-          type: :radio,
-          class: css[:input],
-          name: id,
-          role: :tab,
-          aria_label: label,
-          autocomplete: :off
-        )
-        div(**attrs, &)
+        button(**attrs, disabled:, &)
       end
 
       private
 
       def default_attrs
         {
-          role: :tabpanel
+          role: :tab
         }
       end
 
       def theme
         {
-          container: "tab-content",
-          input: tokens(
+          container: tokens(
             "tab",
             disabled: "tab-disabled",
             active: "tab-active"

data/lib/protos/toast/close_button.rb

@@ -8,6 +8,7 @@ module Protos
       def view_template(&block)
         form(method: :dialog, class: css[:form]) do
           button(
+            aria_label: "close",
             autofocus: true,
             formmethod: :dialog,
             formnovalidate: true,

data/lib/protos/typography/paragraph.rb

@@ -5,6 +5,8 @@ module Protos
     class Paragraph < Component
       # DOCS: A paragraph of text
 
+      option :margin, default: -> { true }
+
       def view_template(&)
         p(**attrs, &)
       end
@@ -13,9 +15,9 @@ module Protos
 
       def theme
         {
-          container: %w(
-            leading-relaxed
-            [&:not(:first-child)]:mt-sm
+          container: tokens(
+            "leading-relaxed",
+            margin: "[&:not(:first-child)]:mt-sm"
           )
         }
       end

data/lib/protos/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Protos
-  VERSION = "0.4.2"
+  VERSION = "0.5.0"
 end

data/lib/protos.rb

@@ -8,128 +8,126 @@ require "tailwind_merge"
 
 module Protos
   class Error < StandardError; end
-
-  if defined?(Rails)
-    require_relative "protos/engine"
-  else
-    require_relative "protos/version"
-    require_relative "protos/types"
-    require_relative "protos/token_list"
-    require_relative "protos/component"
-    require_relative "protos/theme"
-    require_relative "protos/attributes"
-
-    # Components
-    require_relative "protos/accordion"
-    require_relative "protos/accordion/item"
-
-    require_relative "protos/alert"
-    require_relative "protos/alert/actions"
-    require_relative "protos/alert/icon"
-
-    require_relative "protos/avatar"
-
-    require_relative "protos/breadcrumbs"
-    require_relative "protos/breadcrumbs/crumb"
-
-    require_relative "protos/card"
-    require_relative "protos/card/body"
-    require_relative "protos/card/title"
-    require_relative "protos/card/actions"
-    require_relative "protos/card/image"
-
-    require_relative "protos/carousel"
-    require_relative "protos/carousel/item"
-    require_relative "protos/carousel/actions"
-
-    require_relative "protos/chat_bubble"
-    require_relative "protos/chat_bubble/content"
-    require_relative "protos/chat_bubble/image"
-    require_relative "protos/chat_bubble/header"
-    require_relative "protos/chat_bubble/footer"
-
-    require_relative "protos/collapse"
-    require_relative "protos/collapse/title"
-    require_relative "protos/collapse/content"
-
-    require_relative "protos/command"
-    require_relative "protos/command/input"
-    require_relative "protos/command/dialog"
-    require_relative "protos/command/group"
-    require_relative "protos/command/list"
-    require_relative "protos/command/trigger"
-    require_relative "protos/command/title"
-    require_relative "protos/command/item"
-    require_relative "protos/command/empty"
-
-    require_relative "protos/drawer"
-    require_relative "protos/drawer/side"
-    require_relative "protos/drawer/trigger"
-    require_relative "protos/drawer/content"
-
-    require_relative "protos/hero"
-    require_relative "protos/hero/content"
-    require_relative "protos/hero/overlay"
-
-    require_relative "protos/list"
-    require_relative "protos/list/item"
-
-    require_relative "protos/modal"
-    require_relative "protos/modal/close_button"
-    require_relative "protos/modal/dialog"
-    require_relative "protos/modal/trigger"
-
-    require_relative "protos/popover"
-    require_relative "protos/popover/trigger"
-    require_relative "protos/popover/content"
-
-    require_relative "protos/stats"
-    require_relative "protos/stats/actions"
-    require_relative "protos/stats/description"
-    require_relative "protos/stats/figure"
-    require_relative "protos/stats/stat"
-    require_relative "protos/stats/title"
-    require_relative "protos/stats/value"
-
-    require_relative "protos/steps"
-    require_relative "protos/steps/step"
-
-    require_relative "protos/swap"
-    require_relative "protos/swap/on"
-    require_relative "protos/swap/off"
-
-    require_relative "protos/tabs"
-    require_relative "protos/tabs/tab"
-
-    require_relative "protos/table"
-    require_relative "protos/table/caption"
-    require_relative "protos/table/header"
-    require_relative "protos/table/head"
-    require_relative "protos/table/body"
-    require_relative "protos/table/footer"
-    require_relative "protos/table/row"
-    require_relative "protos/table/cell"
-
-    require_relative "protos/toast"
-    require_relative "protos/toast/close_button"
-
-    require_relative "protos/timeline"
-    require_relative "protos/timeline/item"
-    require_relative "protos/timeline/left"
-    require_relative "protos/timeline/center"
-    require_relative "protos/timeline/right"
-
-    require_relative "protos/typography"
-    require_relative "protos/typography/heading"
-    require_relative "protos/typography/paragraph"
-    require_relative "protos/typography/inline_link"
-
-    # Dependent
-    require_relative "protos/dropdown"
-    require_relative "protos/dropdown/item"
-    require_relative "protos/dropdown/menu"
-    require_relative "protos/dropdown/trigger"
-
-    require_relative "protos/combobox"
-  end
 end
+
+require_relative "protos/version"
+require_relative "protos/types"
+require_relative "protos/token_list"
+require_relative "protos/component"
+require_relative "protos/theme"
+require_relative "protos/attributes"
+
+# Components
+require_relative "protos/accordion"
+require_relative "protos/accordion/item"
+
+require_relative "protos/alert"
+require_relative "protos/alert/actions"
+require_relative "protos/alert/icon"
+
+require_relative "protos/avatar"
+
+require_relative "protos/breadcrumbs"
+require_relative "protos/breadcrumbs/crumb"
+
+require_relative "protos/card"
+require_relative "protos/card/body"
+require_relative "protos/card/title"
+require_relative "protos/card/actions"
+require_relative "protos/card/image"
+
+require_relative "protos/carousel"
+require_relative "protos/carousel/item"
+require_relative "protos/carousel/actions"
+
+require_relative "protos/chat_bubble"
+require_relative "protos/chat_bubble/content"
+require_relative "protos/chat_bubble/image"
+require_relative "protos/chat_bubble/header"
+require_relative "protos/chat_bubble/footer"
+
+require_relative "protos/collapse"
+require_relative "protos/collapse/title"
+require_relative "protos/collapse/content"
+
+require_relative "protos/command"
+require_relative "protos/command/input"
+require_relative "protos/command/dialog"
+require_relative "protos/command/group"
+require_relative "protos/command/list"
+require_relative "protos/command/trigger"
+require_relative "protos/command/title"
+require_relative "protos/command/item"
+require_relative "protos/command/empty"
+
+require_relative "protos/drawer"
+require_relative "protos/drawer/side"
+require_relative "protos/drawer/trigger"
+require_relative "protos/drawer/content"
+
+require_relative "protos/hero"
+require_relative "protos/hero/content"
+require_relative "protos/hero/overlay"
+
+require_relative "protos/list"
+require_relative "protos/list/item"
+
+require_relative "protos/modal"
+require_relative "protos/modal/close_button"
+require_relative "protos/modal/dialog"
+require_relative "protos/modal/trigger"
+
+require_relative "protos/popover"
+require_relative "protos/popover/trigger"
+require_relative "protos/popover/content"
+
+require_relative "protos/stats"
+require_relative "protos/stats/actions"
+require_relative "protos/stats/description"
+require_relative "protos/stats/figure"
+require_relative "protos/stats/stat"
+require_relative "protos/stats/title"
+require_relative "protos/stats/value"
+
+require_relative "protos/steps"
+require_relative "protos/steps/step"
+
+require_relative "protos/swap"
+require_relative "protos/swap/on"
+require_relative "protos/swap/off"
+
+require_relative "protos/tabs"
+require_relative "protos/tabs/tab"
+
+require_relative "protos/table"
+require_relative "protos/table/caption"
+require_relative "protos/table/header"
+require_relative "protos/table/head"
+require_relative "protos/table/body"
+require_relative "protos/table/footer"
+require_relative "protos/table/row"
+require_relative "protos/table/cell"
+
+require_relative "protos/toast"
+require_relative "protos/toast/close_button"
+
+require_relative "protos/timeline"
+require_relative "protos/timeline/item"
+require_relative "protos/timeline/left"
+require_relative "protos/timeline/center"
+require_relative "protos/timeline/right"
+
+require_relative "protos/typography"
+require_relative "protos/typography/heading"
+require_relative "protos/typography/paragraph"
+require_relative "protos/typography/inline_link"
+
+# Dependent
+require_relative "protos/dropdown"
+require_relative "protos/dropdown/item"
+require_relative "protos/dropdown/menu"
+require_relative "protos/dropdown/trigger"
+
+require_relative "protos/combobox"
+
+require_relative "protos/engine" if defined?(Rails)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: protos
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.5.0
 platform: ruby
 authors:
 - Nolan J Tait
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-04-30 00:00:00.000000000 Z
+date: 2024-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-core
@@ -220,7 +220,7 @@ requirements:
 - tailwindcss
 - daisyui
 - protos-stimulus
-rubygems_version: 3.5.7
+rubygems_version: 3.5.18
 signing_key:
 specification_version: 4
 summary: A UI component library built with phlex and daisyui