Skip to content

Commit b8afbbf

Browse files
mtorromeomtorromeo
committed
fixup
1 parent 22b961b commit b8afbbf

File tree

12 files changed

+301
-316
lines changed

12 files changed

+301
-316
lines changed

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

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -97,18 +97,18 @@
9797
<story-canvas title="Tabs with sub tabs">
9898
<pf-tabs>
9999
<pf-tab title="Users">
100-
<pf-tabs secondary default-active-key="1">
101-
<pf-tab title="Secondary tab item 1"> Secondary tab section 1 </pf-tab>
102-
<pf-tab title="Secondary tab item 2"> Secondary tab section 2 </pf-tab>
103-
<pf-tab title="Secondary tab item 3"> Secondary tab section 3 </pf-tab>
104-
<pf-tab title="Secondary tab item 4"> Secondary tab section 4 </pf-tab>
105-
<pf-tab disabled title="Secondary tab item 5"> Secondary tab section 5 </pf-tab>
106-
<pf-tab disabled title="Secondary tab item 6"> Secondary tab section 6 </pf-tab>
107-
<pf-tab title="Secondary tab item 7"> Secondary tab section 7 </pf-tab>
108-
<pf-tab title="Secondary tab item 8"> Secondary tab section 8 </pf-tab>
109-
<pf-tab title="Secondary tab item 9"> Secondary tab section 9 </pf-tab>
110-
<pf-tab title="Secondary tab item 10"> Secondary tab section 10 </pf-tab>
111-
<pf-tab title="Secondary tab item 11"> Secondary tab section 11 </pf-tab>
100+
<pf-tabs subtab default-active-key="1">
101+
<pf-tab title="Subtab item 1"> Subtab section 1 </pf-tab>
102+
<pf-tab title="Subtab item 2"> Subtab section 2 </pf-tab>
103+
<pf-tab title="Subtab item 3"> Subtab section 3 </pf-tab>
104+
<pf-tab title="Subtab item 4"> Subtab section 4 </pf-tab>
105+
<pf-tab disabled title="Subtab item 5"> Subtab section 5 </pf-tab>
106+
<pf-tab disabled title="Subtab item 6"> Subtab section 6 </pf-tab>
107+
<pf-tab title="Subtab item 7"> Subtab section 7 </pf-tab>
108+
<pf-tab title="Subtab item 8"> Subtab section 8 </pf-tab>
109+
<pf-tab title="Subtab item 9"> Subtab section 9 </pf-tab>
110+
<pf-tab title="Subtab item 10"> Subtab section 10 </pf-tab>
111+
<pf-tab title="Subtab item 11"> Subtab section 11 </pf-tab>
112112
</pf-tabs>
113113
</pf-tab>
114114
<pf-tab title="Containers"> Containers </pf-tab>
@@ -124,6 +124,22 @@
124124
</pf-tabs>
125125
</story-canvas>
126126

127+
<story-canvas title="Tabs horizontal overflow">
128+
<pf-tabs overflow-horizontal>
129+
<pf-tab title="Users"> Users </pf-tab>
130+
<pf-tab title="Containers"> Containers </pf-tab>
131+
<pf-tab disabled title="Database"> Database </pf-tab>
132+
<pf-tab title="Server"> Server </pf-tab>
133+
<pf-tab title="System"> System </pf-tab>
134+
<pf-tab title="Network"> Network </pf-tab>
135+
<pf-tab title="Tab item 7"> Tab section 7 </pf-tab>
136+
<pf-tab title="Tab item 8"> Tab section 8 </pf-tab>
137+
<pf-tab title="Tab item 9"> Tab section 9 </pf-tab>
138+
<pf-tab title="Tab item 10"> Tab section 10 </pf-tab>
139+
<pf-tab title="Tab item 11"> Tab section 11 </pf-tab>
140+
</pf-tabs>
141+
</story-canvas>
142+
127143
<story-canvas title="Separate content">
128144
<pf-tabs>
129145
<pf-tab title="Users" :content-ref="tabUsers" />

‎packages/core/src/components/Card/CardActions.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ defineOptions({
1414
});
1515
1616
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
17-
/** Flag indicating that the actions have no offset. */
17+
/** Flag indicating that the actions have no offset. */
1818
noOffset?: boolean;
1919
}
2020

‎packages/core/src/components/ChipGroup/Chip.vue‎

