@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/pagination/_pagination.scss

@@ -24,7 +24,7 @@
 /// @group pagination
 @mixin pagination {
   .#{$prefix}--data-table-container + .#{$prefix}--pagination {
-    border-top: 0;
+    border-block-start: 0;
   }
 
   .#{$prefix}--pagination {
@@ -32,12 +32,12 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    width: calc(100% - 1px);
-    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: space-between;
-    border-top: 1px solid $border-subtle;
     background-color: $layer;
+    border-block-start: 1px solid $border-subtle;
+    inline-size: calc(100% - 1px);
+    min-block-size: convert.to-rem(40px);
     overflow-x: auto;
 
     @include breakpoint('md') {
@@ -66,37 +66,39 @@
   }
 
   .#{$prefix}--pagination--sm {
-    min-height: convert.to-rem(32px);
+    min-block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--pagination--lg {
-    min-height: convert.to-rem(48px);
+    min-block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--pagination .#{$prefix}--select {
-    height: 100%;
     align-items: center;
+    block-size: 100%;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper {
     display: flex;
-    height: 100%;
+    block-size: 100%;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input {
     @include type-style('body-compact-01');
 
-    width: auto;
-    min-width: auto;
-    height: 100%;
+    block-size: 100%;
+
+    inline-size: auto;
     line-height: convert.to-rem(40px);
+
+    min-inline-size: auto;
   }
 
   // Extra specificity is needed to preserve padding
   .#{$prefix}--pagination
     .#{$prefix}--select--inline
     .#{$prefix}--select-input {
-    padding: 0 2.25rem 0 $spacing-05;
+    padding-inline: $spacing-05 2.25rem;
   }
 
   .#{$prefix}--pagination--sm .#{$prefix}--select-input {
@@ -126,30 +128,30 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
-    top: 50%;
+    inset-block-start: 50%;
     transform: translate(-0.5rem, -50%);
   }
 
   .#{$prefix}--pagination
     .#{$prefix}--select__item-count
     .#{$prefix}--select-input {
-    border-right: 1px solid $border-subtle;
+    border-inline-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--pagination__right {
-    border-left: 1px solid $border-subtle;
+    border-inline-start: 1px solid $border-subtle;
   }
 
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: 100%;
     align-items: center;
+    block-size: 100%;
   }
 
   .#{$prefix}--pagination__left > .#{$prefix}--form-item,
   .#{$prefix}--pagination__right > .#{$prefix}--form-item {
-    height: 100%;
+    block-size: 100%;
   }
 
   .#{$prefix}--pagination__left .#{$prefix}--pagination__text,
@@ -158,18 +160,18 @@
   }
 
   .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
-    margin-right: convert.to-rem(1px);
+    margin-inline-end: convert.to-rem(1px);
   }
 
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
-    margin-right: 1rem;
-    margin-left: convert.to-rem(1px);
+    margin-inline-end: 1rem;
+    margin-inline-start: convert.to-rem(1px);
   }
 
   .#{$prefix}--pagination__right
     .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
-    margin-right: convert.to-rem(1px);
-    margin-left: 1rem;
+    margin-inline-end: convert.to-rem(1px);
+    margin-inline-start: 1rem;
   }
 
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
@@ -191,8 +193,8 @@
   }
 
   span.#{$prefix}--pagination__text {
-    margin-left: $spacing-05;
     color: $text-primary;
+    margin-inline-start: $spacing-05;
   }
 
   span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
@@ -204,17 +206,17 @@
     @include component-reset.reset;
 
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
-    min-height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
-    border-left: 1px solid $border-subtle;
     margin: 0;
     background: none;
+    block-size: convert.to-rem(40px);
+    border-inline-start: 1px solid $border-subtle;
     cursor: pointer;
     fill: $icon-primary;
+    inline-size: convert.to-rem(40px);
+    min-block-size: convert.to-rem(32px);
     transition: outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
@@ -224,25 +226,30 @@
     margin-block-start: 0;
   }
 
+  [dir='rtl'] .#{$prefix}--pagination__button > svg,
+  [dir='rtl'] .#{$prefix}--btn--ghost.#{$prefix}--pagination__button > svg {
+    transform: rotate(0.5turn);
+  }
+
   .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--sm
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    width: convert.to-rem(32px);
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--lg
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    width: convert.to-rem(48px);
-    height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
+    inline-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');
 
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   .#{$prefix}--pagination__button:hover,
@@ -268,8 +275,8 @@
 
   // Skeleton state
   .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text {
-    margin-right: 1rem;
-    margin-bottom: 0;
+    margin-block-end: 0;
+    margin-inline-end: 1rem;
   }
 
   // Windows HCM fix
@@ -278,4 +285,9 @@
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
     @include high-contrast-mode('outline');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--pagination .#{$prefix}--select__arrow {
+    transform: translate(0.5rem, -50%);
+  }
 }

package/scss/components/pagination/_unstable_pagination.scss

@@ -25,13 +25,13 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    width: 100%;
-    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: space-between;
-    border-top: 1px solid $border-subtle;
-    border-bottom: 1px solid transparent;
     background-color: $layer;
+    border-block-end: 1px solid transparent;
+    border-block-start: 1px solid $border-subtle;
+    inline-size: 100%;
+    min-block-size: convert.to-rem(40px);
   }
 
   .#{$prefix}--unstable-pagination__text {
@@ -46,8 +46,8 @@
   .#{$prefix}--unstable-pagination__left,
   .#{$prefix}--unstable-pagination__right {
     display: flex;
-    height: 100%;
     align-items: center;
+    block-size: 100%;
   }
 
   .#{$prefix}--unstable-pagination__left {
