Merge branch 'update-button-props-gitlab-ui-integration-test' into 'master'

GitLab UI: update-button-props integration test

See merge request gitlab-org/gitlab!23108

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -58,7 +58,9 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
      
     <gl-button-stub
       class="flex-grow-0 js-sort-order"
+      size="md"
       title="Sort direction"
+      variant="secondary"
     >
       <icon-stub
         name="sort-lowest"
@@ -71,7 +73,9 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
     class="js-download"
     download="dependencies.json"
     href="http://test.host/dependencies.json"
+    size="md"
     title="Export as JSON"
+    variant="secondary"
   >
     <icon-stub
       name="download"

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap

@@ -155,6 +155,7 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
       >
         <gl-button-stub
           class="bold text-warning-700 text-1 text-decoration-none js-vulnerabilities-toggle"
+          size="md"
           variant="link"
         >
           <icon-stub

ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -38,6 +38,8 @@ exports[`Design management toolbar component renders design and updated data 1`]
   <gl-button-stub
     class="mr-2"
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
+    size="md"
+    variant="secondary"
   >
     <icon-stub
       name="download"

ee/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -5,6 +5,7 @@ exports[`Design management upload button component renders inverted upload desig
   isinverted="true"
 >
   <gl-button-stub
+    size="md"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -28,6 +29,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
 <div>
   <gl-button-stub
     disabled="true"
+    size="md"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -56,6 +58,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
 exports[`Design management upload button component renders upload design button 1`] = `
 <div>
   <gl-button-stub
+    size="md"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >

ee/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -73,6 +73,7 @@ exports[`Design management index page designs renders designs list and header wi
       >
         <gl-button-stub
           class="mr-2 js-select-all"
+          size="md"
           variant="link"
         >
           Select all

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -34,6 +34,8 @@ exports[`dashboard should match the snapshot 1`] = `
     <gl-button-stub
       class="js-add-projects-button btn btn-success"
       role="button"
+      size="md"
+      variant="secondary"
     >
       
       Add projects

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -69,6 +69,8 @@ exports[`Project Header matches the snapshot 1`] = `
       <li>
         <gl-button-stub
           class="js-remove-button"
+          size="md"
+          variant="secondary"
         >
           <span
             class="text-danger"

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -32,6 +32,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
        
       <gl-button-stub
         class="btn-sidebar-action"
+        size="md"
         variant="link"
       >
         

ee/spec/frontend/licenses/components/__snapshots__/license_cards_list_spec.js.snap

@@ -12,6 +12,7 @@ exports[`InstanceCardsList renders a list of license cards 1`] = `
     <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
+      size="md"
       variant="success"
     >
       
@@ -50,6 +51,7 @@ exports[`InstanceCardsList renders a message when there are no licenses 1`] = `
     <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
+      size="md"
       variant="success"
     >
       
@@ -84,6 +86,7 @@ exports[`InstanceCardsList renders a skeleton loading card if loading licenses 1
     <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
+      size="md"
       variant="success"
     >
       

ee/spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap

@@ -25,7 +25,7 @@ exports[`Package code instruction single line to match the default snapshot 1`]
     class="input-group-append js-instruction-button"
   >
     <button
-      class="btn input-group-text btn-secondary btn-default"
+      class="btn input-group-text btn-secondary btn-md btn-default"
       data-clipboard-text="npm i @my-package"
       title="Copy npm install command"
       type="button"

package.json

@@ -40,7 +40,7 @@
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.6.2",
     "@gitlab/svgs": "^1.89.0",
-    "@gitlab/ui": "8.17.0",
+    "@gitlab/ui": "^8.18.0",
     "@gitlab/visual-review-tools": "1.5.1",
     "@sentry/browser": "^5.10.2",
     "@sourcegraph/code-host-integration": "^0.0.18",

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -18,6 +18,8 @@ exports[`grafana integration component default state to match the default snapsh
      
     <gl-button-stub
       class="js-settings-toggle"
+      size="md"
+      variant="secondary"
     >
       Expand
     </gl-button-stub>
@@ -89,6 +91,7 @@ exports[`grafana integration component default state to match the default snapsh
       </gl-form-group-stub>
        
       <gl-button-stub
+        size="md"
         variant="success"
       >
         

spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js

@@ -12,7 +12,7 @@ describe('DateTimePicker', () => {
 
   const dropdownToggle = () => dateTimePicker.find('.dropdown-toggle');
   const dropdownMenu = () => dateTimePicker.find('.dropdown-menu');
-  const applyButtonElement = () => dateTimePicker.find('button[variant="success"]').element;
+  const applyButtonElement = () => dateTimePicker.find('button.btn-success').element;
   const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element;
   const fillInputAndBlur = (input, val) => {
     dateTimePicker.find(input).setValue(val);

spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap

@@ -39,6 +39,7 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
   </form>
    
   <gl-button-stub
+    size="md"
     variant="secondary"
   >
     Cancel
@@ -46,6 +47,7 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
    
   <gl-button-stub
     disabled="true"
+    size="md"
     variant="warning"
   >
     
@@ -55,6 +57,7 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
    
   <gl-button-stub
     disabled="true"
+    size="md"
     variant="danger"
   >
     action

spec/frontend/registry/list/components/__snapshots__/project_empty_state_spec.js.snap

@@ -84,7 +84,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
             class="input-group-append"
           >
             <button
-              class="btn input-group-text btn-secondary btn-default"
+              class="btn input-group-text btn-secondary btn-md btn-default"
               data-clipboard-text="docker login host"
               title="Copy login command"
               type="button"
@@ -122,7 +122,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
             class="input-group-append"
           >
             <button
-              class="btn input-group-text btn-secondary btn-default"
+              class="btn input-group-text btn-secondary btn-md btn-default"
               data-clipboard-text="docker build -t url ."
               title="Copy build command"
               type="button"
@@ -152,7 +152,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
             class="input-group-append"
           >
             <button
-              class="btn input-group-text btn-secondary btn-default"
+              class="btn input-group-text btn-secondary btn-md btn-default"
               data-clipboard-text="docker push url"
               title="Copy push command"
               type="button"

spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap

@@ -159,7 +159,9 @@ exports[`Settings Form renders 1`] = `
       >
         <glbutton-stub
           class="mr-2 d-block"
+          size="md"
           type="reset"
+          variant="secondary"
         >
           
           Cancel
@@ -168,6 +170,7 @@ exports[`Settings Form renders 1`] = `
          
         <glbutton-stub
           class="d-flex justify-content-center align-items-center js-no-auto-disable"
+          size="md"
           type="submit"
           variant="success"
         >

spec/frontend/self_monitor/components/__snapshots__/self_monitor_spec.js.snap

@@ -17,6 +17,8 @@ exports[`self monitor component When the self monitor project has not been creat
      
     <gl-button-stub
       class="js-settings-toggle"
+      size="md"
+      variant="secondary"
     >
       Expand
     </gl-button-stub>

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Expand button on click when short text is provided renders button after text 1`] = `
-"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
-    <use xlink:href=\\"#ellipsis_h\\"></use>
-  </svg></button></span>"
+<span>
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    style="display: none;"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+   
+  <!---->
+   
+  <span>
+    <p>
+      Expanded!
+    </p>
+  </span>
+   
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    style=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+</span>
 `;
 
 exports[`Expand button when short text is provided renders button before text 1`] = `
-"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span>
-<!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
-    <use xlink:href=\\"#ellipsis_h\\"></use>
-  </svg></button></span>"
+<span>
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+   
+  <span>
+    <p>
+      Short
+    </p>
+  </span>
+   
+  <!---->
+   
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    style="display: none;"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+</span>
 `;

spec/frontend/vue_shared/components/expand_button_spec.js

@@ -71,7 +71,7 @@ describe('Expand button', () => {
     it('renders button before text', () => {
       expect(expanderPrependEl().isVisible()).toBe(true);
       expect(expanderAppendEl().isVisible()).toBe(false);
-      expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+      expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
     });
   });
 
@@ -119,7 +119,7 @@ describe('Expand button', () => {
       it('renders button after text', () => {
         expect(expanderPrependEl().isVisible()).toBe(false);
         expect(expanderAppendEl().isVisible()).toBe(true);
-        expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+        expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
       });
     });
   });