Do not prevent users of older bitstyles from using u-gap-l

bitcrowd · Jul 8, 2024 · c9e1f48 · c9e1f48
1 parent 15d7c55
commit c9e1f48
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 30 deletions.
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -19,6 +19,12 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
+  # Note about class renaming:
+  # A renaming of "class-name-A" (newer) to "class-name-B" (older) can only be done via this module if
+  # the "class-name-A" does not also exist in older versions of bitstyles with a different meaning.
+  # If it does exist, then doing this renaming in the classname/2 function would make it impossible
+  # for users of older bitstyles to use the "class-name-A" classname.
+
   def classname(class, version) when version >= "5.0.0" do
     class
   end
@@ -54,7 +60,6 @@ defmodule BitstylesPhoenix.Bitstyles do
       case class do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
-        "u-gap-l" -> "u-gap-m"
         "u-fg-text" -> "u-fg-gray-30"
         "u-fg-text-darker" -> "u-fg-gray-50"
         "u-bg-gray-darker" -> "u-bg-gray-80"

diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.DescriptionList do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The description list components.
@@ -16,28 +17,52 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         ...> </.ui_dl>
         ...> """
     ''',
-    '''
-        """
-        <dl class="a-dl">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Length
-            </dt>
-            <dd class="u-col-span-2">
-              8
-            </dd>
-          </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Inserted at
-            </dt>
-            <dd class="u-col-span-2">
-              2007-01-02
-            </dd>
-          </div>
-        </dl>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      '''
+    ],
     module: true,
     width: "100%"
   )
@@ -63,23 +88,23 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     '''
         """
         <dl class="a-dl extra" data-foo="baz">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l u-fg-brand-2">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
               8
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
               Tag
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               <pre>
                 Tag
@@ -133,10 +158,22 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
   """
   def ui_dl_item(assigns) do
     extra = assigns_to_attributes(assigns, [:class, :label, :value])
-    assigns = assign(assigns, extra: extra)
+
+    # u-gap-l and u-gap-xl in 5.0.0 are equivalent to respectively u-gap-m and u-gap-l in 4.3.0
+    gap_class =
+      if Bitstyles.version() >= "5.0.0" do
+        "u-gap-l"
+      else
+        "u-gap-m"
+      end
+
+    assigns =
+      assigns
+      |> assign(extra: extra)
+      |> assign(gap_class: gap_class)
 
     ~H"""
-      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline", assigns[:class]])} {@extra}>
+      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline",  assigns[:gap_class], assigns[:class]])} {@extra}>
         <%= if assigns[:label] do %>
           <.ui_dt><%= @label %></.ui_dt>
           <.ui_dd><%= assigns[:value] || render_slot(@inner_block) %></.ui_dd>

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -37,7 +37,6 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
       assert classname("u-list-none", "5.0.0") == "u-list-none"
       assert classname("a-badge--text", "5.0.0") == "a-badge--text"
-      assert classname("u-gap-l", "5.0.0") == "u-gap-l"
       assert classname("u-fg-text", "5.0.0") == "u-fg-text"
       assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
       assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
@@ -72,7 +71,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
       assert classname("u-list-none", "4.3.0") == "a-list-reset"
       assert classname("a-badge--text", "4.3.0") == "a-badge--gray"
-      assert classname("u-gap-l", "4.3.0") == "u-gap-m"
+      assert classname("u-gap-l", "4.3.0") == "u-gap-l"
       assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
       assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
       assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"