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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions