This release contains significant breaking changes. Check your component styles carefully when upgrading.

Added

• Add :type option to modifiers, so that any attribute type can be used instead of only strings.

Changed

• Rename mix dog.classes to mix dog.safelist.
• Rename Doggo.classes/1 to Doggo.safelist/1.
• Include data attributes in mix dog.safelist and Doggo.safelist/1 output.
• Use data- attributes instead of classes for modifiers (see upgrade guide below).
• button_link component
  • Remove disabled_class option.
  • Use data-disabled attribute instead of the disabled_class (selector: [data-disabled]).
• field component
  • Remove addon_left_class, addon_right_class, and visually_hidden_class options.
  • Use data-addon attribute instead of addon_left_class and addon_right_class (selectors: [data-addon~="left"], [data-addon~="right"]).
  • Use data-visually-hidden attribute instead of visually_hidden_class (selector: [data-visually-hidden]).
  • Use data-invalid attribute instead of has-errors class (selector: [data-invalid]).
  • Use data-state attribute instead of {base_class}-switch-state-{on|off} classes (selectors: [data-state="on"], [data-state="off"]).
• frame and image component
  • Make ratio required for frame component.
  • Change format of ratio attribute (before: 16-by-9, after: 16:9).
  • Use data-numerator and data-denominator attributes instead of adding a class for the ratio (before: class="is-16-by-9", after: data-numerator="16" data-denominator="9").
• icon and icon_sprite component
  • Remove text_position_after_class, text_position_before_class, text_position_hidden_class, and visually_hidden_class options.
  • Use data-text-position class instead of text_position_* classes (selectors: [data-text-position="before"], [data-text-position="after"], [data-text-position="hidden"]).
  • Use data-visually-hidden attribute instead of visually_hidden_class (selector: [data-visually-hidden]).
• stack component
  • Remove recursive_class option.
  • Use data-recursive attribute instead of recursive_class (selector: [data-recursive]).
• steps component
  • Remove current_class, completed_class, upcoming_class, and visually_hidden_class options.
  • Use data-visually-hidden attribute instead of visually_hidden_class (selector: [data-visually-hidden]).
  • Use data-state attribute instead of current_class, completed_class, and upcoming_class (selectors: [data-state="current"], [data-state="completed"], [data-state="upcoming"]).

Removed

• Remove class_name_fun option.
• Remove Doggo.modifier_class_name/2.

Upgrade Guide

In previous versions, modifier attribute values would be reflected with CSS classes in the HTML output.

For example, if you had a tag component with a size modifier like this:

build_tag(
  modifiers: [
    size: [values: ["small", "medium", "large"], default: "medium"]
  ]
)

And you used it like:

<.tag size="small">Hello</.tag>

This would result in the addition of an is-small class.

<span class="tag is-small">Hello</span>

The implementation was changed to use separate data attributes for each modifier instead. Now, the generated HTML will look like this:

<span class="tag" data-size="small">Hello</span>

In your CSS styles, you will need to change the selectors accordingly.

Before:

.tag.is-small {
}

After:

.tag[data-size="small"] {
}