Skip to content

G
gitlab-ce
Commit e5ff5eb3 authored by Brandon Labuschagne's avatar Brandon Labuschagne
Browse files
Options

Merge branch... 

Merge branch 'Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/vue_shared/components/split_button.vue' into 'master'

Replace gl deprecated dropdown with gl dropdown in app/assets/javascripts/vue shared/components/split button.vue

See merge request gitlab-org/gitlab!41433
parents a32f5726 ed142f83
Show whitespace changes
Inline Side-by-side
Showing with 120 additions and 48 deletions
app/assets/javascripts/vue_shared/components/split_button.vue
View file @ e5ff5eb3
<script> <script>
import { isString } from 'lodash'; import { isString } from 'lodash';
import { import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui';
GlDeprecatedDropdown,
GlDeprecatedDropdownDivider,
GlDeprecatedDropdownItem,
} from '@gitlab/ui';
const isValidItem = item => const isValidItem = item =>
isString(item.eventName) && isString(item.title) && isString(item.description); isString(item.eventName) && isString(item.title) && isString(item.description);
export default { export default {
components: { components: {
GlDeprecatedDropdown, GlDropdown,
GlDeprecatedDropdownDivider, GlDropdownDivider,
GlDeprecatedDropdownItem, GlDropdownItem,
}, },
props: { props: {
...@@ -32,7 +28,7 @@ export default { ...@@ -32,7 +28,7 @@ export default {
variant: { variant: {
type: String, type: String,
required: false, required: false,
default: 'secondary', default: 'default',
}, },
}, },
...@@ -61,8 +57,8 @@ export default { ...@@ -61,8 +57,8 @@ export default {
</script> </script>
<template> <template>
<gl-deprecated-dropdown <gl-dropdown
:menu-class="`dropdown-menu-selectable ${menuClass}`" :menu-class="menuClass"
split split
:text="dropdownToggleText" :text="dropdownToggleText"
:variant="variant" :variant="variant"
...@@ -70,20 +66,20 @@ export default { ...@@ -70,20 +66,20 @@ export default {
@click="triggerEvent" @click="triggerEvent"
> >
<template v-for="(item, itemIndex) in actionItems"> <template v-for="(item, itemIndex) in actionItems">
<gl-deprecated-dropdown-item <gl-dropdown-item
:key="item.eventName" :key="item.eventName"
:active="selectedItem === item" :is-check-item="true"
active-class="is-active" :is-checked="selectedItem === item"
@click="changeSelectedItem(item)" @click="changeSelectedItem(item)"
> >
<strong>{{ item.title }}</strong> <strong>{{ item.title }}</strong>
<div>{{ item.description }}</div> <div>{{ item.description }}</div>
</gl-deprecated-dropdown-item> </gl-dropdown-item>
<gl-deprecated-dropdown-divider <gl-dropdown-divider
v-if="itemIndex < actionItems.length - 1" v-if="itemIndex < actionItems.length - 1"
:key="`${item.eventName}-divider`" :key="`${item.eventName}-divider`"
/> />
</template> </template>
</gl-deprecated-dropdown> </gl-dropdown>
</template> </template>
changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-vu.yml 0 → 100644
View file @ e5ff5eb3
---
title: Replace `GlDeprecatedDropdown` with `GlDropdown` in app/assets/javascripts/vue_shared/components/split_button.vue
merge_request: 41433
author: nuwe1
type: other
spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
View file @ e5ff5eb3
...@@ -5,14 +5,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -5,14 +5,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
class="gl-display-flex gl-justify-content-end" class="gl-display-flex gl-justify-content-end"
> >
<div <div
class="dropdown b-dropdown gl-dropdown btn-group" class="dropdown b-dropdown gl-new-dropdown btn-group"
menu-class="dropdown-menu-large"
> >
<button <button
class="btn btn-danger" class="btn btn-danger btn-md gl-button split-content-button"
type="button" type="button"
> >
<!---->
<span <span
class="gl-dropdown-toggle-text" class="gl-new-dropdown-button-text"
> >
Remove integration and resources Remove integration and resources
</span> </span>
...@@ -22,7 +25,7 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -22,7 +25,7 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
<button <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="btn dropdown-toggle btn-danger dropdown-toggle-split" class="btn dropdown-toggle btn-danger btn-md gl-button gl-dropdown-toggle dropdown-toggle-split"
type="button" type="button"
> >
<span <span
...@@ -32,17 +35,39 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -32,17 +35,39 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
</span> </span>
</button> </button>
<ul <ul
class="dropdown-menu dropdown-menu-selectable dropdown-menu-large" class="dropdown-menu dropdown-menu-large"
role="menu" role="menu"
tabindex="-1" tabindex="-1"
> >
<!---->
<li <li
class="gl-new-dropdown-item"
role="presentation" role="presentation"
> >
<button <button
class="dropdown-item is-active" class="dropdown-item"
role="menuitem" role="menuitem"
type="button" type="button"
>
<svg
class="gl-icon s16 gl-new-dropdown-item-check-icon"
data-testid="mobile-issue-close-icon"
>
<use
href="#mobile-issue-close"
/>
</svg>
<!---->
<!---->
<div
class="gl-new-dropdown-item-text-wrapper"
>
<p
class="gl-new-dropdown-item-text-primary"
> >
<strong> <strong>
Remove integration and resources Remove integration and resources
...@@ -51,10 +76,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -51,10 +76,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
<div> <div>
Deletes all GitLab resources attached to this cluster during removal Deletes all GitLab resources attached to this cluster during removal
</div> </div>
</p>
<!---->
</div>
<!---->
</button> </button>
</li> </li>
<li <li
class="gl-new-dropdown-divider"
role="presentation" role="presentation"
> >
<hr <hr
...@@ -64,12 +96,32 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -64,12 +96,32 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
/> />
</li> </li>
<li <li
class="gl-new-dropdown-item"
role="presentation" role="presentation"
> >
<button <button
class="dropdown-item" class="dropdown-item"
role="menuitem" role="menuitem"
type="button" type="button"
>
<svg
class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden"
data-testid="mobile-issue-close-icon"
>
<use
href="#mobile-issue-close"
/>
</svg>
<!---->
<!---->
<div
class="gl-new-dropdown-item-text-wrapper"
>
<p
class="gl-new-dropdown-item-text-primary"
> >
<strong> <strong>
Remove integration Remove integration
...@@ -78,6 +130,12 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ ...@@ -78,6 +130,12 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
<div> <div>
Removes cluster from project but keeps associated resources Removes cluster from project but keeps associated resources
</div> </div>
</p>
<!---->
</div>
<!---->
</button> </button>
</li> </li>
......
spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
View file @ e5ff5eb3
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SplitButton renders actionItems 1`] = ` exports[`SplitButton renders actionItems 1`] = `
<gl-deprecated-dropdown-stub <gl-dropdown-stub
menu-class="dropdown-menu-selectable " category="tertiary"
headertext=""
menu-class=""
size="medium"
split="true" split="true"
text="professor" text="professor"
variant="secondary" variant="default"
> >
<gl-deprecated-dropdown-item-stub <gl-dropdown-item-stub
active="true" avatarurl=""
active-class="is-active" iconcolor=""
iconname=""
iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext=""
> >
<strong> <strong>
professor professor
...@@ -18,11 +26,16 @@ exports[`SplitButton renders actionItems 1`] = ` ...@@ -18,11 +26,16 @@ exports[`SplitButton renders actionItems 1`] = `
<div> <div>
very symphonic very symphonic
</div> </div>
</gl-deprecated-dropdown-item-stub> </gl-dropdown-item-stub>
<gl-deprecated-dropdown-divider-stub /> <gl-dropdown-divider-stub />
<gl-deprecated-dropdown-item-stub <gl-dropdown-item-stub
active-class="is-active" avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischeckitem="true"
secondarytext=""
> >
<strong> <strong>
captain captain
...@@ -31,8 +44,8 @@ exports[`SplitButton renders actionItems 1`] = ` ...@@ -31,8 +44,8 @@ exports[`SplitButton renders actionItems 1`] = `
<div> <div>
warp drive warp drive
</div> </div>
</gl-deprecated-dropdown-item-stub> </gl-dropdown-item-stub>
<!----> <!---->
</gl-deprecated-dropdown-stub> </gl-dropdown-stub>
`; `;
spec/frontend/vue_shared/components/split_button_spec.js
View file @ e5ff5eb3
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import SplitButton from '~/vue_shared/components/split_button.vue'; import SplitButton from '~/vue_shared/components/split_button.vue';
...@@ -25,10 +25,10 @@ describe('SplitButton', () => { ...@@ -25,10 +25,10 @@ describe('SplitButton', () => {
}); });
}; };
const findDropdown = () => wrapper.find(GlDeprecatedDropdown); const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItem = (index = 0) => const findDropdownItem = (index = 0) =>
findDropdown() findDropdown()
.findAll(GlDeprecatedDropdownItem) .findAll(GlDropdownItem)
.at(index); .at(index);
const selectItem = index => { const selectItem = index => {
findDropdownItem(index).vm.$emit('click'); findDropdownItem(index).vm.$emit('click');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7