npm - @gitlab/ui - Versions diffs - 98.5.2 → 99.0.0 - Mend

@gitlab/ui 98.5.2 → 99.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/CHANGELOG.md +16 -0
package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.js +1 -1
package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +1 -1
package/dist/components/experimental/duo/chat/mock_data.js +1 -1
package/dist/index.css +1 -1
package/dist/index.css.map +1 -1
package/dist/tailwind.css +1 -1
package/dist/tailwind.css.map +1 -1
package/package.json +8 -11
package/src/components/base/skeleton_loader/skeleton_loader.md +28 -4
package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue +1 -1
package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue +1 -1
package/src/components/experimental/duo/chat/duo_chat.scss +228 -0
package/src/components/experimental/duo/chat/mock_data.js +1 -1
package/src/scss/gitlab_ui.scss +0 -1
package/src/scss/storybook.scss +0 -1
package/src/scss/typescale/typescale.md +0 -1
package/src/scss/typescale/typescale_demo.scss +1 -2
package/dist/utility_classes.css +0 -2
package/dist/utility_classes.css.map +0 -1
package/src/scss/utilities.scss +0 -9196
package/src/scss/utility-mixins/accessibility.scss +0 -19
package/src/scss/utility-mixins/animation.scss +0 -90
package/src/scss/utility-mixins/background.scss +0 -421
package/src/scss/utility-mixins/border.scss +0 -498
package/src/scss/utility-mixins/box-shadow.scss +0 -220
package/src/scss/utility-mixins/clearfix.scss +0 -9
package/src/scss/utility-mixins/color.scss +0 -228
package/src/scss/utility-mixins/composite.scss +0 -24
package/src/scss/utility-mixins/cursor.scss +0 -36
package/src/scss/utility-mixins/deprecated.scss +0 -20
package/src/scss/utility-mixins/display.scss +0 -192
package/src/scss/utility-mixins/flex.scss +0 -360
package/src/scss/utility-mixins/grid.scss +0 -50
package/src/scss/utility-mixins/image.scss +0 -8
package/src/scss/utility-mixins/index.scss +0 -47
package/src/scss/utility-mixins/list-style.scss +0 -12
package/src/scss/utility-mixins/opacity.scss +0 -32
package/src/scss/utility-mixins/outline.scss +0 -12
package/src/scss/utility-mixins/overflow.scss +0 -45
package/src/scss/utility-mixins/pointer-events.scss +0 -12
package/src/scss/utility-mixins/sizing.scss +0 -582
package/src/scss/utility-mixins/spacing.scss +0 -1564
package/src/scss/utility-mixins/svg.scss +0 -79
package/src/scss/utility-mixins/text.scss +0 -183
package/src/scss/utility-mixins/transform.scss +0 -58
package/src/scss/utility-mixins/transition.scss +0 -44
package/src/scss/utility-mixins/typography.scss +0 -381
package/src/scss/utility-mixins/vertical-align.scss +0 -22
package/src/scss/utility-mixins/visibility.scss +0 -12
package/src/scss/utility-mixins/z-index.scss +0 -37

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

