search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
439 stars 98 forks source link

ActionSheet: Unexpected margin exist on mobile device when there is only one primary action button #1748

Closed sleric1024 closed 3 years ago

sleric1024 commented 3 years ago

Describe the bug

  1. On mobile device mode, when open the ActionSheet dialog, the popover dialog should rendered and displayed with no margin to bottom on device screen. While when there is only one primary action button, the unexpected margin exists.

  2. According to Fiori guide line. The padding of each button on smartphone may need to keep consist. https://ux.wdf.sap.corp/fiori-design-web/action-sheet/#responsiveness

image

Isolated Example https://codesandbox.io/s/angry-sutherland-30q83?file=/src/App.js:353-370

https://30q83.csb.app/

To Reproduce Steps to reproduce the behavior:

  1. Go to https://30q83.csb.app/
  2. Open chrome devTool
  3. Change device type to iPhoneX
  4. Click the Button Open ActionSheet

Expected behavior

Screenshots image

UI5 Web Components for React Information @ui5/webcomponents version: 1.0.0-rc.14 @ui5/webcomponents-react version: 0.16.4 Operating System: MacOS Browser: Chome

Additional context I am from SuccessFactors. We are using ActionSheet to deliver the new features. And currently in the project, we are using 

"@ui5/webcomponents": "~0.31.9",
"@ui5/webcomponents-base": "~0.31.9",
"@ui5/webcomponents-fiori": "~0.31.9",
"@ui5/webcomponents-icons": "~0.31.9",
"@ui5/webcomponents-react": "~0.131.8",
ui5-webcomponents-react-bot commented 3 years ago

:tada: This issue has been resolved in version v0.16.6 :tada:

The release is available on v0.16.6

Your semantic-release bot :package::rocket:

MarcusNotheis commented 3 years ago

Fix has been downported to the 0.131.x branch and is released with version 0.131.11