RN: Add width settings to button block #28472
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
enejb
added
Needs Design
|
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. As described by option 2. |
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a width selection slider to the button block.
Description
It does so by using the
UnitControlcomponent. 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%)
Currently implemented.
Based on the
UnitControlthat 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: