refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage #1782

Lukas742 · 2021-07-01T14:27:35Z

closes #1192
closes #1671
fixes #1662
fixes #1728
fixes #1707
fixes #1811
fixes #1815

BREAKING CHANGE: DynamicPageHeader: children are no longer displayed as flex items to support other display types like grid. To align children you now need to add the container (like FlexBox) and CSS yourself.
BREAKING_CHANGE: DynamicPageTitle: subHeading has been renamed. Please use subheading instead.
BREAKING_CHANGE: DynamicPage: header has been renamed. Please use headerContent instead.
BREAKING_CHANGE: DynamicPage: title has been renamed. Please use headerTitle instead.
BREAKING_CHANGE: ObjectPage: title has been renamed to headerTitle and is now defining the upper, static, title section of the ObjectPage. It expects to receive the DynamicPageTitle component.
BREAKING_CHANGE: ObjectPage: noHeader has been removed. It is now sufficient not to set headerTitle and header to achieve the same behavior.
BREAKING_CHANGE: ObjectPage: title, subTitle, headerActions, breadcrumbs and keyInfos should now be passed to the corresponding DynamicPageTitle props.
BREAKING_CHANGE: ObjectPageSection: title and titleUppercase has been renamed. Please use heading and headingUppercase instead.
BREAKING_CHANGE: ObjectPageSubSection: title has been renamed. Please use heading instead.
BREAKING_CHANGE: getScrollBarWidth has been removed.

…le component

useObserveHeights to another folder

