@gitlab/ui 52.8.0 → 52.9.0

package/package.json

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

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -1,10 +1,12 @@
+$gl-search-box-by-type-search-icon-size: 16px;
 $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-search-icon {
-  @include gl-m-3;
   @include gl-text-gray-500;
   @include gl-w-5;
   @include gl-absolute;
+  @include gl-left-3;
+  top: calc(50% - #{$gl-search-box-by-type-search-icon-size} / 2);
 }
 
 .gl-search-box-by-type {
@@ -33,11 +35,37 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 }
 
+.gl-search-box-by-type-input-borderless,
+.gl-search-box-by-type-input-borderless.gl-form-input {
+  @include gl-border-none;
+  @include gl-font-base;
+  @include gl-h-auto;
+  @include gl-line-height-normal;
+  @include gl-pl-7;
+  @include gl-py-4;
+  @include gl-shadow-none;
+  @include gl-w-full;
+  border-radius: 0;
+  padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
+
+  &:not(.form-control-plaintext):focus {
+    @include gl-focus($inset: true);
+  }
+
+  &::placeholder {
+    @include gl-text-gray-400;
+  }
+
+  &::-webkit-search-cancel-button {
+    @include gl-display-none;
+  }
+}
+
 .gl-search-box-by-type-right-icons {
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-line-height-0;
-  @include gl-right-0;
+  @include gl-right-2;
   @include gl-absolute;
   @include gl-h-full;
 }

package/src/components/base/search_box_by_type/search_box_by_type.spec.js

@@ -16,6 +16,20 @@ describe('search box by type component', () => {
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
   const findInput = () => wrapper.findComponent({ ref: 'input' });
 
+  describe('borderless', () => {
+    it('renders default class on input when `borderless` prop is false', () => {
+      createComponent({ borderless: false });
+
+      expect(findInput().classes()).toContain('gl-search-box-by-type-input');
+    });
+
+    it('renders borderless class on input when `borderless` prop is true', () => {
+      createComponent({ borderless: true });
+
+      expect(findInput().classes()).toContain('gl-search-box-by-type-input-borderless');
+    });
+  });
+
   describe('clear icon component', () => {
     beforeEach(() => {
       createComponent({ value: 'somevalue' });

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

@@ -5,6 +5,7 @@ import readme from './search_box_by_type.md';
 const template = `
   <gl-search-box-by-type
     v-model="searchQuery"
+    :borderless="borderless"
     :clear-button-title="clearButtonTitle"
     :disabled="disabled"
     :is-loading="isLoading"
@@ -15,11 +16,13 @@ const template = `
 const defaultValue = (prop) => GlSearchBoxByType.props[prop].default;
 
 const generateProps = ({
+  borderless = defaultValue('borderless'),
   clearButtonTitle = defaultValue('clearButtonTitle'),
   disabled = defaultValue('disabled'),
   placeholder = 'Search',
   isLoading = defaultValue('isLoading'),
 } = {}) => ({
+  borderless,
   clearButtonTitle,
   disabled,
   placeholder,
@@ -34,9 +37,15 @@ const Template = (args, { argTypes }) => ({
   data: () => ({ searchQuery: '' }),
   template,
 });
+
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const Borderless = Template.bind({});
+Borderless.args = generateProps({
+  borderless: true,
+});
+
 export default {
   title: 'base/search-box-by-type',
   component: GlSearchBoxByType,

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: '',
     },
+    borderless: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     clearButtonTitle: {
       type: String,
       required: false,
@@ -113,11 +118,14 @@ export default {
       ref="input"
       :value="value"
       :disabled="disabled"
-      class="gl-search-box-by-type-input"
+      :class="{
+        'gl-search-box-by-type-input': !borderless,
+        'gl-search-box-by-type-input-borderless': borderless,
+      }"
       v-bind="inputAttributes"
       v-on="inputListeners"
     />
-    <div class="gl-search-box-by-type-right-icons">
+    <div v-if="isLoading || showClearButton" class="gl-search-box-by-type-right-icons">
       <gl-loading-icon v-if="isLoading" class="gl-search-box-by-type-loading-icon" />
       <gl-clear-icon-button
         v-if="showClearButton"

package/dist/components/base/search_box_by_type/index.js

@@ -1 +0,0 @@
-