@gitlab/ui 39.5.0 → 39.6.1

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -318,7 +318,7 @@ export const glModalLargeWidth = '61.875rem'
 export const modalHeaderBorderColor = '#bfbfbf'
 export const modalFooterBorderColor = '#bfbfbf'
 export const modalTitleLineHeight = '1.25rem'
-export const modalBackdrop = '#000'
+export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
 export const bodyColor = '#303030'
 export const secondary = '#f0f0f0'

package/scss_to_js/scss_variables.json

@@ -1673,7 +1673,7 @@
       "compiledValue": "1.25rem"
     },
     {
-      "name": "$modal-backdrop",
+      "name": "$modal-backdrop-bg",
       "value": "#000",
       "compiledValue": "#000"
     },

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -65,7 +65,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -111,24 +112,29 @@ export default {
       Emitted when this term token is clicked.
       @event activate
     -->
+
     <!--
       Emitted when this term token will lose its focus.
       @event deactivate
     -->
+
     <!--
       Emitted when autocomplete entry is selected.
       @event replace
       @property {object} token Replacement token configuration.
     -->
+
     <!--
       Emitted when the token is submitted.
       @event submit
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       ref="segment"
       v-model="internalValue"
@@ -158,6 +164,7 @@ export default {
           {{ item.title }}
         </gl-filtered-search-suggestion>
       </template>
+
       <template #view>
         <input
           v-if="placeholder"
@@ -167,6 +174,7 @@ export default {
           :aria-label="placeholder"
           data-testid="filtered-search-term-input"
         />
+
         <template v-else>{{ value.data }}</template>
       </template>
     </gl-filtered-search-token-segment>

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -67,7 +67,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -299,6 +300,7 @@ export default {
       Emitted when the token is submitted.
       @event submit
     -->
+
     <gl-filtered-search-token-segment
       key="title-segment"
       :value="config.title"
@@ -318,10 +320,12 @@ export default {
           class="gl-filtered-search-token-type"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_TITLE)"
           view-only
-          >{{ inputValue }}</gl-token
         >
+          {{ inputValue }}
+        </gl-token>
       </template>
     </gl-filtered-search-token-segment>
+
     <gl-filtered-search-token-segment
       key="operator-segment"
       v-model="tokenValue.operator"
@@ -343,9 +347,11 @@ export default {
           variant="search-value"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_OPERATOR)"
           view-only
-          >{{ operatorDescription }}</gl-token
         >
+          {{ operatorDescription }}
+        </gl-token>
       </template>
+
       <template #option="{ option }">
         <div class="gl-display-flex">
           {{ option.value }}
@@ -355,16 +361,19 @@ export default {
         </div>
       </template>
     </gl-filtered-search-token-segment>
+
     <!--
       Emitted when a suggestion has been selected.
       @event select
       @type {string} value The value of the selected suggestion.
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       v-if="hasDataOrDataSegmentIsCurrentlyActive"
       key="data-segment"
@@ -386,10 +395,13 @@ export default {
     >
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
+
         <slot name="suggestions"></slot>
       </template>
+
       <template #view="{ inputValue }">
         <!-- @slot Used to customize how the token is rendered. -->
+
         <slot
           name="view-token"
           v-bind="{
@@ -412,6 +424,7 @@ export default {
               @slot Template for token value in inactive state
               @binding {array} suggestions Slot for rendering autocomplete suggestions when no options are provided.
               -->
+
               <slot name="view" v-bind="{ inputValue }">{{ inputValue }}</slot>
             </span>
           </gl-token>

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -79,7 +79,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -346,6 +347,7 @@ export default {
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />
+
       <portal :key="`operator-${_uid}`" :to="portalName">
         <gl-filtered-search-suggestion-list
           v-if="hasOptionsOrSuggestions"
@@ -361,11 +363,10 @@ export default {
               :value="option.value"
               :icon-name="option.icon"
             >
-              <slot name="option" v-bind="{ option }">
-                {{ option[optionTextField] }}
-              </slot>
+              <slot name="option" v-bind="{ option }"> {{ option[optionTextField] }} </slot>
             </gl-filtered-search-suggestion>
           </template>
+
           <slot v-else name="suggestions"></slot>
         </gl-filtered-search-suggestion-list>
       </portal>

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

@@ -131,14 +131,12 @@
   }
 
   blockquote {
-    @include gl-text-gray-500;
+    @include gl-text-gray-700;
     @include gl-py-3;
-    @include gl-px-6;
-    @include gl-my-5;
+    @include gl-pl-6;
+    @include gl-my-3;
     @include gl-mx-0;
-    @include gl-border-l-solid;
-    @include gl-border-l-4;
-    @include gl-border-l-gray-100;
+    @include gl-inset-border-l-4-gray-100;
   }
 
   .idiff {

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

@@ -34,6 +34,33 @@
     requests, milestones, snippets and more.
   </p>
 </blockquote>
+<blockquote>
+  <ul>
+    <li>Blockquote list item 1</li>
+    <li>Blockquote list item 2</li>
+  </ul>
+</blockquote>
+<blockquote>
+  <table>
+    <thead>
+      <tr>
+        <th>header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cell</td>
+      </tr>
+    </tbody>
+  </table>
+</blockquote>
+<blockquote>
+  <blockquote>
+    <p>
+      Nested blockquote
+    </p>
+  </blockquote>
+</blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
@@ -51,4 +78,4 @@
     <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
       data-link="true" class="gfm">file.mp3</a>
   </span>
-</p>
+</p>

package/src/scss/typescale/_index.scss

@@ -108,4 +108,13 @@
       @include gl-line-height-24;
     }
   }
+
+  blockquote {
+    @include gl-text-gray-700;
+    @include gl-py-3;
+    @include gl-pl-6;
+    @include gl-my-3;
+    @include gl-mx-0;
+    @include gl-inset-border-l-4-gray-100;
+  }
 }

package/src/scss/typescale/typescale_demo.html

@@ -42,3 +42,37 @@
 <p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
   ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
   milestones, snippets and more.</p>
+<blockquote>
+  <p>
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
+    requests, milestones, snippets and more.
+  </p>
+</blockquote>
+<blockquote>
+  <ul>
+    <li>Blockquote list item 1</li>
+    <li>Blockquote list item 2</li>
+  </ul>
+</blockquote>
+<blockquote>
+  <table>
+    <thead>
+      <tr>
+        <th>header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cell</td>
+      </tr>
+    </tbody>
+  </table>
+</blockquote>
+<blockquote>
+  <blockquote>
+    <p>
+      Nested blockquote
+    </p>
+  </blockquote>
+</blockquote>

package/src/scss/utilities.scss

@@ -1768,6 +1768,14 @@
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100 !important
 }
 
+.gl-inset-border-l-4-gray-100 {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100
+}
+
+.gl-inset-border-l-4-gray-100\! {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100 !important
+}
+
 .gl-inset-border-b-1-gray-200 {
   box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200
 }

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

@@ -40,6 +40,10 @@
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
 }
 
+@mixin gl-inset-border-l-4-gray-100 {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100;
+}
+
 @mixin gl-inset-border-b-1-gray-200 {
   box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 }

package/src/scss/variables.scss

@@ -461,7 +461,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-bg: #000;
 $modal-backdrop-opacity: 0.64;
 
 // Bootstrap overrides