…eaderContentVisible`

github-actions · 2021-07-01T14:32:01Z

Size Change: +2.87 kB (+1%)

Total Size: 208 kB

Filename	Size	Change
`packages/base/dist/hooks.js`	1.75 kB	+9 B (+1%)
`packages/base/dist/Utils.js`	1.06 kB	-232 B (-18%)	👏
`packages/main/dist/DynamicPage.js`	5.28 kB	+681 B (+15%)	⚠️
`packages/main/dist/DynamicPageHeader.js`	1.37 kB	-143 B (-9%)	✅
`packages/main/dist/DynamicPageTitle.js`	2.23 kB	+601 B (+37%)	🚨
`packages/main/dist/ObjectPage.js`	12.1 kB	+2.02 kB (+20%)	🚨
`packages/main/dist/ObjectPageSection.js`	1.55 kB	-69 B (-4%)
`packages/main/dist/ObjectPageSubSection.js`	1.49 kB	+7 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/base/dist/CssSizeVariables.js`	971 B
`packages/base/dist/Device.js`	5.45 kB
`packages/base/dist/Logger.js`	1.22 kB
`packages/base/dist/spacing.js`	1.01 kB
`packages/base/dist/StyleClassHelper.js`	637 B
`packages/base/dist/ThemingParameters.js`	3.6 kB
`packages/base/dist/useConsolidatedRef.js`	271 B
`packages/base/dist/usePassThroughHtmlProps.js`	327 B
`packages/base/dist/useViewportRange.js`	431 B
`packages/charts/dist/BarChart.js`	4.18 kB
`packages/charts/dist/BarChartPlaceholder.js`	459 B
`packages/charts/dist/ColumnChart.js`	4.41 kB
`packages/charts/dist/ColumnChartPlaceholder.js`	514 B
`packages/charts/dist/components/ChartContainer.js`	1.8 kB
`packages/charts/dist/components/ChartDataLabel.js`	605 B
`packages/charts/dist/components/XAxisTicks.js`	617 B
`packages/charts/dist/components/YAxisTicks.js`	514 B
`packages/charts/dist/ComposedChart.js`	5.13 kB
`packages/charts/dist/ComposedChartPlaceholder.js`	878 B
`packages/charts/dist/DonutChart.js`	3.23 kB
`packages/charts/dist/LineChart.js`	4.26 kB
`packages/charts/dist/LineChartPlaceholder.js`	529 B
`packages/charts/dist/MicroBarChart.js`	2.09 kB
`packages/charts/dist/PieChart.js`	3.11 kB
`packages/charts/dist/PieChartPlaceholder.js`	445 B
`packages/charts/dist/RadarChart.js`	2.37 kB
`packages/charts/dist/RadialChart.js`	1.4 kB
`packages/charts/dist/ScatterChart.js`	4.05 kB
`packages/charts/dist/ScatterChartPlaceholder.js`	536 B
`packages/charts/dist/useLegendItemClick.js`	395 B
`packages/charts/dist/Utils.js`	436 B
`packages/main/dist/ActionSheet.js`	2.56 kB
`packages/main/dist/AnalyticalCard.js`	859 B
`packages/main/dist/AnalyticalCardHeader.js`	2.61 kB
`packages/main/dist/AnalyticalTable.js`	25.5 kB
`packages/main/dist/AnalyticalTableHooks.js`	1.73 kB
`packages/main/dist/AnalyticalTableScrollMode.js`	177 B
`packages/main/dist/Assets-static.js`	56 B
`packages/main/dist/Assets.js`	49 B
`packages/main/dist/assets/i18n/i18n-defaults.js`	939 B
`packages/main/dist/Avatar.js`	592 B
`packages/main/dist/AvatarBackgroundColor.js`	219 B
`packages/main/dist/AvatarFitType.js`	151 B
`packages/main/dist/AvatarGroup.js`	618 B
`packages/main/dist/AvatarGroupType.js`	155 B
`packages/main/dist/AvatarShape.js`	150 B
`packages/main/dist/AvatarSize.js`	155 B
`packages/main/dist/Badge.js`	449 B
`packages/main/dist/Bar.js`	432 B
`packages/main/dist/BarDesign.js`	169 B
`packages/main/dist/Breadcrumbs.js`	1.6 kB
`packages/main/dist/BreadcrumbsSeparatorStyle.js`	198 B
`packages/main/dist/BusyIndicator.js`	447 B
`packages/main/dist/BusyIndicatorSize.js`	167 B
`packages/main/dist/Button.js`	471 B
`packages/main/dist/ButtonDesign.js`	190 B
`packages/main/dist/Calendar.js`	659 B
`packages/main/dist/CalendarDate.js`	254 B
`packages/main/dist/CalendarSelection.js`	163 B
`packages/main/dist/CalendarSelectionMode.js`	167 B
`packages/main/dist/CalendarType.js`	212 B
`packages/main/dist/Card.js`	484 B
`packages/main/dist/Carousel.js`	541 B
`packages/main/dist/CarouselArrowsPlacement.js`	166 B
`packages/main/dist/CheckBox.js`	590 B
`packages/main/dist/ColorPalette.js`	379 B
`packages/main/dist/ColorPaletteItem.js`	344 B
`packages/main/dist/ColorPicker.js`	334 B
`packages/main/dist/ComboBox.js`	554 B
`packages/main/dist/ComboBoxItem.js`	332 B
`packages/main/dist/ContentDensity.js`	151 B
`packages/main/dist/CustomListItem.js`	448 B
`packages/main/dist/DatePicker.js`	593 B
`packages/main/dist/DateRangePicker.js`	545 B
`packages/main/dist/DateTimePicker.js`	568 B
`packages/main/dist/DeviationIndicator.js`	160 B
`packages/main/dist/Dialog.js`	714 B
`packages/main/dist/DurationPicker.js`	603 B
`packages/main/dist/FCLLayout.js`	236 B
`packages/main/dist/FileUploader.js`	683 B
`packages/main/dist/FilterBar.js`	8.63 kB
`packages/main/dist/FilterGroupItem.js`	1.51 kB
`packages/main/dist/FlexBox.js`	1.08 kB
`packages/main/dist/FlexBoxAlignItems.js`	189 B
`packages/main/dist/FlexBoxDirection.js`	169 B
`packages/main/dist/FlexBoxJustifyContent.js`	194 B
`packages/main/dist/FlexBoxWrap.js`	154 B
`packages/main/dist/FlexibleColumnLayout.js`	520 B
`packages/main/dist/Form.js`	2.83 kB
`packages/main/dist/FormGroup.js`	712 B
`packages/main/dist/FormItem.js`	1.52 kB
`packages/main/dist/GlobalStyleClasses.js`	151 B
`packages/main/dist/Grid.js`	2.04 kB
`packages/main/dist/GridPosition.js`	157 B
`packages/main/dist/GroupHeaderListItem.js`	370 B
`packages/main/dist/Icon.js`	655 B
`packages/main/dist/IndicationColor.js`	279 B
`packages/main/dist/Input.js`	827 B
`packages/main/dist/InputType.js`	184 B
`packages/main/dist/json-imports/i18n-static.js`	1.06 kB
`packages/main/dist/json-imports/i18n.js`	963 B
`packages/main/dist/Label.js`	571 B
`packages/main/dist/Link.js`	518 B
`packages/main/dist/LinkDesign.js`	191 B
`packages/main/dist/List.js`	729 B
`packages/main/dist/ListGrowingMode.js`	164 B
`packages/main/dist/ListItemTypes.js`	160 B
`packages/main/dist/ListMode.js`	191 B
`packages/main/dist/ListSeparators.js`	186 B
`packages/main/dist/Loader.js`	1.45 kB
`packages/main/dist/LoaderType.js`	152 B
`packages/main/dist/MessageBox.js`	2.67 kB
`packages/main/dist/MessageBoxActions.js`	231 B
`packages/main/dist/MessageBoxTypes.js`	232 B
`packages/main/dist/MessageStrip.js`	510 B
`packages/main/dist/MessageStripType.js`	181 B
`packages/main/dist/MultiComboBox.js`	720 B
`packages/main/dist/MultiComboBoxItem.js`	364 B
`packages/main/dist/MultiInput.js`	725 B
`packages/main/dist/NotificationAction.js`	419 B
`packages/main/dist/NotificationListGroupItem.js`	596 B
`packages/main/dist/NotificationListItem.js`	653 B
`packages/main/dist/ObjectPageMode.js`	159 B
`packages/main/dist/ObjectStatus.js`	1.8 kB
`packages/main/dist/Option.js`	368 B
`packages/main/dist/Page.js`	476 B
`packages/main/dist/PageBackgroundDesign.js`	184 B
`packages/main/dist/Panel.js`	487 B
`packages/main/dist/PanelAccessibleRoles.js`	201 B
`packages/main/dist/PlacementType.js`	175 B
`packages/main/dist/Popover.js`	640 B
`packages/main/dist/PopoverHorizontalAlign.js`	181 B
`packages/main/dist/PopoverPlacementType.js`	172 B
`packages/main/dist/PopoverVerticalAlign.js`	204 B
`packages/main/dist/Priority.js`	163 B
`packages/main/dist/ProductSwitch.js`	374 B
`packages/main/dist/ProductSwitchItem.js`	422 B
`packages/main/dist/ProgressIndicator.js`	433 B
`packages/main/dist/RadioButton.js`	588 B
`packages/main/dist/RangeSlider.js`	502 B
`packages/main/dist/RatingIndicator.js`	438 B
`packages/main/dist/ResponsiveGridLayout.js`	1.2 kB
`packages/main/dist/ResponsivePopover.js`	605 B
`packages/main/dist/SegmentedButton.js`	474 B
`packages/main/dist/Select.js`	433 B
`packages/main/dist/SemanticColor.js`	181 B
`packages/main/dist/ShellBar.js`	541 B
`packages/main/dist/ShellBarItem.js`	375 B
`packages/main/dist/SideNavigation.js`	608 B
`packages/main/dist/SideNavigationItem.js`	413 B
`packages/main/dist/SideNavigationSubItem.js`	373 B
`packages/main/dist/Size.js`	151 B
`packages/main/dist/Slider.js`	493 B
`packages/main/dist/StandardListItem.js`	505 B
`packages/main/dist/StepInput.js`	602 B
`packages/main/dist/SuggestionItem.js`	432 B
`packages/main/dist/Switch.js`	597 B
`packages/main/dist/Tab.js`	472 B
`packages/main/dist/TabContainer.js`	524 B
`packages/main/dist/TabContainerTabsPlacement.js`	161 B
`packages/main/dist/TabLayout.js`	150 B
`packages/main/dist/Table.js`	660 B
`packages/main/dist/TableCell.js`	330 B
`packages/main/dist/TableColumn.js`	400 B
`packages/main/dist/TableGrowingMode.js`	165 B
`packages/main/dist/TablePlaceholder.js`	799 B
`packages/main/dist/TableRow.js`	313 B
`packages/main/dist/TableScaleWidthMode.js`	169 B
`packages/main/dist/TableSelectionBehavior.js`	178 B
`packages/main/dist/TableSelectionMode.js`	182 B
`packages/main/dist/TableVisibleRowCountMode.js`	189 B
`packages/main/dist/TabSeparator.js`	338 B
`packages/main/dist/Text.js`	986 B
`packages/main/dist/TextAlign.js`	183 B
`packages/main/dist/TextArea.js`	638 B
`packages/main/dist/ThemeProvider.js`	1.02 kB
`packages/main/dist/Themes.js`	188 B
`packages/main/dist/Timeline.js`	568 B
`packages/main/dist/TimelineItem.js`	364 B
`packages/main/dist/TimePicker.js`	539 B
`packages/main/dist/Title.js`	399 B
`packages/main/dist/TitleLevel.js`	163 B
`packages/main/dist/Toast.js`	418 B
`packages/main/dist/ToastPlacement.js`	208 B
`packages/main/dist/ToggleButton.js`	653 B
`packages/main/dist/Token.js`	379 B
`packages/main/dist/Toolbar.js`	3.29 kB
`packages/main/dist/ToolbarDesign.js`	175 B
`packages/main/dist/ToolbarSeparator.js`	562 B
`packages/main/dist/ToolbarSpacer.js`	220 B
`packages/main/dist/ToolbarStyle.js`	153 B
`packages/main/dist/Tree.js`	416 B
`packages/main/dist/TreeItem.js`	451 B
`packages/main/dist/UploadCollection.js`	473 B
`packages/main/dist/UploadCollectionItem.js`	514 B
`packages/main/dist/UploadState.js`	170 B
`packages/main/dist/ValueState.js`	182 B
`packages/main/dist/VariantManagement.js`	2.03 kB
`packages/main/dist/VerticalAlign.js`	174 B
`packages/main/dist/withWebComponent.js`	1.72 kB
`packages/main/dist/Wizard.js`	424 B
`packages/main/dist/WizardStep.js`	441 B

