search

applibgroup / HarmonyOS-Knowledgebase

This repository contains code samples of HarmonyOS Training
Apache License 2.0
15 stars 6 forks source link

Design Issues in Button Component #84

Open kanaksony opened 2 years ago

kanaksony commented 2 years ago

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):

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