Skip to content

Design Issues in Button Component #84

@kanaksony

Description

@kanaksony

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions