Commit b85e826c authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'migrate-expand-button' into 'master'

Update Expand button

Closes #219806

See merge request gitlab-org/gitlab!36625
parents aceebd5c 757dd3d0
<script>
import { GlDeprecatedButton } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
/**
* Port of detail_behavior expand button.
......@@ -16,8 +15,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'ExpandButton',
components: {
GlDeprecatedButton,
Icon,
GlButton,
},
data() {
return {
......@@ -41,25 +39,23 @@ export default {
</script>
<template>
<span>
<gl-deprecated-button
<gl-button
v-show="isCollapsed"
:aria-label="ariaLabel"
type="button"
class="js-text-expander-prepend text-expander btn-blank"
icon="ellipsis_h"
@click="onClick"
>
<icon :size="12" name="ellipsis_h" />
</gl-deprecated-button>
/>
<span v-if="isCollapsed"> <slot name="short"></slot> </span>
<span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
<gl-deprecated-button
<gl-button
v-show="!isCollapsed"
:aria-label="ariaLabel"
type="button"
class="js-text-expander-append text-expander btn-blank"
icon="ellipsis_h"
@click="onClick"
>
<icon :size="12" name="ellipsis_h" />
</gl-deprecated-button>
/>
</span>
</template>
......@@ -4,20 +4,22 @@ exports[`Expand button on click when short text is provided renders button after
<span>
<button
aria-label="Click to expand text"
class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
class="btn js-text-expander-prepend text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
style="display: none;"
type="button"
>
<!---->
<svg
aria-hidden="true"
class="s12 ic-ellipsis_h"
class="gl-icon s16"
data-testid="ellipsis_h-icon"
>
<use
xlink:href="#ellipsis_h"
href="#ellipsis_h"
/>
</svg>
<!---->
</button>
<!---->
......@@ -30,20 +32,22 @@ exports[`Expand button on click when short text is provided renders button after
<button
aria-label="Click to expand text"
class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
class="btn js-text-expander-append text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
style=""
type="button"
>
<!---->
<svg
aria-hidden="true"
class="s12 ic-ellipsis_h"
class="gl-icon s16"
data-testid="ellipsis_h-icon"
>
<use
xlink:href="#ellipsis_h"
href="#ellipsis_h"
/>
</svg>
<!---->
</button>
</span>
`;
......@@ -52,19 +56,21 @@ exports[`Expand button when short text is provided renders button before text 1`
<span>
<button
aria-label="Click to expand text"
class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
class="btn js-text-expander-prepend text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
type="button"
>
<!---->
<svg
aria-hidden="true"
class="s12 ic-ellipsis_h"
class="gl-icon s16"
data-testid="ellipsis_h-icon"
>
<use
xlink:href="#ellipsis_h"
href="#ellipsis_h"
/>
</svg>
<!---->
</button>
<span>
......@@ -77,20 +83,22 @@ exports[`Expand button when short text is provided renders button before text 1`
<button
aria-label="Click to expand text"
class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
class="btn js-text-expander-append text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
style="display: none;"
type="button"
>
<!---->
<svg
aria-hidden="true"
class="s12 ic-ellipsis_h"
class="gl-icon s16"
data-testid="ellipsis_h-icon"
>
<use
xlink:href="#ellipsis_h"
href="#ellipsis_h"
/>
</svg>
<!---->
</button>
</span>
`;
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