_{compressed-size-action}

* chore: use custom web component for object page anchor bar * refactor * Update ObjectPage.test.tsx.snap * define icon dependency via static get dependencies * update imports

MarcusNotheis

Looks good to me! 🚢

MarcusNotheis · 2021-07-15T13:40:17Z

🎉 This issue has been resolved in version v0.17.0 🎉

The release is available on v0.17.0

Lukas742 added 28 commits May 19, 2021 13:25

refactor(DynamicPageTitle): rename subHeading to subheading

ae20244

refactor(ObjectPage): wip - replace title section with DynamicPageTit…

fdd15ed

…le component

use DynamicPageTitle component in ObjectPage

6ab6e14

Merge branch 'main' into refactor/object-page

bb84b04

fix overflow button and some styles

7ac8ee7

commit unstaged files

858818e

remove unnecessary elements, fix navigation option

7eca53a

fix rtl in DynamicPageTitle

7ed4a45

merge branch 'main' into refactor/object-page

ac17d57

add ie11 support

4abcba5

wip: add header and anchor bar

b37c8ee

Merge branch 'main' into refactor/object-page

3871e7a

scrolling and sticky behavior

b1f3b22

add sticky header, remove anchorbar if header or title is not set

66ea9b5

fix anchorbar expand/collapse behavior