Lines changed: 7 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,24 @@
11
<template>
2-
<component
3-
:is="component"
4-
v-if="overflow"
5-
:id="effectiveId"
6-
v-bind="{...ouiaProps, ...$attrs}"
7-
:class="[styles.chip, styles.modifiers.overflow]"
8-
:style="{
9-
'--pf-v6-c-chip__text--MaxWidth': textMaxWidth,
10-
}"
11-
:type="component === 'button' ? 'button' : undefined"
12-
@click="emit('click', $event)"
13-
>
14-
<span :class="styles.chipContent">
15-
<span :class="styles.chipText">
16-
<slot />
17-
</span>
18-
<slot name="badge" />
19-
</span>
20-
</component>
21-
22-
<pf-tooltip v-else :position="props.tooltipPosition">
23-
<template v-if="textOverflowing" #content>
24-
<slot />
25-
</template>
26-
27-
<component
28-
:is="component"
29-
v-bind="$attrs"
30-
:class="styles.chip"
31-
:style="{
32-
[cssChipTextMaxWidth.name]: textMaxWidth,
33-
}"
34-
:type="component === 'button' ? 'button' : undefined"
35-
>
36-
<span :class="styles.chipContent">
37-
<span :id="effectiveId" ref="textRef" :class="styles.chipText">
38-
<slot />
39-
</span>
40-
<slot name="badge" />
41-
</span>
42-
43-
<span v-if="!readonly" :class="styles.chipActions">
44-
<pf-button
45-
v-if="!readonly"
46-
:id="`remove_${effectiveId}`"
47-
variant="plain"
48-
:aria-label="closeBtnAriaLabel"
49-
:aria-labelledby="`remove_${effectiveId} ${effectiveId}`"
50-
@click="emit('click', $event)"
51-
>
52-
<xmark-icon aria-hidden />
53-
</pf-button>
54-
</span>
55-
</component>
56-
</pf-tooltip>
2+
<pf-label v-bind="ouiaProps" variant="outline">
3+
<slot />
4+
</pf-label>
575
</template>
586

597
<script lang="ts" setup>
60-
// import styles from '@patternfly/react-styles/css/components/Chip/chip';
61-
// import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth';
8+
import PfLabel, { type Props as LabelProps } from '../Label/Label.vue';
629
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
63-
import XmarkIcon from '@vue-patternfly/icons/xmark-icon';
64-
import PfButton from '../Button.vue';
65-
import PfTooltip from '../Tooltip/Tooltip.vue';
66-
import { getUniqueId } from '../../util';
67-
import { useElementOverflow } from '../../use';
68-
import { type Component, computed, ref, type Ref, type HTMLAttributes } from 'vue';
69-
import type { Placement } from '../../helpers/FloatingUi.vue';
7010
7111
defineOptions({
7212
name: 'PfChip',
73-
inheritAttrs: false,
7413
});
7514
76-
export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'type' | 'onClick'> {
77-
id?: string;
78-
readonly?: boolean;
79-
overflow?: boolean;
80-
component?: string | Component;
81-
tooltipPosition?: Placement;
82-
closeBtnAriaLabel?: string;
83-
/** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
84-
textMaxWidth?: string;
15+
export interface Props extends OUIAProps, /* @vue-ignore */ Omit<LabelProps, 'variant'> {
8516
}
8617
87-
const props = withDefaults(defineProps<Props>(), {
88-
component: 'div',
89-
tooltipPosition: 'top',
90-
closeBtnAriaLabel: 'close',
91-
});
18+
const props = defineProps<Props>();
9219
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
9320
94-
const emit = defineEmits<{
95-
(name: 'click', e: PointerEvent): void;
96-
}>();
97-
98-
defineSlots<{
21+
const slots = defineSlots<{
9922
default?: (props?: Record<never, never>) => any;
100-
badge?: (props?: Record<never, never>) => any;
10123
}>();
102-
103-
const textRef: Ref<HTMLSpanElement | undefined> = ref();
104-
const textOverflowing = useElementOverflow(textRef);
105-
const effectiveId = computed(() => props.id ?? getUniqueId());
10624
</script>

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

Lines changed: 10 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,27 @@
11
<template>
2-
<div
3-
v-if="$slots.default"
2+
<pf-label-group
43
v-bind="ouiaProps"
5-
:id="id"
6-
:class="[styles.chipGroup, {
7-
[styles.modifiers.category]: category,
8-
}]"
4+
:num-labels="numChips"
5+
:close-btn-aria-label="closeBtnAriaLabel"
6+
:aria-label="ariaLabel"
7+
:expanded-text="expandedText"
8+
:collapsed-text="collapsedText"
99
>
10-
<div :class="styles.chipGroupMain">
11-
<pf-tooltip v-if="category">
12-
<template v-if="labelOverflowing" #content>
13-
{{ category }}
14-
</template>
15-
16-
<span ref="labelRef" :class="styles.chipGroupLabel">
17-
{{ category }}
18-
</span>
19-
</pf-tooltip>
20-
21-
<ul
22-
:class="styles.chipGroupList"
23-
:aria-labelledby="id"
24-
:aria-label="ariaLabel"
25-
role="list"
26-
>
27-
<render />
28-
</ul>
29-
30-
<div v-if="closable" :class="styles.chipGroupClose">
31-
<pf-button variant="plain" :aria-label="closeBtnAriaLabel" @click="emit('click', $event)">
32-
<circle-xmark-icon aria-hidden />
33-
</pf-button>
34-
</div>
35-
</div>
36-
</div>
10+
<slot />
11+
</pf-label-group>
3712
</template>
3813

