Skip to content

Commit 2bc1c1f

Browse files
mtorromeomtorromeo
committed
fix(core)!: uniformed slot names to lower case with dashes
1 parent 60a0aaa commit 2bc1c1f

File tree

8 files changed

+43
-42
lines changed

8 files changed

+43
-42
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<story-canvas title="Invalid with form alert">
5252
<pf-form>
5353
<pf-form-group label="Age" label-info="Additional label info" field-id="age" helper-text-invalid="Age has to be a number">
54-
<template v-if="age === ''" #helperText>
54+
<template v-if="age === ''" #helper-text>
5555
Please enter your age
5656
</template>
5757
<template #helper-text-icon>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
<pf-icon :in-progress="inProgress2">
176176
<CircleCheckIcon />
177177

178-
<template #progressIcon>
178+
<template #progress-icon>
179179
<pf-spinner diameter="2em" aria-label="Loading..." />
180180
</template>
181181
</pf-icon>

‎packages/core/src/components/Form/FormGroup.vue‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
<div
44
v-if="label || $slots.label"
55
:class="[styles.formGroupLabel, {
6-
[styles.modifiers.info]: labelInfo || $slots.labelInfo,
6+
[styles.modifiers.info]: labelInfo || $slots['label-info'],
77
[styles.modifiers.noPaddingTop]: noPaddingTop,
88
}]"
99
>
10+
{{ Object.keys($slots) }}
1011
<component
11-
:is="(labelInfo || $slots.labelInfo) ? 'div' : PassThrough"
12+
:is="(labelInfo || $slots['label-info']) ? 'div' : PassThrough"
1213
:class="styles.formGroupLabelMain"
1314
>
1415
<label :class="styles.formLabel" :for="fieldId">
@@ -18,11 +19,11 @@
1819
<span v-if="required" :class="styles.formLabelRequired" aria-hidden="true">{{ ' *' }}</span>
1920
</label>
2021
{{ ' ' }}
21-
<slot name="labelIcon" />
22+
<slot name="label-icon" />
2223
</component>
2324

24-
<div v-if="labelInfo || $slots.labelInfo" :class="styles.formGroupLabelInfo">
25-
<slot name="labelInfo">{{ labelInfo }}</slot>
25+
<div v-if="labelInfo || $slots['label-info']" :class="styles.formGroupLabelInfo">
26+
<slot name="label-info">{{ labelInfo }}</slot>
2627
</div>
2728
</div>
2829

@@ -35,7 +36,7 @@
3536
<slot v-if="!helperTextBeforeField" />
3637

3738
<div
38-
v-if="internalValidated === 'error' ? (helperTextInvalid || $slots.helperTextInvalid) : (helperText || $slots.helperText)"
39+
v-if="internalValidated === 'error' ? (helperTextInvalid || $slots['helper-text-invalid']) : (helperText || $slots['helper-text'])"
3940
:id="`${fieldId}-helper`"
4041
:class="[styles.formHelperText, {
4142
[styles.modifiers.success]: internalValidated === 'success',
@@ -45,17 +46,17 @@
4546
aria-live="polite"
4647
>
4748
<template v-if="internalValidated === 'error'">
48-
<span v-if="$slots.helperTextInvalidIcon" :class="styles.formHelperTextIcon">
49-
<slot name="helperTextInvalidIcon" />
49+
<span v-if="$slots['helper-text-invalid-icon']" :class="styles.formHelperTextIcon">
50+
<slot name="helper-text-invalid-icon" />
5051
</span>
51-
<slot name="helperTextInvalid">{{ helperTextInvalid }}</slot>
52+
<slot name="helper-text-invalid">{{ helperTextInvalid }}</slot>
5253
</template>
5354

