@gitlab/ui 32.9.1 → 32.11.0

package/src/components/base/dropdown/dropdown.stories.js

@@ -45,6 +45,9 @@ function generateProps({
   hideHeaderBorder = true,
   showClearAll = false,
   clearAllText = '',
+  showHighlightedItemsTitle = false,
+  highlightedItemsTitle = '',
+  highlightedItemsTitleClass = '',
 } = {}) {
   const props = {
     category: {
@@ -107,6 +110,18 @@ function generateProps({
       type: String,
       default: textKnob('clear all text', clearAllText),
     },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      default: boolean('show highlighted items title', showHighlightedItemsTitle),
+    },
+    highlightedItemsTitle: {
+      type: String,
+      default: textKnob('highlighted items title', highlightedItemsTitle),
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      default: textKnob('highlighted items title class', highlightedItemsTitleClass),
+    },
     right: {
       type: Boolean,
       default: boolean('right', false),
@@ -134,6 +149,9 @@ function wrap([template]) {
       :hide-header-border="hideHeaderBorder"
       :show-clear-all="showClearAll"
       :clear-all-text="clearAllText"
+      :show-highlighted-items-title="showHighlightedItemsTitle"
+      :highlighted-items-title="highlightedItemsTitle"
+      :highlighted-items-title-class="highlightedItemsTitleClass"
       :loading="loading"
       :right="right"
     >
@@ -445,6 +463,7 @@ documentedStoriesOf('base/dropdown', readme)
       text: 'Some dropdown',
       showClearAll: true,
       clearAllText: 'Clear all',
+      highlightedItemsTitleClass: 'gl-px-5',
     }),
     components,
     template: wrap`
@@ -457,4 +476,27 @@ documentedStoriesOf('base/dropdown', readme)
     updated() {
       addClass(this);
     },
+  }))
+  .add('with highlighted items', () => ({
+    props: generateProps({
+      text: 'Some dropdown',
+      showHighlightedItemsTitle: true,
+      highlightedItemsTitle: 'Highlights',
+      highlightedItemsTitleClass: 'gl-px-5',
+    }),
+    components,
+    template: wrap`
+      <template #highlighted-items>
+        <gl-dropdown-item :is-check-item="true" :is-checked="true">First item</gl-dropdown-item>
+        <gl-dropdown-item :is-check-item="true" :is-checked="true">Second item</gl-dropdown-item>
+      </template>
+      <gl-dropdown-item>Third item</gl-dropdown-item>
+      <gl-dropdown-item>Fourth item</gl-dropdown-item>
+      `,
+    mounted() {
+      clickDropdown(this);
+    },
+    updated() {
+      addClass(this);
+    },
   }));

package/src/components/base/dropdown/dropdown.vue

@@ -10,6 +10,7 @@ import ButtonMixin from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import GlDropdownDivider from './dropdown_divider.vue';
 
 // Return an Array of visible items
 function filterVisible(els) {
@@ -35,6 +36,7 @@ export default {
   components: {
     BDropdown: ExtendedBDropdown,
     GlButton,
+    GlDropdownDivider,
     GlIcon,
     GlLoadingIcon,
   },
@@ -65,6 +67,21 @@ export default {
       required: false,
       default: '',
     },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    highlightedItemsTitle: {
+      type: String,
+      required: false,
+      default: 'Selected',
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5',
+    },
     textSrOnly: {
       type: Boolean,
       required: false,
@@ -166,6 +183,12 @@ export default {
     buttonText() {
       return this.split && this.icon ? null : this.text;
     },
+    hasHighlightedItemsContent() {
+      return this.hasSlotContents('highlighted-items');
+    },
+    hasHighlightedItemsOrClearAll() {
+      return this.showHighlightedItemsTitle || this.showClearAll;
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -180,7 +203,6 @@ export default {
   },
 };
 </script>
-
 <template>
   <b-dropdown
     ref="dropdown"
@@ -207,17 +229,40 @@ export default {
         </p>
         <slot name="header"></slot>
       </div>
-      <div v-if="showClearAll" class="gl-text-right gl-px-5">
-        <gl-button
-          size="small"
-          category="tertiary"
-          variant="link"
-          data-testid="clear-all-button"
-          @click="$emit('clear-all')"
-          >{{ clearAllText }}</gl-button
-        >
+      <div
+        v-if="hasHighlightedItemsOrClearAll"
+        class="gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"
+        :class="highlightedItemsTitleClass"
+      >
+        <div class="gl-display-flex">
+          <span
+            v-if="hasHighlightedItemsContent && showHighlightedItemsTitle"
+            class="gl-font-weight-bold"
+            data-testid="highlighted-items-title"
+            >{{ highlightedItemsTitle }}</span
+          >
+        </div>
+        <div class="gl-display-flex">
+          <gl-button
+            v-if="showClearAll"
+            size="small"
+            category="tertiary"
+            variant="link"
+            data-testid="clear-all-button"
+            @click="$emit('clear-all')"
+            >{{ clearAllText }}</gl-button
+          >
+        </div>
       </div>
       <div class="gl-new-dropdown-contents">
+        <div
+          v-if="hasHighlightedItemsContent"
+          class="gl-overflow-visible"
+          data-testid="highlighted-items"
+        >
+          <slot name="highlighted-items"></slot>
+          <gl-dropdown-divider />
+        </div>
         <slot></slot>
       </div>
       <div v-if="hasSlotContents('footer')" class="gl-new-dropdown-footer">

package/src/components/base/dropdown/examples/dropdown.with_highlighted_items.example.vue

@@ -0,0 +1,9 @@
+<template>
+  <gl-dropdown text="Some dropdown">
+    <template #highlighted-items>
+      <gl-dropdown-item>First item</gl-dropdown-item>
+      <gl-dropdown-item>Second item</gl-dropdown-item>
+    </template>
+    <gl-dropdown-item>Last item</gl-dropdown-item>
+  </gl-dropdown>
+</template>

package/src/components/base/dropdown/examples/index.js

@@ -6,6 +6,7 @@ import DropdownClearAllExample from './dropdown.with_clear_all.example.vue';
 import DropdownWithDividerExample from './dropdown.with_divider.example.vue';
 import DropdownWithFormExample from './dropdown.with_form.example.vue';
 import DropdownWithHeaderExample from './dropdown.with_header.example.vue';
+import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example.vue';
 import DropdownWithIcons from './dropdown.with_icons.example.vue';
 import DropdownWithRightAlignExample from './dropdown.with_right_align.example.vue';
 import DropdownWithSearchExample from './dropdown.with_search.example.vue';
@@ -39,6 +40,12 @@ export default [
         description: 'Dropdown with section header',
         component: DropdownWithHeaderExample,
       },
+      {
+        id: 'new-dropdown-with-highlighted-items',
+        name: 'With Highlighted items',
+        description: 'Dropdown with highlighted items',
+        component: DropdownWithHighlightedItemsExample,
+      },
       {
         id: 'new-dropdown-with-section-headers',
         name: 'With Section Headers',

package/src/components/base/markdown/markdown.scss

@@ -118,7 +118,8 @@
     @include gl-line-height-20;
   }
 
-  .monospace {
+  .monospace,
+  code {
     @include gl-font-monospace;
     @include gl-font-size-monospace-lg;
     @include gl-line-height-24;
@@ -153,6 +154,14 @@
   .addition {
     @include gl-bg-green-100;
   }
+
+  code {
+    @include gl-bg-gray-50;
+    @include gl-text-gray-950;
+    @include gl-rounded-base;
+    @include gl-px-2;
+    @include gl-py-1;
+  }
 }
 
 .gl-compact-markdown {
@@ -224,7 +233,8 @@
     @include gl-font-sm;
   }
 
-  .monospace {
+  .monospace,
+  code {
     @include gl-font-monospace;
     @include gl-font-size-monospace;
     @include gl-line-height-20;

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -38,4 +38,6 @@ merge requests, milestones, snippets and more.</p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
 </p>
- 
+<p> 
+  This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.
+</p>

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -83,33 +83,18 @@ Object {
     },
     "type": "category",
   },
-  "yAxis": Array [
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "y axis",
-      "nameGap": 50,
-      "nameLocation": "center",
-      "type": "value",
+  "yAxis": Object {
+    "axisLabel": Object {
+      "formatter": [Function],
     },
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "",
-      "nameGap": 50,
-      "nameLocation": "center",
+    "axisTick": Object {
       "show": false,
-      "type": "value",
     },
-  ],
+    "name": "y axis",
+    "nameGap": 50,
+    "nameLocation": "center",
+    "type": "value",
+  },
 }
 `;
 
@@ -190,33 +175,18 @@ Object {
     },
     "type": "category",
   },
-  "yAxis": Array [
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "y axis",
-      "nameGap": 50,
-      "nameLocation": "center",
-      "type": "value",
+  "yAxis": Object {
+    "axisLabel": Object {
+      "formatter": [Function],
     },
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "",
-      "nameGap": 50,
-      "nameLocation": "center",
+    "axisTick": Object {
       "show": false,
-      "type": "value",
     },
-  ],
+    "name": "y axis",
+    "nameGap": 50,
+    "nameLocation": "center",
+    "type": "value",
+  },
 }
 `;
 

package/src/components/charts/column/column.vue

@@ -118,6 +118,11 @@ export default {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
+      const yAxisPrimary = {
+        ...yAxisDefaults,
+        name: this.yAxisTitle,
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
@@ -142,17 +147,16 @@ export default {
             name: this.xAxisTitle,
             type: this.xAxisType,
           },
-          yAxis: [
-            {
-              ...yAxisDefaults,
-              name: this.yAxisTitle,
-            },
-            {
-              ...yAxisDefaults,
-              name: this.secondaryDataTitle,
-              show: this.hasSecondaryAxis,
-            },
-          ],
+          yAxis: this.hasSecondaryAxis
+            ? [
+                yAxisPrimary,
+                {
+                  ...yAxisDefaults,
+                  name: this.secondaryDataTitle,
+                  show: this.hasSecondaryAxis,
+                },
+              ]
+            : yAxisPrimary,
           legend: {
             show: false,
           },

package/src/scss/utilities.scss

@@ -1863,19 +1863,19 @@
 }
 
 .gl-shadow {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.3)
+  box-shadow: 0 1px 4px 0 rgba(#000, 0.3)
 }
 
 .gl-shadow\! {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.3) !important
+  box-shadow: 0 1px 4px 0 rgba(#000, 0.3) !important
 }
 
 .gl-shadow-x0-y2-b4-s0 {
-  box-shadow: 0 2px 4px 0 rgba($black, 0.1)
+  box-shadow: 0 2px 4px 0 rgba(#000, 0.1)
 }
 
 .gl-shadow-x0-y2-b4-s0\! {
-  box-shadow: 0 2px 4px 0 rgba($black, 0.1) !important
+  box-shadow: 0 2px 4px 0 rgba(#000, 0.1) !important
 }
 
 .gl-shadow-blue-200-x0-y0-b4-s2 {

package/src/scss/utility-mixins/box-shadow.scss

@@ -133,11 +133,11 @@
 }
 
 @mixin gl-shadow {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.3);
+  box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
 }
 
 @mixin gl-shadow-x0-y2-b4-s0 {
-  box-shadow: 0 2px 4px 0 rgba($black, 0.1);
+  box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
 }
 
 @mixin gl-shadow-blue-200-x0-y0-b4-s2 {

package/src/scss/variables.scss

@@ -282,8 +282,8 @@ $darken-border-dashed-factor: 25%;
 $t-gray-a-02: rgba($black, 0.02);
 $t-gray-a-04: rgba($black, 0.04);
 $t-gray-a-06: rgba($black, 0.06);
-$t-gray-a-08: rgba($black, 0.08);
-$t-gray-a-24: rgba($black, 0.24);
+$t-gray-a-08: rgba(#000, 0.08);
+$t-gray-a-24: rgba(#000, 0.24);
 
 // Text
 $gl-font-weight-light: 300;
@@ -443,6 +443,7 @@ $gl-modal-large-width: px-to-rem(990px);
 $modal-header-border-color: $gray-200;
 $modal-footer-border-color: $gray-200;
 $modal-title-line-height: $gl-line-height-20;
+$modal-backdrop: #000;
 $modal-backdrop-opacity: 0.64;
 
 // Bootstrap overrides

package/src/utils/constants.js

@@ -109,6 +109,12 @@ export const newButtonVariantOptions = {
   reset: 'gl-reset',
 };
 
+export const badgeForButtonOptions = {
+  [newButtonVariantOptions.default]: badgeVariantOptions.neutral,
+  [newButtonVariantOptions.confirm]: badgeVariantOptions.info,
+  [newButtonVariantOptions.danger]: badgeVariantOptions.danger,
+};
+
 export const newDropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',