refactor(Grid): use CSS Grid Layout #504

Lukas742 · 2020-05-12T09:24:39Z

Breaking Changes:

removed position prop
removed width prop
changed vSpacing type to CSSProperties['width']
changed hSpacing type to CSSProperties['width']

Thank you for your contribution! 👏

To get it merged faster, kindly review the checklist below:

Pull Request Checklist

Reviewed the Contributing Guidelines
- Especially the How to Contribute section
Correct commit message style

github-actions · 2020-05-12T09:29:53Z

Size Change: -721 B (0%)

Total Size: 191 kB

Filename	Size	Change
`packages/main/lib/Grid.js`	1.6 kB	-721 B (45%)	🎉

ℹ️ View Unchanged

Filename	Size	Change
`packages/base/lib/createComponentStyles.js`	206 B	0 B
`packages/base/lib/CssSizeVariables.js`	820 B	0 B
`packages/base/lib/Device.js`	6.47 kB	0 B
`packages/base/lib/Event.js`	750 B	0 B
`packages/base/lib/font72.js`	447 B	0 B
`packages/base/lib/hooks.js`	1.53 kB	0 B
`packages/base/lib/HSLColor.js`	2.09 kB	0 B
`packages/base/lib/Logger.js`	1.2 kB	0 B
`packages/base/lib/Optional.js`	1.27 kB	0 B
`packages/base/lib/sap_fiori_3.js`	6.69 kB	0 B
`packages/base/lib/ScrollContext.js`	232 B	0 B
`packages/base/lib/Scroller.js`	2.42 kB	0 B
`packages/base/lib/ScrollLink.js`	601 B	0 B
`packages/base/lib/spacing.js`	853 B	0 B
`packages/base/lib/StyleClassHelper.js`	570 B	0 B
`packages/base/lib/ThemingParameters.js`	3.4 kB	0 B
`packages/base/lib/useConsolidatedRef.js`	271 B	0 B
`packages/base/lib/usePassThroughHtmlProps.js`	452 B	0 B
`packages/base/lib/useScrollElement.js`	382 B	0 B
`packages/base/lib/useViewportRange.js`	460 B	0 B
`packages/base/lib/Utils.js`	1.12 kB	0 B
`packages/charts/lib/BarChart.js`	4.68 kB	0 B
`packages/charts/lib/BarChartPlaceholder.js`	456 B	0 B
`packages/charts/lib/ColumnChart.js`	4.74 kB	0 B
`packages/charts/lib/ColumnChartPlaceholder.js`	514 B	0 B
`packages/charts/lib/components/ChartDataLabel.js`	604 B	0 B
`packages/charts/lib/components/ComposedChartPlaceholder.js`	878 B	0 B
`packages/charts/lib/components/XAxisTicks.js`	596 B	0 B
`packages/charts/lib/components/YAxisTicks.js`	513 B	0 B
`packages/charts/lib/DonutChart.js`	3.31 kB	0 B
`packages/charts/lib/LineChart.js`	4.49 kB	0 B
`packages/charts/lib/LineChartPlaceholder.js`	529 B	0 B
`packages/charts/lib/MicroBarChart.js`	2.32 kB	0 B
`packages/charts/lib/next/BarChart.js`	3.6 kB	0 B
`packages/charts/lib/next/ChartContainer.js`	877 B	0 B
`packages/charts/lib/next/ColumnChart.js`	3.76 kB	0 B
`packages/charts/lib/next/ComposedChart.js`	4.57 kB	0 B
`packages/charts/lib/next/DonutChart.js`	1.77 kB	0 B
`packages/charts/lib/next/LineChart.js`	3.72 kB	0 B
`packages/charts/lib/next/MicroBarChart.js`	1.9 kB	0 B
`packages/charts/lib/next/PieChart.js`	1.67 kB	0 B
`packages/charts/lib/next/RadarChart.js`	1.89 kB	0 B
`packages/charts/lib/next/RadialChart.js`	1.06 kB	0 B
`packages/charts/lib/PieChart.js`	3.26 kB	0 B
`packages/charts/lib/PieChartPlaceholder.js`	445 B	0 B
`packages/charts/lib/RadarChart.js`	2.94 kB	0 B
`packages/charts/lib/RadialChart.js`	3.87 kB	0 B
`packages/charts/lib/useLegendItemClick.js`	391 B	0 B
`packages/charts/lib/Utils.js`	534 B	0 B
`packages/charts/lib/withChartContainer.js`	1.83 kB	0 B
`packages/main/lib/ActionSheet.js`	1.25 kB	0 B
`packages/main/lib/AnalyticalCard.js`	861 B	0 B
`packages/main/lib/AnalyticalCardHeader.js`	2.67 kB	0 B
`packages/main/lib/AnalyticalTable.js`	15.8 kB	0 B
`packages/main/lib/AnalyticalTableScrollMode.js`	185 B	0 B
`packages/main/lib/Avatar.js`	438 B	0 B
`packages/main/lib/AvatarBackgroundColor.js`	219 B	0 B
`packages/main/lib/AvatarFitType.js`	151 B	0 B
`packages/main/lib/AvatarShape.js`	150 B	0 B
`packages/main/lib/AvatarSize.js`	155 B	0 B
`packages/main/lib/Badge.js`	320 B	0 B
`packages/main/lib/Bar.js`	1.36 kB	0 B
`packages/main/lib/BarDesign.js`	177 B	0 B
`packages/main/lib/Breadcrumbs.js`	740 B	0 B
`packages/main/lib/BreadcrumbsSeparatorStyle.js`	198 B	0 B
`packages/main/lib/BusyIndicator.js`	357 B	0 B
`packages/main/lib/BusyIndicatorSize.js`	167 B	0 B
`packages/main/lib/Button.js`	370 B	0 B
`packages/main/lib/ButtonDesign.js`	190 B	0 B
`packages/main/lib/Calendar.js`	348 B	0 B
`packages/main/lib/CalendarType.js`	212 B	0 B
`packages/main/lib/Card.js`	342 B	0 B
`packages/main/lib/Carousel.js`	418 B	0 B
`packages/main/lib/CarouselArrowsPlacement.js`	166 B	0 B
`packages/main/lib/CheckBox.js`	388 B	0 B
`packages/main/lib/ComboBox.js`	431 B	0 B
`packages/main/lib/ComboBoxItem.js`	311 B	0 B
`packages/main/lib/ContentDensity.js`	151 B	0 B
`packages/main/lib/CurrentViewportRangeContext.js`	133 B	0 B
`packages/main/lib/CustomListItem.js`	355 B	0 B
`packages/main/lib/DatePicker.js`	459 B	0 B
`packages/main/lib/DateTimePicker.js`	467 B	0 B
`packages/main/lib/DeviationIndicator.js`	160 B	0 B
`packages/main/lib/Dialog.js`	364 B	0 B
`packages/main/lib/DurationPicker.js`	398 B	0 B
`packages/main/lib/FileUploader.js`	401 B	0 B
`packages/main/lib/FilterBar.js`	1.41 kB	0 B
`packages/main/lib/FilterItem.js`	1.57 kB	0 B
`packages/main/lib/FilterType.js`	170 B	0 B
`packages/main/lib/FlexBox.js`	1.12 kB	0 B
`packages/main/lib/FlexBoxAlignItems.js`	189 B	0 B
`packages/main/lib/FlexBoxDirection.js`	169 B	0 B
`packages/main/lib/FlexBoxJustifyContent.js`	194 B	0 B
`packages/main/lib/FlexBoxWrap.js`	154 B	0 B
`packages/main/lib/Form.js`	1.16 kB	0 B
`packages/main/lib/FormGroup.js`	559 B	0 B
`packages/main/lib/FormItem.js`	1.2 kB	0 B
`packages/main/lib/GlobalStyleClasses.js`	151 B	0 B
`packages/main/lib/GridPosition.js`	157 B	0 B
`packages/main/lib/GroupHeaderListItem.js`	333 B	0 B
`packages/main/lib/Icon.js`	328 B	0 B
`packages/main/lib/Input.js`	465 B	0 B
`packages/main/lib/InputType.js`	184 B	0 B
`packages/main/lib/Label.js`	341 B	0 B
`packages/main/lib/Link.js`	359 B	0 B
`packages/main/lib/LinkDesign.js`	191 B	0 B
`packages/main/lib/List.js`	439 B	0 B
`packages/main/lib/ListItemTypes.js`	160 B	0 B
`packages/main/lib/ListMode.js`	191 B	0 B
`packages/main/lib/ListSeparators.js`	186 B	0 B
`packages/main/lib/Loader.js`	1.3 kB	0 B
`packages/main/lib/LoaderType.js`	152 B	0 B
`packages/main/lib/MessageBox.js`	2.24 kB	0 B
`packages/main/lib/MessageBoxActions.js`	231 B	0 B
`packages/main/lib/MessageBoxTypes.js`	232 B	0 B
`packages/main/lib/MessageStrip.js`	371 B	0 B
`packages/main/lib/MessageStripType.js`	181 B	0 B
`packages/main/lib/MultiComboBox.js`	438 B	0 B
`packages/main/lib/MultiComboBoxItem.js`	330 B	0 B
`packages/main/lib/Notification.js`	3.41 kB	0 B
`packages/main/lib/NotificationGroup.js`	339 B	0 B
`packages/main/lib/ObjectPage.js`	9.22 kB	0 B
`packages/main/lib/ObjectPageMode.js`	159 B	0 B
`packages/main/lib/ObjectPageSection.js`	1.3 kB	0 B
`packages/main/lib/ObjectPageSubSection.js`	1.14 kB	0 B
`packages/main/lib/ObjectStatus.js`	1.22 kB	0 B
`packages/main/lib/Option.js`	324 B	0 B
`packages/main/lib/Page.js`	2.1 kB	0 B
`packages/main/lib/PageBackgroundDesign.js`	183 B	0 B
`packages/main/lib/Panel.js`	399 B	0 B
`packages/main/lib/PanelAccessibleRoles.js`	201 B	0 B
`packages/main/lib/PlacementType.js`	175 B	0 B
`packages/main/lib/Popover.js`	487 B	0 B
`packages/main/lib/PopoverHorizontalAlign.js`	181 B	0 B
`packages/main/lib/PopoverPlacementType.js`	172 B	0 B
`packages/main/lib/PopoverVerticalAlign.js`	204 B	0 B
`packages/main/lib/Priority.js`	163 B	0 B
`packages/main/lib/ProductSwitch.js`	308 B	0 B
`packages/main/lib/ProductSwitchItem.js`	359 B	0 B
`packages/main/lib/ProgressIndicator.js`	1.45 kB	0 B
`packages/main/lib/RadioButton.js`	397 B	0 B
`packages/main/lib/ResponsivePopover.js`	502 B	0 B
`packages/main/lib/SegmentedButton.js`	321 B	0 B
`packages/main/lib/Select.js`	352 B	0 B
`packages/main/lib/SemanticColor.js`	181 B	0 B
`packages/main/lib/ShellBar.js`	447 B	0 B
`packages/main/lib/ShellBarItem.js`	335 B	0 B
`packages/main/lib/SideNavigation.js`	1.44 kB	0 B
`packages/main/lib/SideNavigationListItem.js`	2.11 kB	0 B
`packages/main/lib/SideNavigationOpenState.js`	174 B	0 B
`packages/main/lib/Size.js`	151 B	0 B
`packages/main/lib/Spinner.js`	1.2 kB	0 B
`packages/main/lib/StandardListItem.js`	417 B	0 B
`packages/main/lib/SuggestionItem.js`	386 B	0 B
`packages/main/lib/Switch.js`	351 B	0 B
`packages/main/lib/Tab.js`	372 B	0 B
`packages/main/lib/TabContainer.js`	412 B	0 B
`packages/main/lib/TabContainerTabsPlacement.js`	161 B	0 B
`packages/main/lib/TabLayout.js`	150 B	0 B
`packages/main/lib/Table.js`	365 B	0 B
`packages/main/lib/TableCell.js`	303 B	0 B
`packages/main/lib/TableColumn.js`	352 B	0 B
`packages/main/lib/TablePlaceholder.js`	768 B	0 B
`packages/main/lib/TableRow.js`	302 B	0 B
`packages/main/lib/TableScaleWidthMode.js`	169 B	0 B
`packages/main/lib/TableSelectionBehavior.js`	178 B	0 B
`packages/main/lib/TableSelectionMode.js`	182 B	0 B
`packages/main/lib/TabSeparator.js`	306 B	0 B
`packages/main/lib/Text.js`	1.02 kB	0 B
`packages/main/lib/TextAlign.js`	183 B	0 B
`packages/main/lib/TextArea.js`	469 B	0 B
`packages/main/lib/ThemeProvider.js`	1.09 kB	0 B
`packages/main/lib/Themes.js`	178 B	0 B
`packages/main/lib/Timeline.js`	298 B	0 B
`packages/main/lib/TimelineItem.js`	351 B	0 B
`packages/main/lib/TimePicker.js`	411 B	0 B
`packages/main/lib/Title.js`	337 B	0 B
`packages/main/lib/TitleLevel.js`	163 B	0 B
`packages/main/lib/Toast.js`	349 B	0 B
`packages/main/lib/ToastPlacement.js`	208 B	0 B
`packages/main/lib/ToggleButton.js`	391 B	0 B
`packages/main/lib/Token.js`	233 B	0 B
`packages/main/lib/Tokenizer.js`	248 B	0 B
`packages/main/lib/UploadCollection.js`	398 B	0 B
`packages/main/lib/UploadCollectionItem.js`	449 B	0 B
`packages/main/lib/UploadState.js`	170 B	0 B
`packages/main/lib/ValueState.js`	182 B	0 B
`packages/main/lib/VariantManagement.js`	1.92 kB	0 B
`packages/main/lib/VerticalAlign.js`	174 B	0 B
`packages/main/lib/withWebComponent.js`	1.58 kB	0 B