54-
<template v-else-if="helperText || $slots.helperText">
55-
<span v-if="$slots.helperTextIcon" :class="styles.formHelperTextIcon">
56-
<slot name="helperTextIcon" />
55+
<template v-else-if="helperText || $slots['helper-text']">
56+
<span v-if="$slots['helper-text-icon']" :class="styles.formHelperTextIcon">
57+
<slot name="helper-text-icon" />
5758
</span>
58-
<slot name="helperText">{{ helperText }}</slot>
59+
<slot name="helper-text">{{ helperText }}</slot>
5960
</template>
6061
</div>
6162
<slot v-if="helperTextBeforeField" />
@@ -119,12 +120,12 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
119120
defineSlots<{
120121
default: (props?: Record<never, never>) => any;
121122
label?: (props?: Record<never, never>) => any;
122-
'labelIcon'?: (props?: Record<never, never>) => any;
123-
'labelInfo'?: (props?: Record<never, never>) => any;
124-
'helperTextInvalidIcon'?: (props?: Record<never, never>) => any;
125-
'helperTextInvalid'?: (props?: Record<never, never>) => any;
126-
'helperTextIcon'?: (props?: Record<never, never>) => any;
127-
'helperText'?: (props?: Record<never, never>) => any;
123+
'label-icon'?: (props?: Record<never, never>) => any;
124+
'label-info'?: (props?: Record<never, never>) => any;
125+
'helper-text-invalid-icon'?: (props?: Record<never, never>) => any;
126+
'helper-text-invalid'?: (props?: Record<never, never>) => any;
127+
'helper-text-icon'?: (props?: Record<never, never>) => any;
128+
'helper-text'?: (props?: Record<never, never>) => any;
128129
}>();
129130
130131
import { computed } from 'vue';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<slot />
1515
</span>
1616
<span v-if="inProgress" :class="[styles.iconProgress, progressIconSize && styles.modifiers[progressIconSize]]">
17-
<slot name="progressIcon">
17+
<slot name="progress-icon">
1818
<pf-spinner diameter="1em" :aria-label="defaultProgressArialabel" />
1919
</slot>
2020
</span>
@@ -59,6 +59,6 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
5959
6060
defineSlots<{
6161
default?: (props?: Record<never, never>) => any;
62-
progressIcon?: (props?: Record<never, never>) => any;
62+
'progress-icon'?: (props?: Record<never, never>) => any;
6363
}>();
6464
</script>

‎packages/core/src/components/LoginPage/LoginMainFooter.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<ul v-if="$slots.social" :class="styles.loginMainFooterLinks">
55
<slot name="social" />
66
</ul>
7-
<div v-if="$slots.signup || $slots.forgotCredentials" :class="styles.loginMainFooterBand">
7+
<div v-if="$slots.signup || $slots['forgot-credentials']" :class="styles.loginMainFooterBand">
88
<slot name="signup" />
9-
<slot name="forgotCredentials" />
9+
<slot name="forgot-credentials" />
1010
</div>
1111
</div>
1212
</template>
@@ -28,8 +28,8 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
2828
2929
defineSlots<{
3030
default: (props?: Record<never, never>) => any;
31-
social: (props?: Record<never, never>) => any;
32-
signup: (props?: Record<never, never>) => any;
33-
forgotCredentials: (props?: Record<never, never>) => any;
31+
social?: (props?: Record<never, never>) => any;
32+
signup?: (props?: Record<never, never>) => any;
33+
'forgot-credentials'?: (props?: Record<never, never>) => any;
3434
}>();
3535
</script>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<pf-login-footer>
1313
<p>{{ textContent }}</p>
1414
<pf-list :variant="footerListVariants">
15-
<slot name="footerListItems" />
15+
<slot name="footer-list-items" />
1616
</pf-list>
1717
</pf-login-footer>
1818
</template>
@@ -27,12 +27,12 @@
2727
<slot />
2828
</pf-login-main-body>
2929

