Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lukas742 merged 2 commits into from
Jul 15, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27e2c68
feat(ObjectPage & DynamicPage): add data attributes to elements
Lukas742 Jul 15, 2021
b2b48c3
Merge branch 'main' into feat/pages-data-attributes
Lukas742 Jul 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -130,6 +131,7 @@ exports[`DynamicPage always show content header 1`] = `
>
<div
class="DynamicPageTitle-title"
data-component-name="DynamicPageTitleHeading"
>
<ui5-title
level="H2"
Expand All @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -234,6 +238,7 @@ exports[`DynamicPage always show content header 1`] = `
>
<div
class="DynamicPageTitle-subTitleBottom"
data-component-name="DynamicPageTitleSubheading"
>
<ui5-label
ui5-label=""
Expand Down Expand Up @@ -293,6 +298,7 @@ exports[`DynamicPage always show content header 1`] = `
>
<section
class="DynamicPageAnchorBar-anchorBarActionButton"
data-component-name="DynamicPageAnchorBar"
role="navigation"
>
<ui5-button
Expand Down Expand Up @@ -334,6 +340,7 @@ exports[`DynamicPage hider header button 1`] = `
>
<div
class="DynamicPageTitle-title"
data-component-name="DynamicPageTitleHeading"
>
<ui5-title
level="H2"
Expand All @@ -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"
Expand Down Expand Up @@ -400,6 +408,7 @@ exports[`DynamicPage hider header button 1`] = `
>
<div
class="DynamicPageTitle-subTitleBottom"
data-component-name="DynamicPageTitleSubheading"
>
<ui5-label
ui5-label=""
Expand Down Expand Up @@ -459,6 +468,7 @@ exports[`DynamicPage hider header button 1`] = `
>
<section
class="DynamicPageAnchorBar-anchorBarActionButton"
data-component-name="DynamicPageAnchorBar"
role="navigation"
/>
</div>
Expand Down Expand Up @@ -648,6 +658,7 @@ exports[`DynamicPage render footer 1`] = `
>
<section
class="DynamicPageAnchorBar-anchorBarActionButton"
data-component-name="DynamicPageAnchorBar"
role="navigation"
>
<ui5-button
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -816,6 +828,7 @@ exports[`DynamicPage with content 1`] = `
>
<div
class="DynamicPageTitle-title"
data-component-name="DynamicPageTitleHeading"
>
<ui5-title
level="H2"
Expand All @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -920,6 +935,7 @@ exports[`DynamicPage with content 1`] = `
>
<div
class="DynamicPageTitle-subTitleBottom"
data-component-name="DynamicPageTitleSubheading"
>
<ui5-label
ui5-label=""
Expand Down Expand Up @@ -978,6 +994,7 @@ exports[`DynamicPage with content 1`] = `
>
<section
class="DynamicPageAnchorBar-anchorBarActionButton"
data-component-name="DynamicPageAnchorBar"
role="navigation"
>
<ui5-button
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -1787,6 +1805,7 @@ exports[`DynamicPage without content 1`] = `
>
<div
class="DynamicPageTitle-title"
data-component-name="DynamicPageTitleHeading"
>
<ui5-title
level="H2"
Expand All @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -1891,6 +1912,7 @@ exports[`DynamicPage without content 1`] = `
>
<div
class="DynamicPageTitle-subTitleBottom"
data-component-name="DynamicPageTitleSubheading"
>
<ui5-label
ui5-label=""
Expand Down Expand Up @@ -1949,6 +1971,7 @@ exports[`DynamicPage without content 1`] = `
>
<section
class="DynamicPageAnchorBar-anchorBarActionButton"
data-component-name="DynamicPageAnchorBar"
role="navigation"
>
<ui5-button
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/components/DynamicPageAnchorBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
31 changes: 25 additions & 6 deletions packages/main/src/components/DynamicPageTitle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -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}
Expand All @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Loading