Merge pull request #49 from substancelab/classes_are_additive

Make class arguments additive

Author: koppen

CHANGELOG.md

@@ -12,7 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
-*
+* Extra CSS classes passed to components in the `class` argument are now added to the default classes from the component. This optimizes for minor tweaks and additions, which is likely to be the most common use case. If you need to replace all classes on the root element of the component, pass them in `options[:class]` instead.
 
 ### Removed
 

README.md

@@ -224,6 +224,27 @@ renders
 - **Link**: `Flowbite::Link` (default link styling)
 
 
+## Principles
+
+### CSS classes are additive
+
+Passing classes via the `class` argument to a component adds the classes to the
+default ones instead of replacing them.
+
+```ruby
+render(Component.new(class: "these are added"))
+```
+
+This makes for easier customization of components, where you don't have to
+recreate the entire classlist, ie in order to increase sizes or add margins or
+whatever.
+
+If you want to replace the entire class attribute for a component, pass it as part of the `options` hash, ie
+
+```ruby
+render(Component.new(options: {class: "these replace the classes"}))
+```
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies.

app/components/flowbite/button.rb

@@ -63,7 +63,8 @@ def styles
 
     attr_reader :button_attributes, :size, :style
 
-    def initialize(size: :default, style: :default, **button_attributes)
+    def initialize(class: nil, size: :default, style: :default, **button_attributes)
+      @class = Array.wrap(binding.local_variable_get(:class))
       @size = size
       @style = style
       @button_attributes = button_attributes
@@ -80,7 +81,7 @@ def call
     private
 
     def classes
-      self.class.classes(size: size, state: :default, style: style)
+      self.class.classes(size: size, state: :default, style: style) + @class
     end
 
     def options

app/components/flowbite/input/checkbox.rb

@@ -43,8 +43,8 @@ def call
         )
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
-        super(attribute: attribute, form: form, disabled: disabled, options: options, size: size)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, options: options, size: size)
         @unchecked_value = unchecked_value
         @value = value
       end

app/components/flowbite/input/field.rb

@@ -57,8 +57,9 @@ def styles
         # rubocop:enable Layout/LineLength
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @options = options || {}
@@ -77,7 +78,7 @@ def call
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field

app/components/flowbite/input/hint.rb

@@ -30,16 +30,17 @@ def call
         )
       end
 
-      def initialize(attribute:, form:, options: {})
+      def initialize(attribute:, form:, class: nil, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @form = form
         @options = options
         @object = form.object
       end
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

app/components/flowbite/input/label.rb

@@ -39,8 +39,9 @@ def errors?
         @object.errors.include?(@attribute.intern)
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {})
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @object = form.object
@@ -49,7 +50,7 @@ def initialize(attribute:, form:, disabled: false, options: {})
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

app/components/flowbite/input/radio_button.rb

@@ -37,8 +37,8 @@ def call
         )
       end
 
-      def initialize(attribute:, form:, value:, disabled: false, options: {})
-        super(attribute: attribute, disabled: disabled, form: form, options: options)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, form: form, options: options)
         @value = value
       end
 

app/components/flowbite/input/select.rb

@@ -14,8 +14,8 @@ class Select < Field
         lg: ["px-4", "py-3", "text-base"]
       }.freeze
 
-      def initialize(form:, attribute:, collection: [], disabled: false, include_blank: false, multiple: false, options: {}, size: :default)
-        super(form: form, attribute: attribute, disabled: disabled, options: options, size: size)
+      def initialize(form:, attribute:, class: nil, collection: [], disabled: false, include_blank: false, multiple: false, options: {}, size: :default)
+        super(form: form, attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, options: options, size: size)
         @collection = collection
         @include_blank = include_blank
         @multiple = multiple

app/components/flowbite/input/textarea.rb

@@ -30,7 +30,7 @@ def call
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field