@@ -1,582 +0,0 @@
-/**
-* Fixed dimension (width/height) utilities
-*
-* naming convention: gl-{width|height}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-w-auto {
-  width: auto;
-}
-@mixin gl-w-2 {
-  width: $gl-spacing-scale-2;
-}
-@mixin gl-w-3 {
-  width: $gl-spacing-scale-3;
-}
-@mixin gl-w-4 {
-  width: $gl-spacing-scale-4;
-}
-@mixin gl-w-5 {
-  width: $gl-spacing-scale-5;
-}
-@mixin gl-w-6 {
-  width: $gl-spacing-scale-6;
-}
-@mixin gl-w-7 {
-  width: $gl-spacing-scale-7;
-}
-@mixin gl-w-8 {
-  width: $gl-spacing-scale-8;
-}
-@mixin gl-w-9 {
-  width: $gl-spacing-scale-9;
-}
-@mixin gl-w-10 {
-  width: $gl-spacing-scale-10;
-}
-@mixin gl-w-11 {
-  width: $gl-spacing-scale-11;
-}
-@mixin gl-w-12 {
-  width: $gl-spacing-scale-12;
-}
-@mixin gl-w-13 {
-  width: $gl-spacing-scale-13;
-}
-@mixin gl-w-15 {
-  width: $gl-spacing-scale-15;
-}
-@mixin gl-w-20 {
-  width: $gl-spacing-scale-20;
-}
-@mixin gl-w-28 {
-  width: $gl-spacing-scale-28;
-}
-@mixin gl-w-30 {
-  width: $gl-spacing-scale-30;
-}
-@mixin gl-w-31 {
-  width: $gl-spacing-scale-31;
-}
-@mixin gl-w-eighth {
-  width: 12.5%;
-}
-@mixin gl-w-5p {
-  width: 5%;
-}
-// In the future, any percentage-based classes should follow this convention per the conversation at https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1884#note_459949588
-@mixin gl-w-10p {
-  width: 10%;
-}
-@mixin gl-w-15p {
-  width: 15%;
-}
-@mixin gl-w-20p {
-  width: 20%;
-}
-@mixin gl-w-30p {
-  width: 30%;
-}
-@mixin gl-w-40p {
-  width: 40%;
-}
-@mixin gl-w-quarter {
-  width: 25%;
-}
-@mixin gl-w-half {
-  width: 50%;
-}
-@mixin gl-w-70p {
-  width: 70%;
-}
-@mixin gl-w-85p {
-  width: 85%;
-}
-@mixin gl-w-90p {
-  width: 90%;
-}
-@mixin gl-w-full {
-  width: 100%;
-}
-@mixin gl-w-grid-size-30 {
-  width: $grid-size * 30;
-}
-@mixin gl-w-grid-size-40 {
-  width: $grid-size * 40;
-}
-@mixin gl-sm-w-full {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-w-full;
-  }
-}
-@mixin gl-md-w-full {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-full;
-  }
-}
-@mixin gl-lg-w-full {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-w-full;
-  }
-}
-@mixin gl-w-max-content {
-  width: max-content;
-}
-@mixin gl-layout-w-limited {
-  max-width: $limited-layout-width;
-}
-@mixin gl-max-w-container-xl {
-  max-width: $container-xl;
-}
-@mixin gl-h-auto {
-  height: auto;
-}
-@mixin gl-h-0 {
-  height: 0;
-}
-@mixin gl-h-2 {
-  height: $gl-spacing-scale-2;
-}
-@mixin gl-h-3 {
-  height: $gl-spacing-scale-3;
-}
-@mixin gl-h-4 {
-  height: $gl-spacing-scale-4;
-}
-@mixin gl-h-5 {
-  height: $gl-spacing-scale-5;
-}
-@mixin gl-h-6 {
-  height: $gl-spacing-scale-6;
-}
-@mixin gl-h-7 {
-  height: $gl-spacing-scale-7;
-}
-@mixin gl-h-8 {
-  height: $gl-spacing-scale-8;
-}
-@mixin gl-h-9 {
-  height: $gl-spacing-scale-9;
-}
-@mixin gl-h-10 {
-  height: $gl-spacing-scale-10;
-}
-@mixin gl-h-11 {
-  height: $gl-spacing-scale-11;
-}
-@mixin gl-h-11-5 {
-  height: $gl-spacing-scale-11-5;
-}
-@mixin gl-h-13 {
-  height: $gl-spacing-scale-13;
-}
-@mixin gl-h-full {
-  height: 100%;
-}
-@mixin gl-h-100vh {
-  height: 100vh;
-}
-/**
-* Responsive dimension (width/height) utilities
-*
-* naming convention: gl-{breakpoint}-{width|height}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-sm-w-auto {
-  @include gl-media-breakpoint-up(sm) {
-    width: auto;
-  }
-}
-@mixin gl-sm-w-half {
-  @include gl-media-breakpoint-up(sm) {
-    width: 50%;
-  }
-}
-@mixin gl-sm-w-25p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 25%;
-  }
-}
-@mixin gl-sm-w-30p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 30%;
-  }
-}
-@mixin gl-sm-w-40p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 40%;
-  }
-}
-@mixin gl-sm-w-75p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 75%;
-  }
-}
-@mixin gl-md-h-9 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-h-9;
-  }
-}
-@mixin gl-md-w-15 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-15;
-  }
-}
-@mixin gl-md-w-20 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-20;
-  }
-}
-@mixin gl-md-w-30 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-30;
-  }
-}
-@mixin gl-md-w-half {
-  @include gl-media-breakpoint-up(md) {
-    width: 50%;
-  }
-}
-@mixin gl-lg-w-half {
-  @include gl-media-breakpoint-up(lg) {
-    width: 50%;
-  }
-}
-@mixin gl-md-w-auto {
-  @include gl-media-breakpoint-up(md) {
-    width: auto;
-  }
-}
-@mixin gl-md-w-50p {
-  @include gl-media-breakpoint-up(md) {
-    width: 50%;
-  }
-}
-@mixin gl-lg-w-1px {
-  @include gl-media-breakpoint-up(lg) {
-    width: 1px;
-  }
-}
-@mixin gl-lg-w-auto {
-  @include gl-media-breakpoint-up(lg) {
-    width: auto;
-  }
-}
-@mixin gl-lg-w-25p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 25%;
-  }
-}
-@mixin gl-lg-w-30p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 30%;
-  }
-}
-@mixin gl-lg-w-40p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 40%;
-  }
-}
-@mixin gl-lg-w-50p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 50%;
-  }
-}
-/**
-* Minimum/Maximun dimension (width/height) utilities
-*
-* naming convention: gl-{min|max}-{w|h}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-min-w-0 {
-  min-width: 0;
-}
-@mixin gl-min-w-1 {
-  min-width: $gl-spacing-scale-1;
-}
-@mixin gl-min-w-2 {
-  min-width: $gl-spacing-scale-2;
-}
-@mixin gl-min-w-3 {
-  min-width: $gl-spacing-scale-3;
-}
-@mixin gl-min-w-4 {
-  min-width: $gl-spacing-scale-4;
-}
-@mixin gl-min-w-5 {
-  min-width: $gl-spacing-scale-5;
-}
-@mixin gl-min-w-6 {
-  min-width: $gl-spacing-scale-6;
-}
-@mixin gl-min-w-7 {
-  min-width: $gl-spacing-scale-7;
-}
-@mixin gl-min-w-8 {
-  min-width: $gl-spacing-scale-8;
-}
-@mixin gl-min-w-9 {
-  min-width: $gl-spacing-scale-9;
-}
-@mixin gl-min-w-10 {
-  min-width: $gl-spacing-scale-10;
-}
-@mixin gl-min-w-20 {
-  min-width: $gl-spacing-scale-20;
-}
-@mixin gl-min-w-33 {
-  min-width: $gl-spacing-scale-33;
-}
-@mixin gl-min-w-full {
-  min-width: 100%;
-}
-@mixin gl-min-w-fit-content {
-  min-width: fit-content;
-}
-@mixin gl-min-h-0 {
-  min-height: 0;
-}
-@mixin gl-min-h-5 {
-  min-height: $gl-spacing-scale-5;
-}
-@mixin gl-min-h-6 {
-  min-height: $gl-spacing-scale-6;
-}
-@mixin gl-min-h-7 {
-  min-height: $gl-spacing-scale-7;
-}
-@mixin gl-min-h-8 {
-  min-height: $gl-spacing-scale-8;
-}
-@mixin gl-min-h-100vh {
-  min-height: 100vh;
-}
-@mixin gl-max-w-0 {
-  max-width: 0;
-}
-@mixin gl-max-w-12 {
-  max-width: $gl-spacing-scale-12;
-}
-@mixin gl-max-w-15 {
-  max-width: $gl-spacing-scale-15;
-}
-@mixin gl-max-w-20 {
-  max-width: $gl-spacing-scale-20;
-}
-@mixin gl-max-w-26 {
-  max-width: $gl-spacing-scale-26;
-}
-@mixin gl-max-w-30 {
-  max-width: $gl-spacing-scale-30;
-}
-@mixin gl-max-w-34 {
-  max-width: $gl-spacing-scale-34;
-}
-@mixin gl-max-w-37 {
-  max-width: $gl-spacing-scale-37;
-}
-@mixin gl-max-w-48 {
-  max-width: $gl-spacing-scale-48;
-}
-@mixin gl-max-w-62 {
-  max-width: $gl-spacing-scale-62;
-}
-@mixin gl-max-w-75 {
-  max-width: $gl-spacing-scale-75;
-}
-@mixin gl-max-w-80 {
-  max-width: $gl-spacing-scale-80;
-}
-@mixin gl-max-w-88 {
-  max-width: $gl-spacing-scale-88;
-}
-@mixin gl-max-w-none {
-  max-width: none;
-}
-@mixin gl-max-h-none {
-  max-height: none;
-}
-@mixin gl-max-w-full {
-  max-width: 100%;
-}
-@mixin gl-max-w-max-content {
-  max-width: max-content;
-}
-@mixin gl-max-h-full {
-  max-height: 100%;
-}
-@mixin gl-max-w-100vw {
-  max-width: 100vw;
-}
-@mixin gl-max-w-50p {
-  max-width: 50%;
-}
-/**
-* Responsive Minimum/Maximun dimension (width/height) utilities
-*
-* naming convention: gl-{breakpoint}-{min|max}-{w|h}-{spacing-scale-index}
-* notes:
-* - 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%;
-  }
-}
-@mixin gl-md-max-w-30p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 30%;
-  }
-}
-@mixin gl-md-max-w-50p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 50%;
-  }
-}
-@mixin gl-md-max-w-70p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 70%;
-  }
-}
-@mixin gl-lg-max-w-80p {
-  @include gl-media-breakpoint-up(lg) {
-    max-width: 80%;
-  }
-}
-@mixin gl-lg-max-w-50p {
-  @include gl-media-breakpoint-up(lg) {
-    max-width: 50%;
-  }
-}