feat(ObjectPage & DynamicPage): add data attributes to elements (#1831)

Lukas742 · web-flow · commit 49835267c857 · 2021-07-15T18:10:58.000+02:00
diff --git a/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap b/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`DynamicPage always show content header 1`] = `
     >
       <div
         class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"
+        data-component-name="DynamicPageTitleBreadcrumbs"
       >
         <div
           class="DynamicPageTitle-breadcrumbs"
@@ -130,6 +131,7 @@ exports[`DynamicPage always show content header 1`] = `
         >
           <div
             class="DynamicPageTitle-title"
+            data-component-name="DynamicPageTitleHeading"
           >
             <ui5-title
               level="H2"
@@ -140,6 +142,7 @@ exports[`DynamicPage always show content header 1`] = `
           </div>
           <div
             class="DynamicPageTitle-content"
+            data-component-name="DynamicPageTitleContent"
             style="padding-left: 0.5rem;"
           >
             <ui5-badge
@@ -152,6 +155,7 @@ exports[`DynamicPage always show content header 1`] = `
         </div>
         <div
           class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"
+          data-component-name="DynamicPageTitleActions"
         >
           <div
             class="Toolbar-toolbar"
@@ -234,6 +238,7 @@ exports[`DynamicPage always show content header 1`] = `
       >
         <div
           class="DynamicPageTitle-subTitleBottom"
+          data-component-name="DynamicPageTitleSubheading"
         >
           <ui5-label
             ui5-label=""
@@ -293,6 +298,7 @@ exports[`DynamicPage always show content header 1`] = `
     >
       <section
         class="DynamicPageAnchorBar-anchorBarActionButton"
+        data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
         <ui5-button
@@ -334,6 +340,7 @@ exports[`DynamicPage hider header button 1`] = `
         >
           <div
             class="DynamicPageTitle-title"
+            data-component-name="DynamicPageTitleHeading"
           >
             <ui5-title
               level="H2"
@@ -345,6 +352,7 @@ exports[`DynamicPage hider header button 1`] = `
         </div>
         <div
           class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"
+          data-component-name="DynamicPageTitleActions"
         >
           <div
             class="Toolbar-toolbar"
@@ -400,6 +408,7 @@ exports[`DynamicPage hider header button 1`] = `
       >
         <div
           class="DynamicPageTitle-subTitleBottom"
+          data-component-name="DynamicPageTitleSubheading"
         >
           <ui5-label
             ui5-label=""
@@ -459,6 +468,7 @@ exports[`DynamicPage hider header button 1`] = `
     >
       <section
         class="DynamicPageAnchorBar-anchorBarActionButton"
+        data-component-name="DynamicPageAnchorBar"
         role="navigation"
       />
     </div>
@@ -648,6 +658,7 @@ exports[`DynamicPage render footer 1`] = `
     >
       <section
         class="DynamicPageAnchorBar-anchorBarActionButton"
+        data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
         <ui5-button
@@ -698,6 +709,7 @@ exports[`DynamicPage with content 1`] = `
     >
       <div
         class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"
+        data-component-name="DynamicPageTitleBreadcrumbs"
       >
         <div
           class="DynamicPageTitle-breadcrumbs"
@@ -816,6 +828,7 @@ exports[`DynamicPage with content 1`] = `
         >
           <div
             class="DynamicPageTitle-title"
+            data-component-name="DynamicPageTitleHeading"
           >
             <ui5-title
               level="H2"
@@ -826,6 +839,7 @@ exports[`DynamicPage with content 1`] = `
           </div>
           <div
             class="DynamicPageTitle-content"
+            data-component-name="DynamicPageTitleContent"
             style="padding-left: 0.5rem;"
           >
             <ui5-badge
@@ -838,6 +852,7 @@ exports[`DynamicPage with content 1`] = `
         </div>
         <div
           class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"
+          data-component-name="DynamicPageTitleActions"
         >
           <div
             class="Toolbar-toolbar"
@@ -920,6 +935,7 @@ exports[`DynamicPage with content 1`] = `
       >
         <div
           class="DynamicPageTitle-subTitleBottom"
