Customizing components

When theming doesn't suffice, RubyUI allows you to tailor the components to your specific needs.

Introduction

While theming provides a powerful tool for modifying aspects such as fonts, brand colors, and border attributes, there may be instances where you need to directly customize the components. RubyUI is designed to facilitate this process with ease.

Updating attributes & classes

All components accept any HTML attribute, and will pass it through to the underlying HTML element. This is great for quick changes, or when you need to add a custom class for a one off situation.

Adding attributes

By default, attribute values are added to the existing values of the component. For instance, if you want to make a button span the full width of its container, you can do it like this: Button(class: 'w-full'). This will add the w-full class to the button, causing it to span the full width of its container.

Overriding Classes

There might be instances where you need to override a specific style attribute. For instance, if you wish to alter the color of a button while keeping the rest of the styles intact, you can achieve this as follows: Button(class: '!bg-red-500'). This will replace the default background color with red by utilizing the !important modifier.

Replacing Attributes

In some rare cases, you might need to replace the default value of an attribute entirely. For instance, if you want to change all the styles of a button, you can do it as follows: Button(class!: 'bg-red-500 text-white py-2 px-4 font-medium hover:bg-red-600'). This will override all the default classes and apply only the ones you specify. In this case, it will apply bg-red-500 text-white py-2 px-4 font-medium hover:bg-red-600.

Redefining components

Redefining components is a powerful concept that allows you to redefine the underlying components through inheritance, or completely. This is useful when you need to make more complex changes to the components, that can't be achieved with attributes and classes alone. In other words, you can change the whole damn thing if you like.

How it works

To redefine a component, find the component you want to redefine in the source code, and copy it into your application. Then, make the changes you need. For example, if you want to change the button component, you can copy the button component from the source code, and paste it into your application. Then, you can make the changes you need.

Let's redefine the Alert component

Let's say you want to change the alert component to use a particular icon every time it is rendered. You can do this by redefining the component as follows:

# frozen_string_literal: true

module PhlexUI
	class Alert < Base
		def initialize(variant: nil, **attrs)
			@variant = variant
			super(**attrs) # must be called after variant is set
		end

		def view_template(&block)
			div(**attrs, &block)
		end

		private

		def colors
			case @variant
			when nil then 'ring-border bg-muted/20 text-foreground [&>svg]:opacity-80'
			when :warning then 'ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80'
			when :success then 'ring-success/20 bg-success/5 text-success [&>svg]:text-success/80'
			when :destructive then 'ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80'
			end
		end

		def default_attrs
			base_classes = 'backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8'
			{
				class: [base_classes, colors],
			}
		end
	end
end