feat: added ouia attributes for all components and changed the data-o…

…uia-component-type prefix from V-PF4/ to PF/
mtorromeo · Dec 11, 2023 · ff5c111 · ff5c111
1 parent 67038b6
commit ff5c111
Show file tree

Hide file tree

Showing 188 changed files with 871 additions and 479 deletions.
diff --git a/packages/core/src/components/Accordion/Accordion.vue b/packages/core/src/components/Accordion/Accordion.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    v-bind="ouiaProps"
     :is="dl ? 'dl' : 'div'" :class="[styles.accordion, {
       [styles.modifiers.bordered]: bordered,
       [styles.modifiers.displayLg]: large,
@@ -9,7 +10,7 @@
 </template>
 
 <script lang="ts">
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   /** Heading level to use */
   level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | number;
   /** Flag to indicate whether use definition list or div */
@@ -29,6 +30,7 @@ export const AccordionKey = Symbol('AccordionKey') as InjectionKey<{
 <script lang="ts" setup>
 import { type InjectionKey, provide, type HTMLAttributes } from 'vue';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfAccordion',
@@ -41,6 +43,7 @@ defineSlots<{
 const props = withDefaults(defineProps<Props>(), {
   level: 3,
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 provide(AccordionKey, {
   dl: props.dl,

diff --git a/packages/core/src/components/Accordion/AccordionItem.vue b/packages/core/src/components/Accordion/AccordionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="toggleComponent || (accordion?.dl ? 'dt' : (typeof accordion?.level === 'string' ? accordion?.level : `h${accordion?.level}`))">
+  <component v-bind="ouiaProps" :is="toggleComponent || (accordion?.dl ? 'dt' : (typeof accordion?.level === 'string' ? accordion?.level : `h${accordion?.level}`))">
     <button
       v-bind="$attrs"
       type="button"
@@ -43,23 +43,25 @@ import styles from '@patternfly/react-styles/css/components/Accordion/accordion'
 import AngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
 import { useManagedProp } from '../../use';
 import { AccordionKey } from './Accordion.vue';
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfAccordionItem',
   inheritAttrs: false,
 });
 
-export interface Props extends /* @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'aria-expanded'> {
+export interface Props extends OUIAProps, /* @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'aria-expanded'> {
   title?: string;
   toggleComponent?: string;
   contentComponent?: string;
   fixed?: boolean;
   expanded?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   expanded: undefined,
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 const emit = defineEmits<{
   (name: 'update:expanded', value: boolean): void;

diff --git a/packages/core/src/components/Alert/Alert.vue b/packages/core/src/components/Alert/Alert.vue
@@ -76,11 +76,10 @@ import PfButton from '../Button.vue';
 import PfCloseButton from '../CloseButton.vue';
 import PfAlertIcon, { AlertVariantIcons } from './AlertIcon.vue';
 import PfAngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
-
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 import { ref, watch, type Ref, type HTMLAttributes, onBeforeUnmount, onMounted, computed, type Component } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import { useManagedProp } from '../../use';
-import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfAlert',
@@ -135,6 +134,7 @@ const props = withDefaults(defineProps<Props>(), {
   tooltipPosition: 'auto',
   component: 'h4',
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe, variant: props.variant});
 
 const emit = defineEmits<{
   (name: 'mouseenter', e: Event): void;
@@ -163,7 +163,6 @@ const managedExpanded = useManagedProp('expanded', false);
 const variantLabel = computed(() => `${props.variant.charAt(0).toUpperCase()}${props.variant.slice(1)} alert:`);
 const dismissed = computed(() => timedOut.value && timedOutAnimation.value && !isMouseOver.value && !containsFocus.value);
 
-const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe, variant: props.variant});
 
 watch(() => [width.value, height.value], () => {
   if (!titleRef.value || !props.truncateTitle) {

diff --git a/packages/core/src/components/Alert/AlertActionLink.vue b/packages/core/src/components/Alert/AlertActionLink.vue
@@ -1,12 +1,13 @@
 <template>
-  <pf-button variant="link" inline>
+  <pf-button v-bind="ouiaProps" variant="link" inline>
     <slot />
   </pf-button>
 </template>
 
 <script lang="ts" setup>
 import type { ComponentProps } from '../../util';
 import PfButton from '../Button.vue';
+import { useOUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfAlertActionLink',
@@ -15,7 +16,8 @@ defineOptions({
 export interface Props extends /* @vue-ignore */ Omit<ComponentProps<typeof PfButton>, 'variant' | 'inline'> {
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/Alert/AlertGroup.vue b/packages/core/src/components/Alert/AlertGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport :disabled="!toast" :to="appendTo">
-    <pf-alert-group-inline v-bind="$attrs" :toast="toast">
+    <pf-alert-group-inline v-bind="{...ouiaProps, ...$attrs}" :toast="toast">
       <slot />
     </pf-alert-group-inline>
   </teleport>
@@ -10,6 +10,7 @@
 import PfAlertGroupInline from './AlertGroupInline.vue';
 import type { ComponentProps } from '../../util';
 import type { RendererElement } from 'vue';
+import { useOUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfAlertGroup',
@@ -23,9 +24,10 @@ export interface Props extends /* @vue-ignore */ ComponentProps<typeof PfAlertGr
   appendTo?: string | RendererElement | null | undefined;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   appendTo: 'body',
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/Alert/AlertGroupInline.vue b/packages/core/src/components/Alert/AlertGroupInline.vue
@@ -1,5 +1,6 @@
 <template>
   <ul
+    v-bind="ouiaProps"
     :class="[styles.alertGroup, {
       [styles.modifiers.toast]: toast,
     }]"
@@ -18,21 +19,22 @@
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
-
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 import { h, type HTMLAttributes } from 'vue';
 import { findChildrenVNodes } from '../../util';
 
 defineOptions({
   name: 'PfAlertGroupInline',
 });// expands object types one level deep
 
-export interface Props extends /* @vue-ignore */ Omit<HTMLAttributes, 'aria-live' | 'aria-atomic'> {
+export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'aria-live' | 'aria-atomic'> {
   toast?: boolean;
   liveRegion?: boolean;
   overflowMessage?: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 const emit = defineEmits<{
   (name: 'overflow-click', e: MouseEvent | TouchEvent): void;

diff --git a/packages/core/src/components/Alert/AlertIcon.vue b/packages/core/src/components/Alert/AlertIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="$slots.default || AlertVariantIcons[variant]" :class="styles.alertIcon">
+  <div v-if="$slots.default || AlertVariantIcons[variant]" v-bind="(ouiaProps as any)" :class="styles.alertIcon">
     <slot>
       <component :is="AlertVariantIcons[variant]" />
     </slot>
@@ -13,6 +13,7 @@ import TriangleExclamationIcon from '@vue-patternfly/icons/triangle-exclamation-
 import CircleInfoIcon from '@vue-patternfly/icons/circle-info-icon';
 import BellIcon from '@vue-patternfly/icons/bell-icon';
 import type { HTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 export const AlertVariantIcons = {
   success: CircleCheckIcon,
@@ -22,7 +23,7 @@ export const AlertVariantIcons = {
   custom: BellIcon,
 };
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   variant?: keyof typeof AlertVariantIcons;
 }
 </script>
@@ -34,9 +35,10 @@ defineOptions({
   name: 'PfAlertIcon',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   variant: 'custom',
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/Avatar.vue b/packages/core/src/components/Avatar.vue
@@ -1,5 +1,6 @@
 <template>
   <img
+    v-bind="(ouiaProps as any)"
     :class="[styles.avatar, {
       [styles.modifiers.light]: border === 'light',
       [styles.modifiers.dark]: border === 'dark',
@@ -10,15 +11,17 @@
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import type { ImgHTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 
 defineOptions({
   name: 'PfAvatar',
 });
 
-export interface Props extends /* @vue-ignore */ ImgHTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ ImgHTMLAttributes {
   /** Border to add */
   border?: 'light' | 'dark' | null;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 </script>
diff --git a/packages/core/src/components/Backdrop.vue b/packages/core/src/components/Backdrop.vue
@@ -1,21 +1,23 @@
 <template>
-  <div :class="styles.backdrop">
+  <div v-bind="(ouiaProps as any)" :class="styles.backdrop">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import type { HTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 
 defineOptions({
   name: 'PfBackdrop',
 });
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/BackgroundImage.vue b/packages/core/src/components/BackgroundImage.vue
@@ -1,13 +1,14 @@
 <template>
   <div
+    v-bind="(ouiaProps as any)"
     :class="styles.backgroundImage" :style="{
       '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
     }"
   />
 </template>
 
 <script lang="ts">
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   /** Override image styles using a string or BackgroundImageSrc */
   src: string;
 }
@@ -16,10 +17,12 @@ export interface Props extends /* @vue-ignore */ HTMLAttributes {
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
 import type { HTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 
 defineOptions({
   name: 'PfBackgroundImage',
 });
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 </script>
diff --git a/packages/core/src/components/Badge.vue b/packages/core/src/components/Badge.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-bind="(ouiaProps as any)"
     :class="[styles.badge, {
       [styles.modifiers.read]: read,
       [styles.modifiers.unread]: !read,
@@ -11,16 +12,18 @@
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
 import type { HTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 
 defineOptions({
   name: 'PfBadge',
 });
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   read?: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/Brand.vue b/packages/core/src/components/Brand.vue
@@ -1,27 +1,29 @@
 <template>
-  <picture v-if="$slots.default" v-bind="$attrs" :class="[styles.brand, styles.modifiers.picture]" :style="pictureStyle">
+  <picture v-if="$slots.default" v-bind="{...ouiaProps as any, ...$attrs}" :class="[styles.brand, styles.modifiers.picture]" :style="pictureStyle">
     <slot />
     <img :src="src" :alt="alt">
   </picture>
-  <img v-else v-bind="$attrs" :class="styles.brand" :src="src" :alt="alt">
+  <img v-else v-bind="{...ouiaProps, ...$attrs}" :class="styles.brand" :src="src" :alt="alt">
 </template>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Brand/brand';
 import { cssVarsFromBreakpointProps, type WidthBreakpointProps, type HeightBreakpointProps } from '../breakpoints';
 import type { ImgHTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 
 defineOptions({
   name: 'PfBrand',
   inheritAttrs: false,
 });
 
-export interface Props extends WidthBreakpointProps, HeightBreakpointProps, /* @vue-ignore */ Omit<ImgHTMLAttributes, 'width' | 'height' | 'src' | 'alt'> {
+export interface Props extends OUIAProps, WidthBreakpointProps, HeightBreakpointProps, /* @vue-ignore */ Omit<ImgHTMLAttributes, 'width' | 'height' | 'src' | 'alt'> {
   src: string;
   alt?: string;
 }
 
 const props = defineProps<Props>();
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;

diff --git a/packages/core/src/components/Breadcrumb/Breadcrumb.vue b/packages/core/src/components/Breadcrumb/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav :class="styles.breadcrumb" :aria-label="ariaLabel">
+  <nav v-bind="ouiaProps" :class="styles.breadcrumb" :aria-label="ariaLabel">
     <ol :class="styles.breadcrumbList">
       <slot-with-dividers />
     </ol>
@@ -10,18 +10,20 @@
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { findChildrenVNodes } from '../../util';
 import type { HTMLAttributes } from 'vue';
+import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 defineOptions({
   name: 'PfBreadcrumb',
 });
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   ariaLabel?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   ariaLabel: 'Breadcrumb',
 });
+const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
 const slots = defineSlots<{
   default?: (props?: Record<never, never>) => any;