✨ feat(native list): disc version and ordered list marker left aligned (

#1589) * Create PR for #1584 * feat(styles): add is-inside class to center align lists --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Jan 31, 2025 · 7a058e0 · 7a058e0
1 parent 4290704
commit 7a058e0
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/.changeset/kind-books-reply.md b/.changeset/kind-books-reply.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**styles**: add `is-inside` class to lists (ul & ol) to center alignt the element
diff --git a/packages/core/src/components/bal-list/test/bal-list.native.html b/packages/core/src/components/bal-list/test/bal-list.native.html
@@ -21,6 +21,30 @@ <h2 class="title text-xx-large">Basic</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
+        <section>
+          <ol class="list">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ol>
+        </section>
+        <section class="text-align-center">
+          <ol class="list is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ol>
+        </section>
         <h2 class="title text-xx-large">Bullet Circle</h2>
         <section>
           <ul class="list has-bullet-circle">
@@ -30,6 +54,14 @@ <h2 class="title text-xx-large">Bullet Circle</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-circle is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Check</h2>
         <section>
           <ul class="list has-bullet-check">
@@ -39,6 +71,14 @@ <h2 class="title text-xx-large">Bullet Check</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-check is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Check Circle</h2>
         <section>
           <ul class="list has-bullet-check-circle">
@@ -48,6 +88,14 @@ <h2 class="title text-xx-large">Bullet Check Circle</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-check-circle is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Close</h2>
         <section>
           <ul class="list has-bullet-close">
@@ -57,6 +105,14 @@ <h2 class="title text-xx-large">Bullet Close</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-close is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Arrow Down</h2>
         <section>
           <ul class="list has-bullet-arrow-down">
@@ -66,6 +122,14 @@ <h2 class="title text-xx-large">Bullet Arrow Down</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-arrow-down is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
       </main>
     </bal-doc-app>
   </body>

diff --git a/packages/css/src/core/list.sass b/packages/css/src/core/list.sass
@@ -6,6 +6,11 @@ ul.is-list
   margin-left: 2rem
   +desktop
     margin-bottom: 2rem
+  &.is-inside
+    list-style-position: inside !important
+    margin-left: 0
+    li
+      list-style-position: inside !important
   li
     hyphens: auto
     margin-bottom: 1rem

diff --git a/packages/styles/src/core/list.sass b/packages/styles/src/core/list.sass
@@ -6,6 +6,11 @@ ul.is-list
   margin-left: 2rem
   +desktop
     margin-bottom: 2rem
+  &.is-inside
+    list-style-position: inside !important
+    margin-left: 0
+    li
+      list-style-position: inside !important
   li
     hyphens: auto
     margin-bottom: 1rem