+          data-component-name="DynamicPageTitleSubheading"
         >
           <ui5-label
             ui5-label=""
@@ -978,6 +994,7 @@ exports[`DynamicPage with content 1`] = `
     >
       <section
         class="DynamicPageAnchorBar-anchorBarActionButton"
+        data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
         <ui5-button
@@ -1669,6 +1686,7 @@ exports[`DynamicPage without content 1`] = `
     >
       <div
         class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"
+        data-component-name="DynamicPageTitleBreadcrumbs"
       >
         <div
           class="DynamicPageTitle-breadcrumbs"
@@ -1787,6 +1805,7 @@ exports[`DynamicPage without content 1`] = `
         >
           <div
             class="DynamicPageTitle-title"
+            data-component-name="DynamicPageTitleHeading"
           >
             <ui5-title
               level="H2"
@@ -1797,6 +1816,7 @@ exports[`DynamicPage without content 1`] = `
           </div>
           <div
             class="DynamicPageTitle-content"
+            data-component-name="DynamicPageTitleContent"
             style="padding-left: 0.5rem;"
           >
             <ui5-badge
@@ -1809,6 +1829,7 @@ exports[`DynamicPage without content 1`] = `
         </div>
         <div
           class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"
+          data-component-name="DynamicPageTitleActions"
         >
           <div
             class="Toolbar-toolbar"
@@ -1891,6 +1912,7 @@ exports[`DynamicPage without content 1`] = `
       >
         <div
           class="DynamicPageTitle-subTitleBottom"
+          data-component-name="DynamicPageTitleSubheading"
         >
           <ui5-label
             ui5-label=""
