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.

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

Design Issues in Button Component #84

Open
kanaksony opened this issue Oct 6, 2021 · 0 comments
Open

Design Issues in Button Component #84

kanaksony opened this issue Oct 6, 2021 · 0 comments

Comments

@kanaksony
Copy link
Contributor

Describe the bug
Several design issues in Button component related to UI/UX as listed below:

  1. Default background color is missing (Screenshot 1)
  2. Default Touchable area should be increased
  3. Height, spacing is insufficient and touch target needs attention ( Research on button size and spacing )
  4. Default actionable visuals for different states for like pressed, enabled, disabled, clicked etc missing.

To Reproduce
Steps to reproduce the behavior:

  1. Create a button in XML or in java code with only necessary properties i.e. width, height and text
  2. Now, check UI in previewer.

Current behavior
Above component looks more like a text / label (Please check Screenshot 1-> Screen 2 - in the attached screenshot)

Expected behavior
It should look like a Button

Code Snippet & Screenshots
Pleaes find HMOS code for above prolem and screenshots generated with this code (Screen2) and Screen 1 is for comparison from another Mobile OS.

Screenshot 1 -> Screen 2:

// Code for Screen 2 in Screenshot 1
<Button
ohos:id="$+id:login"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="SIGN IN OR REGISTER" />

After adding color as background in above code -

// Code for Screen 2 in Screenshot 2
<Button
ohos:id="$+id:login"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="SIGN IN OR REGISTER" 
ohos:background_element="$color:grey"/>

Screenshot 2:

Smartphone (please complete the following information):

  • Device: Simulator

Additional context
In other Mobile OS farmeworks, these properties are taken care well. (Please check Screenshot 1-> Screen 1 - in the attached screenshot)

Describe the solution you'd like
As soon as we add a button either via XML or via java code, it should look like a button and above issues should taken care of.

Describe alternatives you've considered
Right now we are able to above issues as below:

  1. Default background color is missing - Add 'background' property in Button explicitly every time we create a button
  2. Default Touchable area should be increased - Adding Padding, Margins
  3. Height, spacing is insufficient and touch target needs attention - Adding Padding, Margins
  4. Default actionable visuals for different states for like pressed, enabled, disabled, clicked etc missing - No idea

--
Thanks,
Kanak Sony

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant