Update class names from left, right to start, end (#2402)

.changeset/blue-spoons-sleep.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update class names from `*-left`, `*-right` to `*-start`, `*-end`

core/scss/layout/_navbar.scss

@@ -160,7 +160,8 @@ Navbar
         &.navbar-vertical {
           box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
 
-          &.navbar-right {
+          &.navbar-right,
+          &.navbar-end {
             box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
           }
         }
@@ -172,7 +173,8 @@ Navbar
           }
         }
 
-        &.navbar-vertical.navbar-right {
+        &.navbar-vertical.navbar-right,
+        &.navbar-vertical.navbar-end {
           ~ .navbar,
           ~ .page-wrapper {
             margin-left: 0;
@@ -322,7 +324,8 @@ Navbar vertical
             overflow-y: scroll;
             padding: 0;
 
-            &.navbar-right {
+            &.navbar-right,
+            &.navbar-end {
               left: auto;
               right: 0;
             }
@@ -364,7 +367,8 @@ Navbar vertical
               }
             }
 
-            &.navbar-right ~ .page {
+            &.navbar-right ~ .page,
+            &.navbar-end ~ .page {
               padding-left: 0;
               padding-right: $sidebar-width;
             }

core/scss/ui/_buttons.scss

@@ -38,7 +38,8 @@
     margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
   }
 
-  .icon-right {
+  .icon-right,
+  .icon-end {
     margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
   }
 

core/scss/ui/_cards.scss

@@ -215,11 +215,13 @@ Stacked card
 }
 
 // Card rotate
-.card-rotate-left {
+.card-rotate-left,
+.card-rotate-start {
   transform: rotate(-1.5deg);
 }
 
-.card-rotate-right {
+.card-rotate-right,
+.card-rotate-end {
   transform: rotate(1.5deg);
 }
 

core/scss/ui/_switch-icon.scss

@@ -122,7 +122,9 @@
 // Slide variant
 .switch-icon-slide-up,
 .switch-icon-slide-left,
+.switch-icon-slide-start,
 .switch-icon-slide-right,
+.switch-icon-slide-end,
 .switch-icon-slide-down {
   overflow: hidden;
 
@@ -150,7 +152,8 @@
   }
 }
 
-.switch-icon-slide-left {
+.switch-icon-slide-left,
+.switch-icon-slide-start {
   .switch-icon-a {
     transform: translateX(0);
   }
@@ -170,7 +173,8 @@
   }
 }
 
-.switch-icon-slide-right {
+.switch-icon-slide-right,
+.switch-icon-slide-end {
   .switch-icon-a {
     transform: translateX(0);
   }

docs/content/ui/components/badges.md

@@ -100,12 +100,12 @@ You can use icons in badges to make them more visually appealing. The example be
 You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
 
 {% capture html -%}
-{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
+{% include "ui/badge.html" text="Star" icon-end="arrow-right" -%}
+{% include "ui/badge.html" text="Heart" icon-end="arrow-right" -%}
+{% include "ui/badge.html" text="Check" icon-end="arrow-right" -%}
+{% include "ui/badge.html" text="X" icon-end="arrow-right" -%}
+{% include "ui/badge.html" text="Plus" icon-end="arrow-right" -%}
+{% include "ui/badge.html" text="Minus" icon-end="arrow-right" -%}
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 

docs/content/ui/components/switch-icon.md

@@ -175,7 +175,7 @@ You can also add a fancy animation to add variety to your button. See demo below
     </svg>
   </span>
 </button>
-<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
+<button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-secondary">
     <svg
       xmlns="http://www.w3.org/2000/svg"

preview/pages/cards.html

@@ -62,13 +62,13 @@ permalink: cards.html
 	</div>
 
 	<div class="col-md-6 col-lg-3">
-		<div class="card card-rotate-right">
-			<div class="card-body">Card rotate right</div>
+		<div class="card card-rotate-end">
+			<div class="card-body">Card rotate end</div>
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		<div class="card card-rotate-left">
-			<div class="card-body">Card rotate left</div>
+		<div class="card card-rotate-start">
+			<div class="card-body">Card rotate start</div>
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
@@ -127,7 +127,7 @@ permalink: cards.html
 		{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
 	</div>
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card.html" status-left="primary" title="Card with side status" %}
+		{% include "cards/card.html" status-start="primary" title="Card with side status" %}
 	</div>
 
 	<div class="col-md-6 col-lg-3">

preview/pages/emails.html

@@ -57,7 +57,7 @@ permalink: emails.html
 				<div class="row g-0">
 					<div class="col-6">
 						<div class="p-6 bg-surface-secondary rounded-start">
-							<img src="" class="img-fluid rounded-left" data-email-image />
+							<img src="" class="img-fluid rounded-start" data-email-image />
 						</div>
 					</div>
 					<div class="col-6">

preview/pages/form-layout.html

@@ -103,7 +103,7 @@ page-libs: [litepicker]
 								</div>
 
 								<div>
-									{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
+									{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
 								</div>
 							</div>
 						</form>
@@ -148,7 +148,7 @@ page-libs: [litepicker]
 										{% include "ui/form/check.html" title="Remember me" class="m-0" %}
 									</div>
 									<div class="col-auto">
-										{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
+										{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
 									</div>
 								</div>
 							</div>

preview/pages/layout-vertical-right.html

@@ -1,8 +1,8 @@
 ---
 page-header: Right vertical layout
-page-menu: layout.vertical-right
+page-menu: layout.vertical-end
 layout-sidebar: true
-layout-sidebar-right: true
+layout-sidebar-end: true
 layout-hide-topbar: true
 layout: homepage
 permalink: layout-vertical-right.html

shared/includes/cards/card.html

@@ -14,8 +14,8 @@
 			<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
 		{% elsif include.status-bottom %}
 			<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
-		{% elsif include.status-left %}
-			<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
+		{% elsif include.status-start %}
+			<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
 		{% endif %}
 
 		{% if include.header or include.header-title or include.header-tabs or include.header-pills %}

shared/includes/cards/profile-timeline.html

@@ -13,7 +13,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">4 min</small>
+						<small class="float-end text-secondary">4 min</small>
 						<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
 					</div>
 
@@ -55,7 +55,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">12 min</small>
+						<small class="float-end text-secondary">12 min</small>
 						<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
 					</div>
 					<div>
@@ -72,7 +72,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">34 min</small>
+						<small class="float-end text-secondary">34 min</small>
 						<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
 					</div>
 

shared/includes/cards/small-stats-2.html

@@ -13,7 +13,7 @@
 
 <div class="card" data-color={{color}}>
 	<div class="card-body">
-		<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
+		<div class="float-end avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
 			{% include "ui/icon.html" icon=icon %}
 		</div>
 		<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>

shared/includes/cards/small-stats.html

@@ -25,7 +25,7 @@
 						{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
 					{% endif %}
 					{% if include.description-value %}
-					<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
+					<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
 					{% endif %}
 				</div>
 				<div class="text-secondary">

shared/includes/cards/table-users.html

@@ -30,10 +30,10 @@
 				</td>
 				<td>
 					<div class="clearfix">
-						<div class="float-left">
+						<div class="float-start">
 							<strong>{{ percentage }}%</strong>
 						</div>
-						<div class="float-right">
+						<div class="float-end">
 							<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
 						</div>
 					</div>

shared/includes/layout/sidebar.html

@@ -1,6 +1,6 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
-<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
+<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	<div class="container-fluid">
 		{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
 

shared/includes/marketing/sections/cta.html

@@ -4,7 +4,7 @@
 		<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
 		<div class="btn-list justify-content-center mt-6">
 			{% include "ui/button.html" text="Get started" color="primary" %}
-			{% include "ui/button.html" text="Learn more" ghost=true icon-right="chevron-right" %}
+			{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
 		</div>
 	</div>
 </section>

shared/includes/parts/demo-layout.html

@@ -12,7 +12,7 @@
 			<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
 			{% endif %}
 		</div>
-		{% if config.sidebar-right %}
+		{% if config.sidebar-end %}
 		<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
 		{% endif %}
 	</div>

shared/includes/ui/button.html

@@ -24,6 +24,6 @@
 {% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
 {% unless include.icon-only %}
 {{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
-{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
+{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
 {% endunless %}
 </{{ e }}>

shared/layouts/default.html

@@ -7,7 +7,7 @@ layout: base
 <div class="page">
 	{% if layout-sidebar %}
 		<!--  BEGIN SIDEBAR  -->
-		{% include "layout/sidebar.html" dark=layout-sidebar-dark right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
+		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
 		<!--  END SIDEBAR  -->
 	{% endif %}