@@ -1949,6 +1971,7 @@ exports[`DynamicPage without content 1`] = `
     >
       <section
         class="DynamicPageAnchorBar-anchorBarActionButton"
+        data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
         <ui5-button
diff --git a/packages/main/src/components/DynamicPageAnchorBar/index.tsx b/packages/main/src/components/DynamicPageAnchorBar/index.tsx
@@ -174,6 +174,7 @@ const DynamicPageAnchorBar = forwardRef((props: Props, ref: RefObject<HTMLElemen
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   return (
     <section
+      data-component-name="DynamicPageAnchorBar"
       style={style}
       role="navigation"
       className={showHideHeaderButton || headerContentPinnable ? classes.anchorBarActionButton : null}
diff --git a/packages/main/src/components/DynamicPageTitle/index.tsx b/packages/main/src/components/DynamicPageTitle/index.tsx
@@ -162,27 +162,43 @@ const DynamicPageTitle: FC<DynamicPageTitleProps> = forwardRef((props: InternalP
       {...passThroughProps}
     >
       {(breadcrumbs || (navigationActions && showNavigationInTopArea)) && (
-        <FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween}>
+        <FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween} data-component-name="DynamicPageTitleBreadcrumbs">
           <div className={classes.breadcrumbs} onClick={stopPropagation}>
             {breadcrumbs}
           </div>
           {showNavigationInTopArea && (
-            <FlexBox alignItems={FlexBoxAlignItems.End} onClick={stopPropagation}>
+            <FlexBox
+              alignItems={FlexBoxAlignItems.End}
+              onClick={stopPropagation}
+              data-component-name="DynamicPageTitleNavActions"
+            >
               {navigationActions}
             </FlexBox>
           )}
         </FlexBox>
       )}
       <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ flexGrow: 1, width: '100%' }}>
         <FlexBox className={classes.titleMainSection}>
-          {heading && <div className={classes.title}>{heading}</div>}
+          {heading && (
+            <div className={classes.title} data-component-name="DynamicPageTitleHeading">
+              {heading}
+            </div>
+          )}
           {subheading && showSubheadingRight && (
-            <div className={classes.subTitleRight} style={{ [paddingLeftRtl]: '0.5rem' }}>
+            <div
+              className={classes.subTitleRight}
+              style={{ [paddingLeftRtl]: '0.5rem' }}
+              data-component-name="DynamicPageTitleSubheading"
+            >
               {subheading}
             </div>
           )}
           {children && (
-            <div className={classes.content} style={{ [paddingLeftRtl]: '0.5rem' }}>
+            <div
+              className={classes.content}
+              style={{ [paddingLeftRtl]: '0.5rem' }}
+              data-component-name="DynamicPageTitleContent"
+            >
               {children}
             </div>
           )}
@@ -193,6 +209,7 @@ const DynamicPageTitle: FC<DynamicPageTitleProps> = forwardRef((props: InternalP
           active
           className={classes.toolbar}
           onClick={stopPropagation}
+          data-component-name="DynamicPageTitleActions"
         >
           <ActionsSpacer onClick={onHeaderClick} noHover={props?.['data-not-clickable']} />
           {actions}
@@ -204,7 +221,9 @@ const DynamicPageTitle: FC<DynamicPageTitleProps> = forwardRef((props: InternalP
       </FlexBox>
       {subheading && !showSubheadingRight && (
         <FlexBox>
-          <div className={classes.subTitleBottom}>{subheading}</div>
+          <div className={classes.subTitleBottom} data-component-name="DynamicPageTitleSubheading">
+            {subheading}
+          </div>
         </FlexBox>
       )}
     </FlexBox>
diff --git a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
@@ -79,7 +79,12 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
   }
 
   return (
-    <div ref={domRef} className={containerClasses.valueOf()} style={style}>
+    <div
+      ref={domRef}
+      className={containerClasses.valueOf()}
+      style={style}
+      data-component-name="ObjectPageCollapsedAvatar"
+    >
       {avatarContent}
     </div>
   );
diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap

Original file line number	Diff line number	Diff line change
@@ -12,6 +12,7 @@ exports[`DynamicPage always show content header 1`] = `
`12`	`12`	`>`
`13`	`13`	`<div`
`14`	`14`	`class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"`
	`15`	`+ data-component-name="DynamicPageTitleBreadcrumbs"`
`15`	`16`	`>`
`16`	`17`	`<div`
`17`	`18`	`class="DynamicPageTitle-breadcrumbs"`
@@ -130,6 +131,7 @@ exports[`DynamicPage always show content header 1`] = `
`130`	`131`	`>`
`131`	`132`	`<div`
`132`	`133`	`class="DynamicPageTitle-title"`
	`134`	`+ data-component-name="DynamicPageTitleHeading"`
`133`	`135`	`>`
`134`	`136`	`<ui5-title`
`135`	`137`	`level="H2"`
@@ -140,6 +142,7 @@ exports[`DynamicPage always show content header 1`] = `
`140`	`142`	`</div>`
`141`	`143`	`<div`
`142`	`144`	`class="DynamicPageTitle-content"`
	`145`	`+ data-component-name="DynamicPageTitleContent"`
`143`	`146`	`style="padding-left: 0.5rem;"`
`144`	`147`	`>`
`145`	`148`	`<ui5-badge`
@@ -152,6 +155,7 @@ exports[`DynamicPage always show content header 1`] = `
`152`	`155`	`</div>`
`153`	`156`	`<div`
`154`	`157`	`class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"`
	`158`	`+ data-component-name="DynamicPageTitleActions"`
`155`	`159`	`>`
`156`	`160`	`<div`
`157`	`161`	`class="Toolbar-toolbar"`
@@ -234,6 +238,7 @@ exports[`DynamicPage always show content header 1`] = `
`234`	`238`	`>`
`235`	`239`	`<div`
`236`	`240`	`class="DynamicPageTitle-subTitleBottom"`
	`241`	`+ data-component-name="DynamicPageTitleSubheading"`
`237`	`242`	`>`
`238`	`243`	`<ui5-label`
`239`	`244`	`ui5-label=""`
@@ -293,6 +298,7 @@ exports[`DynamicPage always show content header 1`] = `
`293`	`298`	`>`
`294`	`299`	`<section`
`295`	`300`	`class="DynamicPageAnchorBar-anchorBarActionButton"`
	`301`	`+ data-component-name="DynamicPageAnchorBar"`
