Upgrade bitstyles to 6.0.0

CHANGELOG.md

@@ -3,7 +3,14 @@
 ## Unreleased
 
 - Switched bitstyles version comparisons from string comparisons to tuple comparisons, which will ensure correct output if bitstyles version ever contains a number above 9.
-- Modified the process of downgrading classnames to the target bitstyles version by chaining renames. This is necessary preparation work to support bitstyles 6.0.0.
+- Modified the process of downgrading classnames to the target bitstyles version by chaining renames. This is necessary preparation work to support bitstyles `v6.0.0`.
+- Added support for bitstyles `v6.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v6.0.0`.
+
+### How to migrate to bitstyles `v6.0.0`
+
+Follow the [bitstyles changelog](https://github.com/bitcrowd/bitstyles/blob/main/CHANGELOG.md#600---2023-06-08) for version 6.0.0.
+
+There are no changes to bitstyles_phoenix component APIs.
 
 ## v2.4.0 - 2024-07-18
 

README.md

@@ -10,7 +10,7 @@ Basic helpers for [bitstyles](https://github.com/bitcrowd/bitstyles) for elixir
 
 Bitstyles must be installed separately into the asset generation. The helpers in this project just output classes for working with bitstyles.
 
-Bitstyles versions from 5.0.1 down to 1.3.0 are supported.
+Bitstyles versions from 6.0.0 down to 1.3.0 are supported.
 
 ## Installation
 

lib/bitstyles_phoenix.ex

@@ -109,7 +109,7 @@ defmodule BitstylesPhoenix do
 
   You can control how required labels are rendered. By default you will get this appended to your labels if the input is required:
   ```html
-    <span aria-hidden="true" class="u-fg-warning u-margin-xss-left">*</span>
+    <span aria-hidden="true" class="u-fg-warning u-margin-s4s-left">*</span>
   ```
 
   You can override it by specifying your own component to render the required labels. The component will get the form and the field as assigns, as well as any optional parameters you pass in the MFA as `@opts`.

lib/bitstyles_phoenix/alpine3/dropdown.ex

@@ -56,7 +56,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
@@ -112,7 +112,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1

lib/bitstyles_phoenix/alpine3/sidebar.ex

@@ -40,9 +40,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
         ...>     </.ui_sidebar_nav>
         ...>   </:sidebar_content>
-        ...>   <:main :let={s} class="u-margin-s-top">
+        ...>   <:main :let={s} class="u-margin-s2-top">
         ...>     <.ui_content class="flex">
-        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s-right"/>
+        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s2-right"/>
         ...>       Main Content
         ...>     </.ui_content>
         ...>   </:main>
@@ -54,27 +54,27 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
                     bitcrowd
                   </span>
                 </a>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
-                  <li class="u-margin-xs-bottom u-flex">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
@@ -94,13 +94,13 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </button>
                   </div>
                 </div>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
-                  <li class="u-margin-xs-bottom u-flex">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
@@ -109,9 +109,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
               </div>
             </nav>
           </header>
-          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
+          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s2-top">
             <div class="a-content flex">
-              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s-right" title="Open sidebar">
+              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s2-right" title="Open sidebar">
                 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-hamburger">
                   </use>

lib/bitstyles_phoenix/bitstyles.ex

@@ -27,7 +27,7 @@ defmodule BitstylesPhoenix.Bitstyles do
   # for users of older bitstyles to use the "class-name-A" classname.
 
   defp downgrade_classname(class, target_version, _current_version)
-       when target_version > {5, 0, 1} do
+       when target_version > {6, 0, 0} do
     IO.warn("Version #{Version.to_string(target_version)} of bitstyles is not yet supported")
     class
   end
@@ -37,6 +37,57 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
+  defp downgrade_classname(class, target_version, {6, 0, 0}) do
+    # downgrading 6.0.0 -> 5.0.1
+    sizes_renaming = %{
+      "s7" => "4xs",
+      # 3xs has no size equivalent in new sizing
+      # exact match:
+      "s6" => "2xs",
+      "s5" => "2xs",
+      # exact match:
+      "s4" => "xs",
+      "s3" => "xs",
+      # exact match:
+      "s2" => "s",
+      "s1" => "s",
+      # exact match:
+      "m" => "m",
+      # exact match:
+      "l1" => "l",
+      "l2" => "l",
+      # exact match:
+      "l3" => "xl",
+      "l4" => "xl",
+      "l5" => "xl",
+      # exact match:
+      "l6" => "2xl",
+      # exact match:
+      "l7" => "3xl"
+      # 4xl has no size equivalent in new sizing
+    }
+
+    class =
+      Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+        acc
+        |> String.replace("u-margin-#{new_size}", "u-margin-#{old_size}")
+        |> String.replace("u-margin-neg-#{new_size}", "u-margin-neg-#{old_size}")
+        |> String.replace("u-padding-#{new_size}", "u-padding-#{old_size}")
+        |> String.replace("u-padding-neg-#{new_size}", "u-padding-neg-#{old_size}")
+        |> String.replace("u-gap-#{new_size}", "u-gap-#{old_size}")
+      end)
+
+    class =
+      case class do
+        "u-bg-grayscale-dark-2" -> "u-bg-text-darker"
+        "u-fg-grayscale-dark-2" -> "u-fg-text-darker"
+        "u-fg-grayscale" -> "u-fg-text"
+        class -> class
+      end
+
+    downgrade_classname(class, target_version, {5, 0, 1})
+  end
+
   defp downgrade_classname(class, target_version, {5, 0, 1}) do
     # no changes when downgrading 5.0.1 -> 5.0.0
     downgrade_classname(class, target_version, {5, 0, 0})

lib/bitstyles_phoenix/bitstyles/version.ex

@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles.Version do
   @moduledoc false
 
-  @default_version "5.0.1"
+  @default_version "6.0.0"
 
   def version do
     to_tuple(version_string())

lib/bitstyles_phoenix/component/avatar.ex

@@ -85,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
           <div class="a-avatar">
             <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
-          <span class="u-margin-s-left">
+          <span class="u-margin-s2-left">
             Username
           </span>
         </div>
@@ -114,7 +114,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
         <img {@extra} />
       </div>
       <%= if assigns[:inner_block] do %>
-        <span class={classnames("u-margin-s-left")}>
+        <span class={classnames("u-margin-s2-left")}>
          <%= render_slot(@inner_block) %>
         </span>
       <% end %>

lib/bitstyles_phoenix/component/badge.ex

@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.Badge do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The Badge component.
@@ -27,6 +28,13 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
+          published
+        </span>
+        """
+    ''',
     "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--text">
@@ -53,7 +61,14 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
-    '''
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-1">
+          new
+        </span>
+        """
+    ''',
+    "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--brand-1">
           new
@@ -74,7 +89,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--brand-2">
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-2">
           recommended
         </span>
         """
@@ -93,7 +108,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--danger">
+        <span class="a-badge u-h6 u-font-medium" data-theme="danger">
           deleted
         </span>
         """
@@ -112,23 +127,32 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--text extra-class" data-foo="bar">
+        <span class="a-badge u-h6 u-font-medium extra-class" data-theme="grayscale" data-foo="bar">
           published
         </span>
         """
     '''
   )
 
   def ui_badge(assigns) do
-    variant = assigns[:variant] || "text"
+    extra = assigns_to_attributes(assigns, [:class, :variant])
+
+    {variant_class, extra} =
+      if Bitstyles.Version.version() >= {6, 0, 0} do
+        theme = assigns[:variant] || "grayscale"
+        {nil, Keyword.put_new(extra, :"data-theme", theme)}
+      else
+        variant = assigns[:variant] || "text"
+        {"a-badge--#{variant}", extra}
+      end
 
     class =
       classnames([
-        "a-badge u-h6 u-font-medium a-badge--#{variant}",
+        "a-badge u-h6 u-font-medium",
+        variant_class,
         assigns[:class]
       ])
 
-    extra = assigns_to_attributes(assigns, [:class, :variant])
     assigns = assign(assigns, class: class, extra: extra)
     ~H"<span class={@class} {@extra}><%= render_slot(@inner_block) %></span>"
   end