Skip to content
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

Mobile: BottomSheet design tweaks #13633

Merged
merged 28 commits into from
Feb 1, 2019
Merged

Mobile: BottomSheet design tweaks #13633

merged 28 commits into from
Feb 1, 2019

Conversation

etoledom
Copy link
Contributor

@etoledom etoledom commented Feb 1, 2019 •
edited
Loading

Description

This PR adds some design options to the BottomSheet and its Cells.

  • A new option for a cell with just one Label with centered text.
  • A possibility to add custom styles to both Label and Value text.
  • A new option for adding an icon to the cell.
  • A possibility to completely hide the BottomSheet header.
  • A new separator with an option for not showing it (helpful for the last cell).

screen shot 2019-02-01 at 10 59 02 am

To test:

  • Checkout the related gutenberg-mobile PR: (Issue/bottom sheet design tweaks wordpress-mobile/gutenberg-mobile#533)
  • Run the example project.
  • Tap on a image block with image.
  • Tap on the image settings button (the wheel icon in the inline toolbar).
  • Check that the BottomSheet displays as shown in the screenshot (with just one Alt text cell).
  • If you feel like it, play with different configurations for the BottomSheet and the Cells.

@etoledom
rnmobile: Implement image settings button using InspectorControls.Slo…
fd7c7eb 
…t pattern.
@etoledom
rnmobile: Add missing semicolon
abdfd03
@etoledom
rnmobile: Adding bottom-sheet component to mobile
1a4e35a
@etoledom
rnmobile: Styling bottom-sheet header
4352c7a
@etoledom
rnmobile: Bottom-sheet clean up
f132158
@etoledom
rnmobile: Fix lint issues on bottom-sheet related code.
7bd8a4f
@etoledom
rnmobile: Fix small lint issues
541db3b
@etoledom
rnmobile: Move inline toolbar button definition out of constant.
b8e5dcf
@etoledom
rnmobile: Remove extra white-spaces
92e5357
@etoledom
revert package-lock.json changes
b7236e0
@etoledom
Merge branch 'master' into rnmobile/bottom-sheet-component
4828348
@etoledom
rnmobile: Fix merge issue
09582b7
@etoledom
rnmobile: exporting component BottomSheet.Button to be used as bottom…
d335a84 
…-sheet header buttons
@etoledom
rnmobile: Adding BottomSheet.Cell component as an extraction for Bott…
67c2ffc 
…omSheet users.
@etoledom
Fix lint issues
edcd79b
@etoledom
Reverting changes to package-lock.json
fc1043a
@etoledom
Merge branch 'master' into rnmobile/bottom-sheet-component
bfd5832
@etoledom
Fix merge issues
4d7a80c
@etoledom
Add prop to Hide header on Bottom-Sheet
e92bf54
@etoledom
BottomSheet cell label is centered when value prop is not set
baa9e1e
@etoledom
Adding icons option to BottomSheet.Cell
91c1b60
@etoledom
Added option to override Label and Value text styles on BottomSheet.Cell
c72534a
@etoledom
Clean up BottomSheet.Cell styles
7190348
@etoledom
Image native: Separate BottomSheet.Cell props in multiple lines
c9bcb3f
@etoledom
Fix lint issues
09af40d
@etoledom
Merge branch 'master' into rnmobile/bottom-sheet-design-tweaks
6e4249e
@etoledom
Added WordPress dependencies to BottomSheet.Cell
94ff384
@etoledom etoledom added the Mobile Web Viewport sizes for mobile and tablet devices label Feb 1, 2019
@etoledom etoledom self-assigned this Feb 1, 2019
@etoledom etoledom mentioned this pull request Feb 1, 2019
Merged
marecar3
marecar3 approved these changes Feb 1, 2019
View reviewed changes
Copy link
Contributor

@marecar3 marecar3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@etoledom etoledom merged commit c336500 into master Feb 1, 2019
@etoledom etoledom deleted the rnmobile/bottom-sheet-design-tweaks branch February 1, 2019 12:44
@etoledom
Copy link
Contributor Author

etoledom commented Feb 1, 2019

Thank you!

@youknowriad youknowriad added this to the 5.0 (Gutenberg) milestone Feb 4, 2019
This was referenced Feb 4, 2019
Merged
Closed
Merged
@etoledom etoledom mentioned this pull request Feb 7, 2019
Closed
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@etoledom @youknowriad
Mobile: BottomSheet design tweaks (#13633)
e4fbcc4 
* rnmobile: Implement image settings button using InspectorControls.Slot pattern.

* rnmobile: Add missing semicolon

* rnmobile: Adding bottom-sheet component to mobile

* rnmobile: Styling bottom-sheet header

* rnmobile: Bottom-sheet clean up

* rnmobile: Fix lint issues on bottom-sheet related code.

* rnmobile: Fix small lint issues

* rnmobile: Move inline toolbar button definition out of constant.

* rnmobile: Remove extra white-spaces

* revert package-lock.json changes

* rnmobile: Fix merge issue

* rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons

* rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users.

* Fix lint issues

* Reverting changes to package-lock.json

* Fix merge issues

* Add prop to Hide header on Bottom-Sheet

* BottomSheet cell label is centered when value prop is not set

* Adding icons option to BottomSheet.Cell

* Added option to override Label and Value text styles on BottomSheet.Cell

* Clean up BottomSheet.Cell styles

* Image native: Separate BottomSheet.Cell props in multiple lines

* Fix lint issues

* Added WordPress dependencies to BottomSheet.Cell
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@etoledom @youknowriad
Mobile: BottomSheet design tweaks (#13633)
db44c09 
* rnmobile: Implement image settings button using InspectorControls.Slot pattern.

* rnmobile: Add missing semicolon

* rnmobile: Adding bottom-sheet component to mobile

* rnmobile: Styling bottom-sheet header

* rnmobile: Bottom-sheet clean up

* rnmobile: Fix lint issues on bottom-sheet related code.

* rnmobile: Fix small lint issues

* rnmobile: Move inline toolbar button definition out of constant.

* rnmobile: Remove extra white-spaces

* revert package-lock.json changes

* rnmobile: Fix merge issue

* rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons

* rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users.

* Fix lint issues

* Reverting changes to package-lock.json

* Fix merge issues

* Add prop to Hide header on Bottom-Sheet

* BottomSheet cell label is centered when value prop is not set

* Adding icons option to BottomSheet.Cell

* Added option to override Label and Value text styles on BottomSheet.Cell

* Clean up BottomSheet.Cell styles

* Image native: Separate BottomSheet.Cell props in multiple lines

* Fix lint issues

* Added WordPress dependencies to BottomSheet.Cell
@gziolo gziolo added Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) and removed Mobile Web Viewport sizes for mobile and tablet devices labels Oct 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marecar3 marecar3 marecar3 approved these changes

Assignees

@etoledom etoledom

Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Milestone
5.0 (Gutenberg)
Development

Successfully merging this pull request may close these issues.
4 participants
@etoledom @marecar3 @youknowriad @gziolo