`296`	`302`	`role="navigation"`
`297`	`303`	`>`
`298`	`304`	`<ui5-button`
@@ -334,6 +340,7 @@ exports[`DynamicPage hider header button 1`] = `
`334`	`340`	`>`
`335`	`341`	`<div`
`336`	`342`	`class="DynamicPageTitle-title"`
	`343`	`+ data-component-name="DynamicPageTitleHeading"`
`337`	`344`	`>`
`338`	`345`	`<ui5-title`
`339`	`346`	`level="H2"`
@@ -345,6 +352,7 @@ exports[`DynamicPage hider header button 1`] = `
`345`	`352`	`</div>`
`346`	`353`	`<div`
`347`	`354`	`class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"`
	`355`	`+ data-component-name="DynamicPageTitleActions"`
`348`	`356`	`>`
`349`	`357`	`<div`
`350`	`358`	`class="Toolbar-toolbar"`
@@ -400,6 +408,7 @@ exports[`DynamicPage hider header button 1`] = `
`400`	`408`	`>`
`401`	`409`	`<div`
`402`	`410`	`class="DynamicPageTitle-subTitleBottom"`
	`411`	`+ data-component-name="DynamicPageTitleSubheading"`
`403`	`412`	`>`
`404`	`413`	`<ui5-label`
`405`	`414`	`ui5-label=""`
@@ -459,6 +468,7 @@ exports[`DynamicPage hider header button 1`] = `
`459`	`468`	`>`
`460`	`469`	`<section`
`461`	`470`	`class="DynamicPageAnchorBar-anchorBarActionButton"`
	`471`	`+ data-component-name="DynamicPageAnchorBar"`
`462`	`472`	`role="navigation"`
`463`	`473`	`/>`
`464`	`474`	`</div>`
@@ -648,6 +658,7 @@ exports[`DynamicPage render footer 1`] = `
`648`	`658`	`>`
`649`	`659`	`<section`
`650`	`660`	`class="DynamicPageAnchorBar-anchorBarActionButton"`
	`661`	`+ data-component-name="DynamicPageAnchorBar"`
`651`	`662`	`role="navigation"`
`652`	`663`	`>`
`653`	`664`	`<ui5-button`
@@ -698,6 +709,7 @@ exports[`DynamicPage with content 1`] = `
`698`	`709`	`>`
`699`	`710`	`<div`
`700`	`711`	`class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"`
	`712`	`+ data-component-name="DynamicPageTitleBreadcrumbs"`
`701`	`713`	`>`
`702`	`714`	`<div`
`703`	`715`	`class="DynamicPageTitle-breadcrumbs"`
@@ -816,6 +828,7 @@ exports[`DynamicPage with content 1`] = `
`816`	`828`	`>`
`817`	`829`	`<div`
`818`	`830`	`class="DynamicPageTitle-title"`
	`831`	`+ data-component-name="DynamicPageTitleHeading"`
`819`	`832`	`>`
`820`	`833`	`<ui5-title`
`821`	`834`	`level="H2"`
@@ -826,6 +839,7 @@ exports[`DynamicPage with content 1`] = `
`826`	`839`	`</div>`
`827`	`840`	`<div`
`828`	`841`	`class="DynamicPageTitle-content"`
	`842`	`+ data-component-name="DynamicPageTitleContent"`
`829`	`843`	`style="padding-left: 0.5rem;"`
`830`	`844`	`>`
`831`	`845`	`<ui5-badge`
@@ -838,6 +852,7 @@ exports[`DynamicPage with content 1`] = `
`838`	`852`	`</div>`
`839`	`853`	`<div`
`840`	`854`	`class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"`
	`855`	`+ data-component-name="DynamicPageTitleActions"`