c029d0a

title section click and hover behavior, move

60616cb

useObserveHeights to another folder

fix scrolling, add footer

1ae2f1f

fix scrolling and focus

ca760f8

refactor(DynamicPageAnchorBar): replace headerContentHeight with `h…

c98318f

…eaderContentVisible`

minor refactoring - todos, unused styles, etc

4892952

remove padding from title section when in header

7bad974

cleanup

558c35f

fix filler margin

f1f6405

fix rtl

86c55a1

fix import and typings

719335e

remove ie11 workarounds

ce7cead

story

b737aa5

Merge branch 'main' into refactor/object-page

521cca1

add data-component-name attribute to sections

59b3536

Lukas742 added 7 commits July 6, 2021 17:38

fix tab sub-section selection, add fallback for fast scrolling

dd887b3

add migration guide

ec7195a

Merge branch 'main' into refactor/object-page

db1f656

Merge branch 'main' into refactor/object-page

66c273b

fix typo

3a5d79c

update snapshots

616d434

fix(DynamicPageTitle): change cursor to pointer

f236f55

Lukas742 marked this pull request as ready for review July 9, 2021 11:00

Lukas742 requested a review from MarcusNotheis as a code owner July 9, 2021 11:00

Lukas742 and others added 11 commits July 9, 2021 14:02

fix hover and cursor behavior if header is not expandable

d80be5c

update snapshots

a8ad54c

Merge branch 'main' into refactor/object-page

a35f77a

rename header to headerContent

6fde994

remove pointer-events when header is not expandable

ebceac0

responsive content padding uses element not window width

52b120d

move padding from sections to container

aae9701

update snapshots

18e006f

chore: use UI5 Web Component extension for ObjectPageAnchorTabs (#1814)

173b569

* chore: use custom web component for object page anchor bar * refactor * Update ObjectPage.test.tsx.snap * define icon dependency via static get dependencies * update imports

fix(ObjectPage): header doesn't expand when scrolling if pinned

d63baf2

collapsed & pinned header expands when scrolled to top

43fe999

MarcusNotheis approved these changes Jul 13, 2021

View reviewed changes

Lukas742 added 5 commits July 14, 2021 09:33

rename title props

7001249

update migration guide

95253fd

fix(ObjectPage): prevent overflow of headerTitle and headerContent

442fc44

remove getScrollBarWidth

5accb9c

Merge branch 'main' into refactor/object-page

435d669

Lukas742 merged commit 58719ce into main Jul 14, 2021

Lukas742 deleted the refactor/object-page branch July 14, 2021 10:31

MarcusNotheis mentioned this pull request Jul 15, 2021

☂️ Road to 1.0.0 #1318

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage #1782

refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage #1782

Uh oh!

Lukas742 commented Jul 1, 2021 •

edited

Loading

Uh oh!

github-actions bot commented Jul 1, 2021 •

edited

Loading

Uh oh!

MarcusNotheis left a comment

Uh oh!

MarcusNotheis commented Jul 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage #1782

refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage #1782

Uh oh!

Conversation

Lukas742 commented Jul 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MarcusNotheis left a comment

Choose a reason for hiding this comment

Uh oh!

MarcusNotheis commented Jul 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Lukas742 commented Jul 1, 2021 •

edited

Loading

github-actions bot commented Jul 1, 2021 •

edited

Loading