Skip to content

Commit 508b496

Browse files
mtorromeomtorromeo
committed
feat(ActionList): implemented components
1 parent 0ac8495 commit 508b496

File tree

6 files changed

+171
-0
lines changed

6 files changed

+171
-0
lines changed

‎apps/docs/src/stories/Components/ActionList.story.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<doc-page title="Action List">
3+
<template #description>
4+
<pre v-md>An **action list** is a group of actions, controls, or buttons with set spacing.</pre>
5+
</template>
6+
7+
<template #apidocs>
8+
<component-info src="packages/core/src/components/ActionList.vue" />
9+
<component-info src="packages/core/src/components/ActionListGroup.vue" />
10+
<component-info src="packages/core/src/components/ActionListItem.vue" />
11+
</template>
12+
13+
<story-canvas title="Action list single group">
14+
<pf-action-list>
15+
<pf-action-list-item>
16+
<pf-button variant="primary">Next</pf-button>
17+
</pf-action-list-item>
18+
<pf-action-list-item>
19+
<pf-button variant="secondary">Back</pf-button>
20+
</pf-action-list-item>
21+
</pf-action-list>
22+
</story-canvas>
23+
24+
<story-canvas title="Action list single group with kebab">
25+
<pf-action-list>
26+
<pf-action-list-item>
27+
<pf-button variant="primary">Next</pf-button>
28+
</pf-action-list-item>
29+
<pf-action-list-item>
30+
<pf-button variant="secondary">Back</pf-button>
31+
</pf-action-list-item>
32+
<pf-action-list-item>
33+
<pf-dropdown>
34+
<template #toggle>
35+
<pf-menu-toggle variant="plain">
36+
<ellipsis-vertical-icon />
37+
</pf-menu-toggle>
38+
</template>
39+
40+
<pf-dropdown-item>Link</pf-dropdown-item>
41+
<pf-dropdown-item component="button">Action</pf-dropdown-item>
42+
<pf-dropdown-item disabled>Disabled Link</pf-dropdown-item>
43+
<pf-dropdown-item disabled component="button">Disabled Action</pf-dropdown-item>
44+
<pf-divider />
45+
<pf-dropdown-item>Separated Link</pf-dropdown-item>
46+
<pf-dropdown-item component="button">Separated Action</pf-dropdown-item>
47+
</pf-dropdown>
48+
</pf-action-list-item>
49+
</pf-action-list>
50+
</story-canvas>
51+
52+
<story-canvas title="Action list with icons">
53+
<pf-action-list icon-list>
54+
<pf-action-list-item>
55+
<pf-button variant="plain"><x-icon /></pf-button>
56+
</pf-action-list-item>
57+
<pf-action-list-item>
58+
<pf-button variant="plain"><check-icon /></pf-button>
59+
</pf-action-list-item>
60+
</pf-action-list>
61+
</story-canvas>
62+
63+
<story-canvas title="Action list multiple groups">
64+
<pf-action-list>
65+
<pf-action-list-group>
66+
<pf-action-list-item>
67+
<pf-button variant="primary">Next</pf-button>
68+
</pf-action-list-item>
69+
<pf-action-list-item>
70+
<pf-button variant="secondary">Back</pf-button>
71+
</pf-action-list-item>
72+
</pf-action-list-group>
73+
<pf-action-list-group>
74+
<pf-action-list-item>
75+
<pf-button variant="primary">Submit</pf-button>
76+
</pf-action-list-item>
77+
<pf-action-list-item>
78+
<pf-button variant="secondary">Cancel</pf-button>
79+
</pf-action-list-item>
80+
</pf-action-list-group>
81+
</pf-action-list>
82+
</story-canvas>
83+
</doc-page>
84+
</template>
85+
86+
<script lang="ts" setup>
87+
import EllipsisVerticalIcon from '@vue-patternfly/icons/ellipsis-vertical-icon';
88+
import XIcon from '@vue-patternfly/icons/x-icon';
89+
import CheckIcon from '@vue-patternfly/icons/check-icon';
90+
</script>

‎packages/core/src/components/ActionList/ActionList.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div v-bind="(ouiaProps as any)" :class="[styles.actionList, { [styles.modifiers.icons]: iconList }]">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
9+
import type { HTMLAttributes } from 'vue';
10+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
11+
12+
defineOptions({
13+
name: 'PfActionList',
14+
});
15+
16+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17+
/** Flag indicating the action list contains multiple icons and item padding should be removed */
18+
iconList?: boolean;
19+
}
20+
21+
const props = defineProps<Props>();
22+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
23+
24+
defineSlots<{
25+
default?: (props?: Record<never, never>) => any;
26+
}>();
27+
</script>

‎packages/core/src/components/ActionList/ActionListGroup.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div v-bind="(ouiaProps as any)" :class="styles.actionListGroup">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
9+
import type { HTMLAttributes } from 'vue';
10+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
11+
12+
defineOptions({
13+
name: 'PfActionListGroup',
14+
});
15+
16+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17+
}
18+
19+
const props = defineProps<Props>();
20+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
21+
22+
defineSlots<{
23+
default?: (props?: Record<never, never>) => any;
24+
}>();
25+
</script>

‎packages/core/src/components/ActionList/ActionListItem.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div v-bind="(ouiaProps as any)" :class="`${styles.actionList}__item`">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
9+
import type { HTMLAttributes } from 'vue';
10+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
11+
12+
defineOptions({
13+
name: 'PfActionListItem',
14+
});
15+
16+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17+
}
18+
19+
const props = defineProps<Props>();
20+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
21+
22+
defineSlots<{
23+
default?: (props?: Record<never, never>) => any;
24+
}>();
25+
</script>

‎packages/core/src/components/ActionList/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as PfActionList } from './ActionList.vue';
2+
export { default as PfActionListGroup } from './ActionListGroup.vue';
3+
export { default as PfActionListItem } from './ActionListItem.vue';

‎packages/core/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export { default as PfTextarea } from './Textarea.vue';
2222
export { default as PfTextInput } from './TextInput.vue';
2323
export { default as PfTitle } from './Title.vue';
2424
export * from './Accordion';
25+
export * from './ActionList';
2526
export * from './Alert';
2627
export * from './Breadcrumb';
2728
export * from './Card';

0 commit comments

Comments
 (0)