@@ -56,44 +56,44 @@
 
   .#{$prefix}--unstable-pagination__left > .#{$prefix}--form-item,
   .#{$prefix}--unstable-pagination__right > .#{$prefix}--form-item {
-    height: 100%;
+    block-size: 100%;
   }
 
   .#{$prefix}--unstable-pagination__left
     .#{$prefix}--unstable-pagination__text {
-    margin-right: convert.to-rem(1px);
+    margin-inline-end: convert.to-rem(1px);
   }
 
   .#{$prefix}--unstable-pagination__right
     .#{$prefix}--unstable-pagination__text {
-    margin-right: $spacing-05;
-    margin-left: convert.to-rem(1px);
+    margin-inline-end: $spacing-05;
+    margin-inline-start: convert.to-rem(1px);
   }
 
   .#{$prefix}--unstable-pagination__button {
     @include component-reset.reset;
 
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
-    min-height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
-    border-left: 1px solid $border-subtle;
     margin: 0;
     background: none;
+    block-size: convert.to-rem(40px);
+    border-inline-start: 1px solid $border-subtle;
     color: $icon-primary;
     cursor: pointer;
     fill: $icon-primary;
+    inline-size: convert.to-rem(40px);
+    min-block-size: convert.to-rem(32px);
     transition: outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 
   // Unset height/width set by icon-only button:
   .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon {
-    width: initial;
-    height: initial;
+    block-size: initial;
+    inline-size: initial;
   }
 
   .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
@@ -124,8 +124,8 @@
 
   .#{$prefix}--unstable-pagination__page-selector,
   .#{$prefix}--unstable-pagination__page-sizer {
-    height: 100%;
     align-items: center;
+    block-size: 100%;
   }
 
   .#{$prefix}--unstable-pagination__page-selector
@@ -133,18 +133,20 @@
   .#{$prefix}--unstable-pagination__page-sizer
     .#{$prefix}--select-input--inline__wrapper {
     display: flex;
-    height: 100%;
+    block-size: 100%;
   }
 
   .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select-input,
   .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input {
     @include type-style('body-short-01');
 
-    width: auto;
-    min-width: auto;
-    height: 100%;
     padding: 0 2.25rem 0 $spacing-05;
+    block-size: 100%;
+
+    inline-size: auto;
     line-height: convert.to-rem(40px);
+
+    min-inline-size: auto;
   }
 
   .#{$prefix}--unstable-pagination__page-selector
@@ -155,19 +157,19 @@
 
   .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow,
   .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select__arrow {
-    top: 50%;
+    inset-block-start: 50%;
     transform: translateY(-50%);
 
     @include breakpoint('md') {
-      right: $spacing-05;
+      inset-inline-end: $spacing-05;
     }
   }
 
   .#{$prefix}--unstable-pagination__page-selector {
-    border-left: 1px solid $border-subtle;
+    border-inline-start: 1px solid $border-subtle;
   }
 
   .#{$prefix}--unstable-pagination__page-sizer {
-    border-right: 1px solid $border-subtle;
+    border-inline-end: 1px solid $border-subtle;
   }
 }

package/scss/components/pagination-nav/_mixins.scss

@@ -17,13 +17,13 @@
   &:not(.#{$prefix}--pagination-nav__page--direction) {
     &::after {
       position: absolute;
-      bottom: 0;
-      left: 50%;
       display: block;
-      width: 0;
-      height: $spacing-02;
       background-color: $border-interactive;
+      block-size: $spacing-02;
       content: '';
+      inline-size: 0;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
       opacity: 0;
       transition: width $duration-fast-02 motion(standard, productive);
 
@@ -35,8 +35,8 @@
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$spacing-05 * 0.5});
-    width: $spacing-05;
+    inline-size: $spacing-05;
+    inset-inline-start: calc(50% - #{$spacing-05 * 0.5});
     opacity: 1;
   }
 }

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -61,11 +61,11 @@
     padding: $item-padding;
 
     &:first-child {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
 
     &:last-child {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
   }
 
@@ -75,12 +75,12 @@
 
     position: relative;
     display: block;
-    min-width: $button-min-width;
     padding: $button-padding;
     border-radius: 0;
     color: $text-primary;
     font-weight: $font-weight;
     line-height: 1;
+    min-inline-size: $button-min-width;
     outline: 0;
     text-align: center;
     text-decoration: none;
@@ -121,10 +121,10 @@
 
   .#{$prefix}--pagination-nav__page--direction {
     display: flex;
-    width: $button-direction-size;
-    height: $button-direction-size;
     align-items: center;
     justify-content: center;
+    block-size: $button-direction-size;
+    inline-size: $button-direction-size;
     line-height: 0;
   }
 
@@ -133,8 +133,8 @@
   }
 
   .#{$prefix}--pagination-nav__page--select {
-    max-height: $button-min-width;
     appearance: none;
+    max-block-size: $button-min-width;
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
     @-moz-document url-prefix() {
@@ -144,9 +144,9 @@
 
   .#{$prefix}--pagination-nav__select-icon-wrapper {
     position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
+    inset-block-start: 0;
     pointer-events: none;
 
     @include pseudo-underline();
@@ -160,12 +160,17 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position * 0.5});
-    left: calc(50% - #{$select-icon-top-position * 0.5});
+    inset-block-start: calc(50% - #{$select-icon-top-position * 0.5});
+    inset-inline-start: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }
 
   .#{$prefix}--pagination-nav__accessibility-label {
     @include visually-hidden;
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--pagination-nav__list-item svg {
+    transform: rotate(0.5turn);
+  }
 }