3914
<script lang="ts" setup>
40-
import { h, ref, type Ref, type HTMLAttributes } from 'vue';
41-
// import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
42-
import CircleXmarkIcon from '@vue-patternfly/icons/circle-xmark-icon';
43-
import PfChip from './Chip.vue';
44-
import PfButton from '../Button.vue';
45-
import PfTooltip from '../Tooltip/Tooltip.vue';
46-
import { findChildrenVNodes, fillTemplate } from '../../util';
47-
import { useElementOverflow } from '../../use';
15+
import PfLabelGroup, { type Props as LabelGroupProps } from '../Label/LabelGroup.vue';
4816
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
49-
import type { Placement } from '../../helpers/FloatingUi.vue';
5017
5118
defineOptions({
5219
name: 'PfChipGroup',
5320
});
5421
55-
export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'onClick'> {
22+
export interface Props extends OUIAProps, /* @vue-ignore */ Omit<LabelGroupProps, 'numLabels'> {
5623
id?: string;
57-
defaultOpen?: boolean;
58-
closable?: boolean;
59-
category?: string;
6024
numChips?: number;
61-
tooltipPosition?: Placement;
6225
closeBtnAriaLabel?: string;
6326
ariaLabel?: string;
6427
expandedText?: string;
@@ -67,58 +30,14 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes,
6730
6831
const props = withDefaults(defineProps<Props>(), {
6932
numChips: 3,
70-
tooltipPosition: 'top',
7133
closeBtnAriaLabel: 'Close chip group',
7234
ariaLabel: 'Chip group category',
7335
expandedText: 'Show Less',
7436
collapsedText: '${remaining} more',
7537
});
7638
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
7739
78-
const emit = defineEmits<{
79-
(name: 'click', e: PointerEvent): void;
80-
(name: 'overflow-chip-click', e: PointerEvent): void;
81-
}>();
82-
8340
const slots = defineSlots<{
8441
default?: (props?: Record<never, never>) => any;
8542
}>();
86-
87-
const labelRef: Ref<HTMLSpanElement | undefined> = ref();
88-
const labelOverflowing = useElementOverflow(labelRef);
89-
const open = ref(props.defaultOpen);
90-
91-
function overflowChipClick(e: PointerEvent) {
92-
toggleCollapse();
93-
emit('overflow-chip-click', e);
94-
}
95-
96-
function toggleCollapse() {
97-
open.value = !open.value;
98-
}
99-
100-
function render() {
101-
const children = slots.default ? findChildrenVNodes(slots.default({})) : [];
102-
103-
const chipArray = open.value ? children : children.slice(0, props.numChips);
104-
105-
const lis = chipArray.map((child, i) => h('li', { key: i, class: styles.chipGroupListItem }, child));
106-
107-
if (children.length > props.numChips) {
108-
const collapsedTextResult = fillTemplate(props.collapsedText, {
109-
remaining: children.length - chipArray.length,
110-
});
111-
lis.push(h('li', { class: styles.chipGroupListItem }, [
112-
h(PfChip, {
113-
component: 'button',
114-
overflow: true,
115-
onClick: overflowChipClick as (e: MouseEvent) => void,
116-
},
117-
() => open.value ? props.expandedText : collapsedTextResult,
118-
),
119-
]));
120-
}
121-
122-
return lis;
123-
}
12443
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div v-bind="(ouiaProps as any)" :class="styles.inputGroup">
2+
<div v-bind="ouiaProps" :class="styles.inputGroup">
33
<slot />
44
</div>
55
</template>

‎packages/core/src/components/Menu/MenuList.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,8 @@ provide(MenuListInjectionKey, {
3939
parentMenu,
4040
el,
4141
});
42+
43+
defineExpose({
44+
el,
45+
});
4246
</script>

0 commit comments

Comments
 (0)