@gitlab/ui 121.1.0 → 122.1.0

package/src/vendor/bootstrap/scss/_card.scss

@@ -149,116 +149,6 @@
 }
 
 
-// Card deck
-
-.card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-//
-// Columns
-//
-
-.card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
-}
-
-
 //
 // Accordion
 //

package/src/vendor/bootstrap/scss/_dropdown.scss

@@ -36,20 +36,14 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .dropdown-menu#{$infix}-left {
-      right: auto;
-      left: 0;
-    }
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
 
-    .dropdown-menu#{$infix}-right {
-      right: 0;
-      left: auto;
-    }
-  }
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)

package/src/vendor/bootstrap/scss/_list-group.scss

@@ -86,47 +86,6 @@
 }
 
 
-// Horizontal
-//
-// Change the layout of list group items from vertical (default) to horizontal.
-
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .list-group-horizontal#{$infix} {
-      flex-direction: row;
-
-      > .list-group-item {
-        &:first-child {
-          @include border-bottom-left-radius($list-group-border-radius);
-          @include border-top-right-radius(0);
-        }
-
-        &:last-child {
-          @include border-top-right-radius($list-group-border-radius);
-          @include border-bottom-left-radius(0);
-        }
-
-        &.active {
-          margin-top: 0;
-        }
-
-        + .list-group-item {
-          border-top-width: $list-group-border-width;
-          border-left-width: 0;
-
-          &.active {
-            margin-left: -$list-group-border-width;
-            border-left-width: $list-group-border-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most

package/src/vendor/bootstrap/scss/_variables.scss

@@ -826,13 +826,6 @@ $pagination-border-radius-sm:       $border-radius-sm !default;
 $pagination-border-radius-lg:       $border-radius-lg !default;
 
 
-// Jumbotron
-
-$jumbotron-padding:                 2rem !default;
-$jumbotron-color:                   null !default;
-$jumbotron-bg:                      $gray-200 !default;
-
-
 // Cards
 
 $card-spacer-y:                     .75rem !default;
@@ -849,13 +842,6 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width * .5 !default;
-$card-deck-margin:                  $card-group-margin !default;
-
-$card-columns-count:                3 !default;
-$card-columns-gap:                  1.25rem !default;
-$card-columns-margin:               $card-spacer-y !default;
-
 
 // Tooltips
 

package/src/vendor/bootstrap/scss/bootstrap.scss

@@ -28,7 +28,6 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
-@import "jumbotron";
 @import "alert";
 @import "progress";
 @import "media";

package/tailwind.defaults.js

@@ -8,48 +8,12 @@ const {
   outlineColor,
   fill,
   textColor,
+  spacing,
+  borderRadius,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
 
-const gridSize = 0.5; // rem
-const spacing = {
-  0: '0',
-  px: '1px',
-  ...Object.fromEntries(
-    Object.entries({
-      1: 0.25,
-      2: 0.5,
-      3: 1,
-      4: 1.5,
-      5: 2,
-      6: 3,
-      7: 4,
-      8: 5,
-      9: 6,
-      10: 7,
-      11: 8,
-      '11-5': 9,
-      12: 10,
-      13: 12,
-      15: 15,
-      20: 20,
-      26: 26,
-      28: 28,
-      30: 30,
-      31: 31,
-      34: 34,
-      48: 48,
-      62: 62,
-      75: 75,
-      80: 80,
-      88: 88,
-    }).map(([scale, factor]) => {
-      return [scale, `${factor * gridSize}rem`];
-    }),
-  ),
-};
-
 function addCustomDefinitions({ addComponents, addUtilities }) {
   addComponents({
     '.action-neutral-colors': {
@@ -499,15 +463,7 @@ module.exports = {
     },
     backgroundColor,
     borderColor,
-    borderRadius: {
-      none: '0',
-      6: '1.5rem',
-      base: '.25rem',
-      full: '50%', // Tailwind gl-rounded-full is 9999px
-      small: '.125rem',
-      lg: '.5rem',
-      pill: '.75rem',
-    },
+    borderRadius,
     boxShadow: {
       DEFAULT: '0 1px 4px 0 #0000004d',
       none: 'none',

package/src/components/dashboards/dashboard_layout/dashboard_layout.md

@@ -1,145 +0,0 @@
-## Dashboard layout
-
-The `GlDashboardLayout` component provides an easy way to render grid-based dashboards
-using a configuration as outlined by our [Pajamas guidelines](#pajamas-guidelines).
-For more in-depth details on the dashboard layout framework, see the
-[architecture design document](https://handbook.gitlab.com/handbook/engineering/architecture/design-documents/dashboard_layout_framework/).
-
-### When to use
-
-This component should be used when:
-
-- You want an easy way to create a dashboard interface.
-- You want your dashboard to align with our [Pajamas guidelines](#pajamas-guidelines).
-- You want to benefit from features such as customizable layouts with resizable, draggable elements.
-
-### Current limitations
-
-The `GlDashboardLayout` component is limited to rendering dashboards. As defined
-in our architecture design document it does not provide:
-
-- Data exploration outside defined panel visualizations.
-- User-driven customization outside of editing panel position and size.
-- Navigation placement for dashboards.
-
-## The component
-
-The component expects a dashboard configuration object as input and renders a dashboard
-layout with title, description, actions, and panels.
-
-### Grid layout
-
-Panels within the dashboard layout are rendered in a cross-browser 12-column grid
-system with an unlimited number of rows. The grid is responsive and collapses down to a
-single column at the [medium breakpoint](https://design.gitlab.com/product-foundations/layout/#breakpoints).
-
-### Dashboard panels
-
-The dashboard layout is not opinionated about the panel component used. You are free to choose
-whichever panel component best suits your needs. However, to ensure consistency with
-our design patterns, it's strongly recommended that you use `GlDashboardPanel`.
-
-### Filters
-
-The component provides a `#filters` slot to render your filters in the dashboard layout.
-The component does not manage or sync filters and leaves it up to the consumer to manage this state.
-
-We expect dashboards using the framework to implement two types of filters:
-
-- Dashboard filters: Applied to every panel and visualization in the dashboard.
-- Panel filters: Applied per panel to refine results available within the dashboard context.
-
-### Basic implementation
-
-A basic implementation of a static dashboard using the `#panel` slot to render existing
-visualizations wrapped in `GlDashboardPanel`.
-
-```html
-<script>
-import { GlDashboardLayout, GlDashboardPanel } from '@gitlab/ui';
-
-// Your i18n library
-import { __ } from '~/locale';
-
-// Your visualizations
-import UsersVisualization from './my_users_visualization.vue';
-import EventsVisualization from './my_events_visualization.vue';
-
-export default {
-  components: {
-    GlDashboardLayout,
-    GlDashboardPanel,
-    UsersVisualization,
-    EventsVisualization,
-  },
-  data() {
-    return {
-      dashboard: {
-        title: __('My dashboard title'),
-        description: __('The dashboard description to render'),
-        panels: [
-          {
-            // Each panel ID must be unique within the context of this dashboard obj
-            id: 'active-users-panel',
-            dashboardPanelProps: {
-              title: __('Active users over time'),
-              // Any additional GlDashboardPanel props go here
-            },
-            component: UsersVisualization,
-            componentProps: {
-              apiPath: '/example-users-api',
-              // Any props you want to pass to your component
-            },
-            gridAttributes: {
-              width: 6,
-              height: 4,
-              yPos: 0,
-              xPos: 0,
-            },
-          },
-          {
-            // Each panel ID must be unique within the context of this dashboard obj
-            id: 'events-over-time-panel',
-            dashboardPanelProps: {
-              title: __('Events over time'),
-              // Any additional GlDashboardPanel props go here
-            },
-            component: EventsVisualization,
-            componentProps: {
-              apiPath: '/example-events-api',
-              // Any props you want to pass to your component
-            },
-            gridAttributes: {
-              width: 6,
-              height: 4,
-              yPos: 0,
-              xPos: 6,
-            },
-          },
-        ],
-      },
-    }
-  },
-}
-</script>
-
-<template>
-  <gl-dashboard-layout :config="dashboard">
-    <template #panel="{ panel }">
-      <gl-dashboard-panel v-bind="panel.dashboardPanelProps">
-        <template #body>
-          <component
-            :is="panel.component"
-            class="gl-h-full gl-overflow-hidden"
-            v-bind="panel.componentProps"
-          />
-        </template>
-      </gl-dashboard-panel>
-    </template>
-  </gl-dashboard-layout>
-</template>
-```
-
-## Pajamas guidelines
-
-- [Pajamas dashboards pattern](https://design.gitlab.com/patterns/dashboards)

package/src/vendor/bootstrap/scss/_jumbotron.scss

@@ -1,17 +0,0 @@
-.jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding * .5);
-  margin-bottom: $jumbotron-padding;
-  color: $jumbotron-color;
-  background-color: $jumbotron-bg;
-  @include border-radius($border-radius-lg);
-
-  @include media-breakpoint-up(sm) {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
-.jumbotron-fluid {
-  padding-right: 0;
-  padding-left: 0;
-  @include border-radius(0);
-}