`841`	`856`	`>`
`842`	`857`	`<div`
`843`	`858`	`class="Toolbar-toolbar"`
@@ -920,6 +935,7 @@ exports[`DynamicPage with content 1`] = `
`920`	`935`	`>`
`921`	`936`	`<div`
`922`	`937`	`class="DynamicPageTitle-subTitleBottom"`
	`938`	`+ data-component-name="DynamicPageTitleSubheading"`
`923`	`939`	`>`
`924`	`940`	`<ui5-label`
`925`	`941`	`ui5-label=""`
@@ -978,6 +994,7 @@ exports[`DynamicPage with content 1`] = `
`978`	`994`	`>`
`979`	`995`	`<section`
`980`	`996`	`class="DynamicPageAnchorBar-anchorBarActionButton"`
	`997`	`+ data-component-name="DynamicPageAnchorBar"`
`981`	`998`	`role="navigation"`
`982`	`999`	`>`
`983`	`1000`	`<ui5-button`
@@ -1669,6 +1686,7 @@ exports[`DynamicPage without content 1`] = `
`1669`	`1686`	`>`
`1670`	`1687`	`<div`
`1671`	`1688`	`class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap"`
	`1689`	`+ data-component-name="DynamicPageTitleBreadcrumbs"`
`1672`	`1690`	`>`
`1673`	`1691`	`<div`
`1674`	`1692`	`class="DynamicPageTitle-breadcrumbs"`
@@ -1787,6 +1805,7 @@ exports[`DynamicPage without content 1`] = `
`1787`	`1805`	`>`
`1788`	`1806`	`<div`
`1789`	`1807`	`class="DynamicPageTitle-title"`
	`1808`	`+ data-component-name="DynamicPageTitleHeading"`
`1790`	`1809`	`>`
`1791`	`1810`	`<ui5-title`
`1792`	`1811`	`level="H2"`
@@ -1797,6 +1816,7 @@ exports[`DynamicPage without content 1`] = `
`1797`	`1816`	`</div>`
`1798`	`1817`	`<div`
`1799`	`1818`	`class="DynamicPageTitle-content"`
	`1819`	`+ data-component-name="DynamicPageTitleContent"`
`1800`	`1820`	`style="padding-left: 0.5rem;"`
`1801`	`1821`	`>`
`1802`	`1822`	`<ui5-badge`
@@ -1809,6 +1829,7 @@ exports[`DynamicPage without content 1`] = `
`1809`	`1829`	`</div>`
`1810`	`1830`	`<div`
`1811`	`1831`	`class="Toolbar-outerContainer Toolbar-clear Toolbar-active DynamicPageTitle-toolbar"`
	`1832`	`+ data-component-name="DynamicPageTitleActions"`
`1812`	`1833`	`>`
`1813`	`1834`	`<div`
`1814`	`1835`	`class="Toolbar-toolbar"`
@@ -1891,6 +1912,7 @@ exports[`DynamicPage without content 1`] = `
`1891`	`1912`	`>`
`1892`	`1913`	`<div`
`1893`	`1914`	`class="DynamicPageTitle-subTitleBottom"`
	`1915`	`+ data-component-name="DynamicPageTitleSubheading"`
`1894`	`1916`	`>`
`1895`	`1917`	`<ui5-label`
`1896`	`1918`	`ui5-label=""`
@@ -1949,6 +1971,7 @@ exports[`DynamicPage without content 1`] = `
`1949`	`1971`	`>`
`1950`	`1972`	`<section`
`1951`	`1973`	`class="DynamicPageAnchorBar-anchorBarActionButton"`
	`1974`	`+ data-component-name="DynamicPageAnchorBar"`
`1952`	`1975`	`role="navigation"`
`1953`	`1976`	`>`
`1954`	`1977`	`<ui5-button`