-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
RN: Add width settings to button block #28472
Conversation
Size Change: 0 B Total Size: 1.37 MB ℹ️ View Unchanged
|
@enejb If the web control is a Button group, we should probably use one of the following controls on mobile:
|
Of the 3 options @iamthomasbishop which one should I explore first?
Currently on the web non are selected at the beginning and you are also able to not else one of the sizes here as well. I suggest we play around with the Picker option and see how that goes. Do you have any suggestions how it would work/look anything that works similar already? |
@enejb I was thinking the same, but only if we have an easy path to implementation on Android. It looks like there are some third-party libraries: The system-standard on Android for a Select box interaction is a Menu component, which looks like this: I don't think we're using that system component anywhere, so I'm not sure if we can do that out of the box, but if we can achieve the above, this might be worth exploring first. Other approachesAnother option I should've mentioned is placing the option-selection on a nested or secondary sheet — either a sheet that appears over the base sheet or a nested sheet that we transition to. Here are those two approaches visualized: The other option — which seems like the simplest option, but definitely not the prettiest — would be a regular list (the first option I mentioned above). |
@iamthomasbishop I ended up using a SelectControl This is what it looks like. |
@enejb I think that component/interaction model should work, but I have a couple of small requests:
Here's what that'd look like on both platforms: |
I am not sure how possible it would be but I can try make the improvements :) and see how it goes. 🤞 |
After a bit of investigation. but I am not able to the checkmark as requested. The component used https://reactnative.dev/docs/actionsheetios RN component which doesn't provide a way to pass in the selected state. The underlying iOS component is https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/. I am exploring other options now that would allow us to have the something similar to the link/colour picker as the UI. |
Ah, okay. I think at one point we explored extending that library somehow, but we must have either not executed on it or used the BottomSheet instead (this was what we ended up doing for heading levels on the Heading block).
Ok, sounds good. I think that approach should work well here, probably my preferred method tbh. |
@iamthomasbishop I continues this work on #28543 PR. |
Closing this since it isn't relevant any more. |
This PR adds a width selection slider to the button block.
Description
It does so by using the
UnitControl
component. That is currently being used by the column width selection.How has this been tested?
Screenshots
Current web implementation (notice the right sidebar, button group 25%,50%,75%,100%)
![Screen Shot 2021-01-25 at 12 13 46 PM](https://user-images.githubusercontent.com/115071/105760816-22e86f00-5f07-11eb-8b5f-31b1f0579f56.png)
Currently implemented.
![Screen Shot 2021-01-25 at 12 12 00 PM](https://user-images.githubusercontent.com/115071/105760929-4ad7d280-5f07-11eb-9ff9-c17eb9ddd813.png)
Based on the
![Screen Shot 2021-01-25 at 12 12 19 PM](https://user-images.githubusercontent.com/115071/105760990-5f1bcf80-5f07-11eb-9112-785fc271d403.png)
UnitControl
that looks like this in the column settings.Types of changes
This PR add the ability to the mobile UnitControl component to only use a single unit. ?
Maybe this can be simplified?
Checklist: