Skip to content

fix(Toolbar): always align items in the center #1847

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

Jump to bottom
Merged
Lukas742 merged 3 commits into from
Jul 21, 2021
Merged

fix(Toolbar): always align items in the center #1847

Lukas742 merged 3 commits into from
Jul 21, 2021

Conversation

@Lukas742
Copy link
Contributor

@Lukas742 Lukas742 commented Jul 20, 2021 •
edited
Loading

Also fixes/adds:

  • border not adding height to the component, previously height was sapWcrToolbarHeight + 0.0625rem
  • add data attributes to simplify querying elements for css selection

Fixes: #1843

@Lukas742 Lukas742 requested a review from MarcusNotheis as a code owner July 20, 2021 08:09
@github-actions
Copy link

github-actions bot commented Jul 20, 2021 •
edited
Loading

Size Change: +74 B (0%)

Total Size: 205 kB

Filename Size Change
packages/main/dist/Toolbar.js 3.41 kB +74 B (+2%)
ℹ️ View Unchanged
Filename Size
packages/base/dist/CssSizeVariables.js 971 B
packages/base/dist/Device.js 2.92 kB
packages/base/dist/hooks.js 1.77 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 405 B
packages/base/dist/Utils.js 1.06 kB
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.6 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/DynamicPage.js 5.31 kB
packages/main/dist/DynamicPageHeader.js 1.37 kB
packages/main/dist/DynamicPageTitle.js 2.69 kB
packages/main/dist/FCLLayout.js 236 B
packages/main/dist/FileUploader.js 683 B
packages/main/dist/FilterBar.js 8.66 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.82 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.03 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.7 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/ObjectPage.js 12.1 kB
packages/main/dist/ObjectPageMode.js 159 B
packages/main/dist/ObjectPageSection.js 1.55 kB
packages/main/dist/ObjectPageSubSection.js 1.49 kB
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 938 B
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/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.07 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

@coveralls
Copy link

coveralls commented Jul 20, 2021 •
edited
Loading

Pull Request Test Coverage Report for Build 1051984953

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 78.466%
Totals Coverage Status
Change from base Build 1051696437: 0.0%
Covered Lines: 2824
Relevant Lines: 3599
💛 - Coveralls

@Lukas742 Lukas742 enabled auto-merge (squash) July 21, 2021 09:22
@Lukas742 Lukas742 merged commit 535051e into main Jul 21, 2021
@Lukas742 Lukas742 deleted the fix/toolbar-alignment branch July 21, 2021 09:27
Lukas742 added a commit that referenced this pull request Jul 21, 2021
@Lukas742
fix(Toolbar): always align items in the center (#1847)
93a07cf
Lukas742 added a commit that referenced this pull request Jul 21, 2021
@Lukas742 @MarcusNotheis
chore(SF-0.131): downport consolidates API of ObjectPage and DynamicP…
d8ac070 
…age (#1848)

* cherry-pick 58719ce

* fix DynamicPage story

* fix(ObjectPage & DynamicPage): active elements in `headerTitle` are always interactive and won't expand the header (#1825)

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

* cherry-pick ea4cd60

* cherry-pick 9bc3722

* fix useObserveHeights

* update snapshots

* fix not all code paths return a value error

* remove dist folder from base package, correct import

* correct import

* cherry pick ff55e08

* cherry-pick 79c43f7

* fix(Toolbar): always align items in the center (#1847)

Co-authored-by: Marcus Notheis <[email protected]>
@ui5-webcomponents-react-bot
Copy link
Collaborator

ui5-webcomponents-react-bot commented Jul 23, 2021

🎉 This PR is included in version v0.17.2 🎉

The release is available on v0.17.2

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MarcusNotheis MarcusNotheis MarcusNotheis approved these changes

Assignees

No one assigned

Labels

released

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Toolbar: Vertical Alignment

5 participants

@Lukas742 @coveralls @ui5-webcomponents-react-bot @MarcusNotheis