@gitlab/ui 38.5.1 → 38.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.5.1",
+  "version": "38.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/scss/utilities.scss

@@ -4611,6 +4611,18 @@
   max-width: 100vw !important;
 }
 
+.gl-md-max-w-26 {
+  @include gl-media-breakpoint-up(md) {
+    max-width: $gl-spacing-scale-26;
+  }
+}
+
+.gl-md-max-w-26\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: $gl-spacing-scale-26 !important;
+  }
+}
+
 .gl-md-max-w-15p {
   @include gl-media-breakpoint-up(md) {
     max-width: 15%;
@@ -6931,169 +6943,179 @@
 .gl-table-layout-fixed\! {
   table-layout: fixed !important
 }
-.gl-text-left{
-  text-align: left
+.gl-text-left {
+  text-align: left;
+}
+.gl-text-left\! {
+  text-align: left !important;
+}
+.gl-text-center {
+  text-align: center;
 }
-.gl-text-left\!{
-  text-align: left !important
+.gl-text-center\! {
+  text-align: center !important;
 }
-.gl-text-center{
-  text-align: center
+.gl-text-right {
+  text-align: right;
 }
-.gl-text-center\!{
-  text-align: center !important
+.gl-text-right\! {
+  text-align: right !important;
 }
-.gl-text-right{
-  text-align: right
+.gl-reset-text-align {
+  text-align: inherit;
 }
-.gl-text-right\!{
-  text-align: right !important
+.gl-reset-text-align\! {
+  text-align: inherit !important;
 }
-.gl-reset-text-align{
-  text-align: inherit
+.gl-text-decoration-none {
+  text-decoration: none;
 }
-.gl-reset-text-align\!{
-  text-align: inherit !important
+.gl-active-text-decoration-none:active {
+  text-decoration: none;
 }
-.gl-text-decoration-none{
-  text-decoration: none
+.gl-focus-text-decoration-none:focus {
+  text-decoration: none;
 }
-.gl-active-text-decoration-none:active{
-  text-decoration: none
+.gl-hover-text-decoration-none:hover {
+  text-decoration: none;
 }
-.gl-focus-text-decoration-none:focus{
-  text-decoration: none
+.gl-text-decoration-none\! {
+  text-decoration: none !important;
 }
-.gl-hover-text-decoration-none:hover{
-  text-decoration: none
+.gl-active-text-decoration-none\!:active {
+  text-decoration: none !important;
 }
-.gl-text-decoration-none\!{
-  text-decoration: none !important
+.gl-focus-text-decoration-none\!:focus {
+  text-decoration: none !important;
 }
-.gl-active-text-decoration-none\!:active{
-  text-decoration: none !important
+.gl-hover-text-decoration-none\!:hover {
+  text-decoration: none !important;
 }
-.gl-focus-text-decoration-none\!:focus{
-  text-decoration: none !important
+.gl-text-decoration-underline {
+  text-decoration: underline;
 }
-.gl-hover-text-decoration-none\!:hover{
-  text-decoration: none !important
+.gl-text-decoration-underline\! {
+  text-decoration: underline !important;
 }
-.gl-text-decoration-underline{
-  text-decoration: underline
+.gl-reset-text-decoration-color {
+  text-decoration-color: inherit;
 }
-.gl-text-decoration-underline\!{
-  text-decoration: underline !important
+.gl-reset-text-decoration-color\! {
+  text-decoration-color: inherit !important;
 }
-.gl-reset-text-decoration-color{
-  text-decoration-color: inherit
+.gl-text-decoration-color-gray-500 {
+  text-decoration-color: $gray-500;
 }
-.gl-reset-text-decoration-color\!{
-  text-decoration-color: inherit !important
+.gl-text-decoration-color-gray-500\! {
+  text-decoration-color: $gray-500 !important;
 }
-.gl-text-decoration-color-gray-500{
-  text-decoration-color: $gray-500
+.gl-text-decoration-color-gray-700 {
+  text-decoration-color: $gray-700;
 }
-.gl-text-decoration-color-gray-500\!{
-  text-decoration-color: $gray-500 !important
+.gl-text-decoration-color-gray-700\! {
+  text-decoration-color: $gray-700 !important;
 }
-.gl-text-decoration-color-gray-700{
-  text-decoration-color: $gray-700
+.gl-text-decoration-color-gray-900 {
+  text-decoration-color: $gray-900;
 }
-.gl-text-decoration-color-gray-700\!{
-  text-decoration-color: $gray-700 !important
+.gl-text-decoration-color-gray-900\! {
+  text-decoration-color: $gray-900 !important;
 }
-.gl-text-decoration-color-gray-900{
-  text-decoration-color: $gray-900
+.gl-text-transform-none {
+  text-transform: none;
 }
-.gl-text-decoration-color-gray-900\!{
-  text-decoration-color: $gray-900 !important
+.gl-text-transform-none\! {
+  text-transform: none !important;
 }
-.gl-text-transform-none{
-  text-transform: none
+.gl-text-overflow-ellipsis {
+  text-overflow: ellipsis;
 }
-.gl-text-transform-none\!{
-  text-transform: none !important
+.gl-text-overflow-ellipsis\! {
+  text-overflow: ellipsis !important;
 }
-.gl-text-overflow-ellipsis{
-  text-overflow: ellipsis
+.gl-text-indent-0 {
+  text-indent: 0;
 }
-.gl-text-overflow-ellipsis\!{
-  text-overflow: ellipsis !important
+.gl-text-indent-0\! {
+  text-indent: 0 !important;
 }
-.gl-text-indent-0{
-  text-indent: 0
+.gl-text-indent-hide {
+  text-indent: -9999px;
 }
-.gl-text-indent-0\!{
-  text-indent: 0 !important
+.gl-text-indent-hide\! {
+  text-indent: -9999px !important;
 }
-.gl-text-indent-hide{
-  text-indent: -9999px
+.gl-white-space-normal {
+  white-space: normal;
 }
-.gl-text-indent-hide\!{
-  text-indent: -9999px !important
+.gl-white-space-normal\! {
+  white-space: normal !important;
 }
-.gl-white-space-normal{
-  white-space: normal
+.gl-white-space-nowrap {
+  white-space: nowrap;
 }
-.gl-white-space-normal\!{
-  white-space: normal !important
+.gl-white-space-nowrap\! {
+  white-space: nowrap !important;
 }
-.gl-white-space-nowrap{
-  white-space: nowrap
+.gl-white-space-pre-wrap {
+  white-space: pre-wrap;
 }
-.gl-white-space-nowrap\!{
-  white-space: nowrap !important
+.gl-white-space-pre-wrap\! {
+  white-space: pre-wrap !important;
 }
-.gl-white-space-pre-wrap{
-  white-space: pre-wrap
+.gl-white-space-pre-line {
+  white-space: pre-line;
 }
-.gl-white-space-pre-wrap\!{
-  white-space: pre-wrap !important
+.gl-white-space-pre-line\! {
+  white-space: pre-line !important;
 }
-.gl-white-space-pre-line{
-  white-space: pre-line
+.gl-md-white-space-nowrap {
+  @include gl-media-breakpoint-up(md) {
+    white-space: nowrap;
+  }
 }
-.gl-white-space-pre-line\!{
-  white-space: pre-line !important
+.gl-md-white-space-nowrap\! {
+  @include gl-media-breakpoint-up(md) {
+    white-space: nowrap !important;
+  }
 }
-.gl-word-break-all{
-  word-break: break-all
+.gl-word-break-all {
+  word-break: break-all;
 }
-.gl-word-break-all\!{
-  word-break: break-all !important
+.gl-word-break-all\! {
+  word-break: break-all !important;
 }
-.gl-word-break-word{
-  word-break: break-word
+.gl-word-break-word {
+  word-break: break-word;
 }
-.gl-word-break-word\!{
-  word-break: break-word !important
+.gl-word-break-word\! {
+  word-break: break-word !important;
 }
-.gl-overflow-break-word{
+.gl-overflow-break-word {
   overflow-wrap: break-word;
   word-wrap: break-word;
-  hyphens: auto
+  hyphens: auto;
 }
-.gl-overflow-break-word\!{
+.gl-overflow-break-word\! {
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
-  hyphens: auto !important
+  hyphens: auto !important;
 }
-.gl-str-truncated{
-  @include str-truncated
+.gl-str-truncated {
+  @include str-truncated;
 }
-.gl-str-truncated\!{
-  @include str-truncated
+.gl-str-truncated\! {
+  @include str-truncated;
 }
-.gl-text-truncate{
+.gl-text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap
+  white-space: nowrap;
 }
-.gl-text-truncate\!{
+.gl-text-truncate\! {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  white-space: nowrap !important
+  white-space: nowrap !important;
 }
 .gl-translate-x-0 {
   transform: translateX(0)

package/src/scss/utility-mixins/sizing.scss

@@ -343,6 +343,12 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-md-max-w-26 {
+  @include gl-media-breakpoint-up(md) {
+    max-width: $gl-spacing-scale-26;
+  }
+}
+
 @mixin gl-md-max-w-15p {
   @include gl-media-breakpoint-up(md) {
     max-width: 15%;

package/src/scss/utility-mixins/text.scss

@@ -93,6 +93,18 @@
   white-space: pre-line;
 }
 
+/**
+* Responsive White-space utilities
+*
+* naming convention: gl-{breakpoint}-white-space-{value}
+*/
+
+@mixin gl-md-white-space-nowrap {
+  @include gl-media-breakpoint-up(md) {
+    white-space: nowrap;
+  }
+}
+
 /**
 * Word utilities.
 *