Adjust alignment of disabled button

- source
- tests
parent 9266531e
...@@ -181,13 +181,14 @@ export default { ...@@ -181,13 +181,14 @@ export default {
</template> </template>
<template #right-action> <template #right-action>
<gl-dropdown <gl-dropdown
v-if="!isDeleteDisabled" :disabled="isDeleteDisabled"
icon="ellipsis_v" icon="ellipsis_v"
:text="$options.i18n.MORE_ACTIONS_TEXT" :text="$options.i18n.MORE_ACTIONS_TEXT"
:text-sr-only="true" :text-sr-only="true"
category="tertiary" category="tertiary"
no-caret no-caret
right right
:class="{ 'gl-opacity-0 gl-pointer-events-none': isDeleteDisabled }"
data-testid="additional-actions" data-testid="additional-actions"
data-qa-selector="more_actions_menu" data-qa-selector="more_actions_menu"
> >
......
...@@ -283,18 +283,20 @@ describe('tags list row', () => { ...@@ -283,18 +283,20 @@ describe('tags list row', () => {
}); });
it.each` it.each`
canDelete | digest | disabled | visible canDelete | digest | disabled | buttonDisabled
${true} | ${null} | ${true} | ${false} ${true} | ${null} | ${true} | ${true}
${false} | ${'foo'} | ${true} | ${false} ${false} | ${'foo'} | ${true} | ${true}
${false} | ${null} | ${true} | ${false} ${false} | ${null} | ${true} | ${true}
${true} | ${'foo'} | ${true} | ${false} ${true} | ${'foo'} | ${true} | ${true}
${true} | ${'foo'} | ${false} | ${true} ${true} | ${'foo'} | ${false} | ${false}
`( `(
'is $visible that is visible when canDelete is $canDelete and digest is $digest and disabled is $disabled', 'is $visible that is visible when canDelete is $canDelete and digest is $digest and disabled is $disabled',
({ canDelete, digest, disabled, visible }) => { ({ canDelete, digest, disabled, buttonDisabled }) => {
mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest }, disabled }); mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest }, disabled });
expect(findAdditionalActionsMenu().exists()).toBe(visible); expect(findAdditionalActionsMenu().props('disabled')).toBe(buttonDisabled);
expect(findAdditionalActionsMenu().classes('gl-opacity-0')).toBe(buttonDisabled);
expect(findAdditionalActionsMenu().classes('gl-pointer-events-none')).toBe(buttonDisabled);
}, },
); );
......
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