30-
<pf-login-main-footer v-if="$slots.social || $slots.forgotCredentials || $slots.signup">
30+
<pf-login-main-footer v-if="$slots.social || $slots['forgot-credentials'] || $slots.signup">
3131
<template v-if="$slots.social" #social>
3232
<slot name="social" />
3333
</template>
34-
<template v-if="$slots.forgotCredentials" #forgotCredentials>
35-
<slot name="forgotCredentials" />
34+
<template v-if="$slots['forgot-credentials']" #forgot-credentials>
35+
<slot name="forgot-credentials" />
3636
</template>
3737
<template v-if="$slots.signup" #signup>
3838
<slot name="signup" />
@@ -84,9 +84,9 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
8484
defineSlots<{
8585
default: (props?: Record<never, never>) => any;
8686
utilities: (props?: Record<never, never>) => any;
87-
footerListItems: (props?: Record<never, never>) => any;
87+
'footer-list-items': (props?: Record<never, never>) => any;
8888
social: (props?: Record<never, never>) => any;
89-
forgotCredentials: (props?: Record<never, never>) => any;
89+
'forgot-credentials': (props?: Record<never, never>) => any;
9090
signup: (props?: Record<never, never>) => any;
9191
}>();
9292
</script>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
:class="[styles.menuItem, {[styles.modifiers.selected]: effectiveSelected && !check}]"
2222
:aria-current="ariaCurrent"
2323
:disabled="(disabled && !check && component !== 'a') || undefined"
24-
:role="(!$slots.flyoutMenu && !check) ? 'menuitem' : undefined"
24+
:role="(!$slots['flyout-menu'] && !check) ? 'menuitem' : undefined"
2525
:for="copy || check ? undefined : randomId"
2626
:href="component === 'a' ? to : undefined"
2727
:aria-disabled="component === 'a' && disabled ? disabled : undefined"
@@ -55,7 +55,7 @@
5555
<span v-if="externalLink" :class="styles.menuItemExternalIcon">
5656
<up-right-from-square-icon aria-hidden />
5757
</span>
58-
<span v-if="$slots.flyoutMenu && direction === 'down'" :class="styles.menuItemToggleIcon">
58+
<span v-if="$slots['flyout-menu'] && direction === 'down'" :class="styles.menuItemToggleIcon">
5959
<angle-right-icon aria-hidden />
6060
</span>
6161
<span v-if="effectiveSelected" :class="styles.menuItemSelectIcon">
@@ -70,8 +70,8 @@
7070
</span>
7171
</span>
7272
</component>
73-
<slot v-if="flyoutVisible" name="flyoutMenu" />
74-
<!-- <slot name="drilldownMenu" /> -->
73+
<slot v-if="flyoutVisible" name="flyout-menu" />
74+
<!-- <slot name="drilldown-menu" /> -->
7575
<slot name="actions" />
7676
<pf-menu-item-action
7777
v-if="isDefined(favorited)"
@@ -175,7 +175,7 @@ const $slots = defineSlots<{
175175
default?: (props?: Record<never, never>) => any;
176176
icon?: (props?: Record<never, never>) => any;
177177
description?: (props?: Record<never, never>) => any;
178-
flyoutMenu?: (props?: Record<never, never>) => any;
178+
'flyout-menu'?: (props?: Record<never, never>) => any;
179179
actions?: (props?: Record<never, never>) => any;
180180
}>();
181181
@@ -234,7 +234,7 @@ function onMouseOver() {
234234
if (!menu || menu.state.disableHover) {
235235
return;
236236
}
237-
if ($slots.flyoutMenu) {
237+
if ($slots['flyout-menu']) {
238238
showFlyout(true);
239239
} else {
240240
menu.flyout.value = null;
@@ -272,7 +272,7 @@ function onClick(event: PointerEvent) {
272272
// }
273273
// }
274274
275-
if ($slots.flyoutMenu) {
275+
if ($slots['flyout-menu']) {
276276
handleFlyout(event);
277277
}
278278
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const props = withDefaults(defineProps<Props>(), {
128128
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
129129
130130
defineSlots<{
131-
default: (props?: Record<never, never>) => any;
131+
default?: (props?: Record<never, never>) => any;
132132
}>();
133133
134134
const tooltip = ref('');

0 commit comments

Comments
 (0)