Commit 58f73094 authored by Sam Beckham's avatar Sam Beckham Committed by Kushal Pandya

Turns the view more participants button into a gl-button

parent 437ae2c8
<script>
import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { __, n__, sprintf } from '~/locale';
import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
......@@ -8,9 +8,10 @@ export default {
GlTooltip: GlTooltipDirective,
},
components: {
userAvatarImage,
GlButton,
GlIcon,
GlLoadingIcon,
userAvatarImage,
},
props: {
loading: {
......@@ -124,9 +125,13 @@ export default {
</div>
</div>
<div v-if="hasMoreParticipants" class="participants-more hide-collapsed">
<button type="button" class="btn-transparent btn-link" @click="toggleMoreParticipants">
{{ toggleLabel }}
</button>
<gl-button
variant="link"
button-text-classes="gl-text-secondary"
data-testid="more-participants"
@click="toggleMoreParticipants"
>{{ toggleLabel }}</gl-button
>
</div>
</div>
</template>
......@@ -17,8 +17,7 @@ const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPA
describe('Participants', () => {
let wrapper;
const getMoreParticipantsButton = () => wrapper.find('button');
const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
const mountComponent = (propsData) =>
......@@ -167,7 +166,7 @@ describe('Participants', () => {
expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
getMoreParticipantsButton().trigger('click');
getMoreParticipantsButton().vm.$emit('click');
expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
});
......
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