_{compressed-size-action}

github-actions · 2020-05-12T09:36:20Z

Coverage decreased (-0.1%) to 66.88% when pulling 3dd556e on refactor/grid into 8390186 on master.

BREAKING CHANGE: change prop `data-layout` (object) on child elements to `data-layout-span` and `data-layout-indent`

refactor(Grid): use CSS Grid Layout, remove position and width prop

8e310af

Lukas742 requested a review from MarcusNotheis May 12, 2020 09:24

Merge branch 'master' into refactor/grid

3dd556e

Lukas742 and others added 4 commits May 13, 2020 11:23

Merge branch 'master' into refactor/grid

24deb8d

Merge remote-tracking branch 'origin/master' into refactor/grid

d1a828d

change data-layout to data-layout-span and data-layout-indent

92d3447

BREAKING CHANGE: change prop `data-layout` (object) on child elements to `data-layout-span` and `data-layout-indent`

update tests

84b4cda

MarcusNotheis approved these changes May 14, 2020

View reviewed changes

MarcusNotheis added 3 commits May 14, 2020 09:04

types: use height for hSpacing

1c8a8a9

re-add grid position again

0595700

Update index.tsx

34d2c6f

MarcusNotheis merged commit fcc449a into master May 14, 2020

MarcusNotheis deleted the refactor/grid branch May 14, 2020 07:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(Grid): use CSS Grid Layout #504

refactor(Grid): use CSS Grid Layout #504

Uh oh!

Lukas742 commented May 12, 2020 •

edited

Loading

Uh oh!

github-actions bot commented May 12, 2020 •

edited

Loading

Uh oh!

github-actions bot commented May 12, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor(Grid): use CSS Grid Layout #504

refactor(Grid): use CSS Grid Layout #504

Uh oh!

Conversation

Lukas742 commented May 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Checklist

Uh oh!

github-actions bot commented May 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 12, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Lukas742 commented May 12, 2020 •

edited

Loading

github-actions bot commented May 12, 2020 •

edited

Loading