[Bug]: App theming feedback bugs

[dilippitchika]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Noting all the bugs from app theming's feedback here

Rahul's feedback

1. table buttons don’t have the option to reset, or the orange icon notifying that it is deviating from the theme
2. the input for select doesn’t have the same style items as normal

Aswath's feedback

1. We can add any css we want inside properties using JS

[Nikhil's feedback] (https://theappsmith.slack.com/archives/CRVRBGU1K/p1646042115945239?thread_ts=1646039810.972839&cid=CRVRBGU1K)

1. Update the current theme to be hidden or prevent showing 2 themes when they are the same
2. The classic theme is being selected for all new apps instead of the default theme. This is a bug
3. The button group button color property control isn't showing the theme value
4. In checkbox, audio widget, filepicker etc. the color property is called background color. This is a misnomer. Can we fix these properties before they go out?
5. The map widget, multi-select, video widget don't round it's corners properly.

Issues list: https://docs.google.com/spreadsheets/d/1rWKhq6wiwXogAwvWT0Y4o2lKdNitwIL29y9J5OYRtAk/edit#gid=0

Steps To Reproduce

Follow the above slack threads.

Environment

Deploy Preview

Version

Cloud

[dilippitchika]

@jsartisan @keyurparalkar please keep adding more issues found from feedback here, just to make sure we keep resolving all these.

[jsartisan]

We can add any CSS we want inside properties using JS

We won't be able to handle this right now because we will need validations for it. This can take time because I am not sure how will we handle validations here. for e.g - for background property - we will need to handle all possible values like red, blue, #ff1233 and url(path-to-image).

cc: @dilippitchika

[jsartisan]

The classic theme is being selected for all new apps instead of the default theme. This is a bug

We did this intentionally. We decided to keep the green theme as the default for now till we do reskinning project. after that we will use the purple theme as the default one.

[dilippitchika]

We won't be able to handle this right now because we will need validations for it. This can take time because I am not sure how will we handle validations here. for e.g - for background property - we will need to handle all possible values like red, blue, #ff1233 and url(path-to-image).

No issue with this

We did this intentionally. We decided to keep the green theme as the default for now till we do reskinning project. after that we will use the purple theme as the default one.

Then we should not call the purple theme "Default". We should edit the name to be different, my current suggestion - "Modern"

[shwetha-ramesh]

@jsartisan tested theming DP. And here are the few issues I have noticed

1. When you save a theme and later delete the theme, the pop up message displayed has wrong message on it. Message must read “Do you really want to delete this theme”. 'Delete' is missed out.

2. When user deletes a theme a pop message is displayed “Do you really want to delete this theme? This process cannot be undone” However when you click on delete a toast message is later displayed. “THEME abc deleted. UNDO”. The user has an option to UNDO, but when clicked on it the deleted theme does not appear back. The pop up message displayed and the toast message has contradictory messages.

3. Duplicate theme names can be saved without any changes made it to it. https://loom.com/share/9ba342b2054f4d09bf4ee80fbee756db

4. Tool tips can be elaborated rather than short form for Border radius and shadow

5. Different spelling for Color in same property

6. Button group widget appears as one big widget and there is no separator seen from one button to another

7. No theme styling properties applied for divider, document viewer, image, Multiselect widget

8. For checkbox group widget when user adds additional options the checkbox are not seen even on resize of widget; only with scroll the widgets can be seen. https://loom.com/share/7cc1762ba5ed41bdb5d8dec197e05e91

9.Theming not applied for File picker widget button and Modal.

10. Background color not applied for Multitreeselect widget drop down. Also a white cursor appears and text has white background. Also in Rounded theme text “no results found” is cut off

11. For default image widget Border radius are not visible .

12. Multiselect widget does not have theming applied to it. Highlighting on drop down and border radius does not conform to theme selected for Multiselect widget.

13. Styling properties (radius and shadow) not visible for Radiogroup widget.

14. Styling properties (radius and shadow) not visible for Rating widget . Also theme not applied.

15. Theming not applied for Table widget’s filter property

16. Styling not applied for Text widget https://loom.com/share/f4330b00485e482f96c8b248eb6936da

17. Border radius not applied for top border of video widget
    

18. Not able to place widgets on bottom of the canvas https://loom.com/share/c10654f0b5364e3bacd5f98eccca30c9

19. Reflow not supported. https://loom.com/share/ec7038d218fe4053ad5dec616177530d

20. For select widget, the drop down overflows from the widget

[dilippitchika]

Other bugs:

Very serious -

Rest Saved theme shows up twice in the list

Use a save icon and not a download icon - people are getting confused

Going to theme list and then selecting a widget and then de-selecting it still shows the theme panel

Make the circle clickable in the color picker widget

Global theme border radius doesnt change the containers inside a container

[shwetha-ramesh]

@jsartisan

21. When long theme name is given the name abruptly cuts off & delete icon gets hidden.

[keyurparalkar]

@shwetha-ramesh, Please find below the updates for the bugs:

No theme styling properties applied for divider, document viewer, image, Multiselect widget

For default image widget Border radius are not visible .

In the Image widget, the border-radius is applied to it’s container and not to it’s image. When Object fit = contain it will try to fit the image inside the container so that aspect ratio remains the same that is why you were seeing half baked border radius. Note: The border radius still exists when Object fit = contain. Also, when Object fit = cover the theming properties exists.

---

Styling properties (radius and shadow) not visible for Radiogroup widget.

Styling properties (radius and shadow) not visible for Rating widget . Also theme not applied.

For Rating and radio widget, we don't have any theming properties like border-radius or box-shadow. Only colors can be changed.

---

Styling not applied for Text widget

The border-radius and box-shadow property for the text widget is removed.

---

Border radius not applied for top border of video widget

The border radius still exists. It’s just that the user is not able to see it since the content of the video gets adjusted based on how we resize the video widget. Please refer to this slack thread for more information: https://theappsmith.slack.com/archives/C02JV8G1MP0/p1646381970834139 We have added background color property for the video widget so that it will help to distinguish the border-radius.

---

Reflow not supported.

Please enable the reflow by click the checkbox present in the property pane with label: “Turn on new drag & drop experience BETA”

CC: @jsartisan

[jsartisan]

For better tracking, we are trackng issues here - https://docs.google.com/spreadsheets/d/1rWKhq6wiwXogAwvWT0Y4o2lKdNitwIL29y9J5OYRtAk/edit#gid=0

[shwetha-ramesh]

@jsartisan observed one more wrt Pages

22. When a certain theme is applied to an application, subsequent pages must also have same theme applied, however currently in DP when a new page is created the theme is not applied immediately but only by switching back forth the theme gets applied. https://loom.com/share/d8c65ce6f4bf41e6a702e03334eb5023

Also when too many widgets are placed the canvas takes time to apply theme and display the widgets

https://loom.com/share/71fe8e0574e646a797546211a7e57a9a

[shwetha-ramesh]

@jsartisan @keyurparalkar tested the above mentioned issues after fix and here are the status.

Issues reported by me

1. Fixed

2. Fixed. Undo is removed from toast message.

3. a) When user clicks on Save theme and gives a duplicate name “Name must be unique” message appears, however when you click on cancel and click on Save theme again "Name must be unique" message is already displayed even for blank theme name. Expected behavior would be : When user enters duplicate name "Name must be unique" message must be displayed also 'Save Theme' button must be disabled; ideally the message should appear when same theme name is given and not for empty theme names. Also unless any characters are entered in theme name 'save theme' button must appear disabled. b) Same theme settings with different names can be saved. c) Theme names accepts numbers and special character

4. Still exists

5. Fixed

6. Separators are now seen inside the button group widget but the drop down for More does not have fully rounded applied to it.

7. Still exists a) Theming properties not seen for Divider widget. The divider color appears grey b) Theming properties not seen for Document viewer widget. c) Image widget - fixed d) Multiselect widget - Theming is now applied. However filter tray is not highlighted, in drop down the selected options do not have highlight over selected options, on hover on checkbox is not highlighted, after you make changes in widget the revert option with orange dot is not present

8. Still exists. Widget spacing looks completely different from release. On theming when more options are added the vertical alignment from one another looks very compact. Also on hover the checkbox do not highlight.

9. Still exists

10. For multitree select widget background color is now removed but the drop down is not fully rounded and search tray is not visible

11. Fixed

12. Multiselect widget now theming is applied. However filter tray is not highlighted, in drop down there is no highlight over selected options, on hover on checkbox is not highlighted, after you make changes in widget the revert option with orange dot is not present https://loom.com/share/028779f49e054aa5810cdcf93b33492d

13. & 14. Addressed. widget does not consists of any theming properties except the color.

14. Still exists

15. The border-radius and box-shadow property for the text widget is now removed. However text size notations differ from release. Also no revert option for Font family

16. Background color property is added for video widget. However when a new url is added the rounded edges does not apply

17. Still exists

18. Corrected. Reflow is supported after checkbox selected.

19. Drop down overflows from the select widget is fixed in view mode but for long label names in deploy mode the drop down still overflows. But Box shadow is not seen for select widget. Also when a long label name is given the widget flows out of canvas

20. Still exists

21. Still exists

New issues observed

23. Deploy mode does not deploy the latest changes but shows the previous changes. https://loom.com/share/99d33545d2d94ba599f36c451379794c

[shwetha-ramesh]

New issue

24. Tabs widget ui is cut off https://loom.com/share/cc3fb1efd97a4f44b8df4cf6e2bec6e8

[shwetha-ramesh]

25. Date picker, audio recorder, filepicker, image, Input, button, button group, camera, currency input, icon button, menu button, multi tree, multi select, phone input, select, tree select - box shadow does not have revert option

26. Select fully rounded theme, now drop a list widget on canvas, select the first tile of list widget - now change the border radius to none or md. The highlight is cut off.

27. For phone input widget the cursor appears at the middle of the widget

28. No hover for checkbox and checkbox group

[shwetha-ramesh]

@jsartisan @keyurparalkar

29. Click on Save Theme, don’t give any name keep it blank click on Save theme button – see “Classic Copy” get saved. Repeat the same step – and see “Classic copy” saved again

30. Button group widget for vertical alignment is wrong in DP when more buttons are added. And on hover shows green highlight for Menu type simple Delete 'favourite' and 'add' buttons from button group widget and see how the widget looks

[shwetha-ramesh]

@jsartisan below are the issues found in DP after fix and as mentioned in doc.

1. Step a: Click on Save theme > In Modal click on Cancel > Click on Save theme again > In modal now click on Save theme button > Theme gets saved successfully. Step b: Repeat above step once more > 'Classic Copy' gets saved twice

2. Save theme button can be disabled unless character input

3. a)Button group widget appears different in Edit mode and Deploy mode when Orientation is Vertical and widget is resized.. b) Also a lot of spacing is observed for drop down and the button c) Hover is fixed d) widget looks different only when button is present. https://loom.com/share/991b22a27c68466297d0b4071711d93a

4. No hover found for FONT in Theme properties

5. Checkbox alignment left right isn't working

6. For phone input widget on clicking on the input the whole widget is highlighted, it must highlight only the input part

7.Checkbox group widget in disabled state doesn't show tick mark for selected checkbox

8. In text widget last letter gets cut off when it is Italics and right aligned.

9. Datepicker time selection highlight does not conform to theme

10. Hover on checkbox appears as selected to theme (pink) in Multi tree select widget but appears grey in multi select, tree select, checkbox and checkbox group widget

11. No UI spacing in input widget between label and tooltip

12. Input widget when data type is Number accepts character 'E'.

13. Input widget when label size is XL and above the alignment of tooltip symbol is distorted also when label font is italicst he text cuts off also

14. Tab widget scroll and text is not aligned. Also extra space is present between text and top border

[shwetha-ramesh]

@keyurparalkar as discussed please find the below issues found while testing Migration on theming. #MigrationTestingIssues

1. Box shadow selection is not shown

2. (#migration) For text widget when Heading 1, Heading 2 and Paragraph 2 is selected in theming JS is enabled by default and shows 1.5, 1.125 and 0.75 respectively but when you toggle off JS it shows ‘base’

3. (DP issues) For border radius in Button widget when first option is selected, in theming no selection is shown and it shows empty when JS is toggled.

4. (#Migration) Button widget has bold border by default on migration

5. (#Migration ) For Container widget border radius does not show any unit, it just shows the number and not in pixels.

6. (#Widget level) Border radius for none shows 0px, md = 0.375 rem, lg = 1.5 rem – no consistency in units

7. (#Widget level) Input widget icon appears bold

8. (#Migration) On migration the input widget does not highlight, border color is not migrating

9. (#Migration) No revert option for border radius In multiselect widget

10. (widget level) No revert option for Icon color in Audio recorder widget

[shwetha-ramesh]

@keyurparalkar below are few more issues found while testing migration #MigrationTestingIssues

11. Audio recorder widget shows 9999px for Border radius. Standard unit must be used across all widgets

12. No revert option found for select family Select = No revert for Box Shadow Multiselect = No revert for Border Radius, Box shadow MultiTree select = No revert forBox shadow Tree select = No revert for Box Shadow

13. On migration for Currency input and date picker widget by default the widget border, drop down highlight, date selection appears pink (theme selected color).

14. For Form widget when there is no border radius mentioned on release, when migrated on DP it shows ‘undefinedpx’

[shwetha-ramesh]

@keyurparalkar #MigrationTestingIssues

15. Input widget shows theme border highlight on migration

16. Theme is applied on List buttons on migration

17. Box shadow is not applied to the whole widget but individual lists

18. Menu button has green hover on migration and not grey.

[btsgh]

19. Steps -

• Drag and drop say a button widget

• (Theming is Default) 

• Click on Change Theme. 

• Choose Sharp theme and click on Apply Theme.

• A message comes to the effect “Theme Sharp Applied.. Undo”

• Click Ctrl-Z / Cmd-Z from keyboard to undo the theme. 

• The theme is undone, but the message on top still remains for a while- “Theme Sharp Applied.. Undo”

• Click on Undo on that message.

• At this point, the Button widget itself gets undone. The canvas becomes blank.

[btsgh]

1. Drag and drop a Currency input widget.
2. Move the mouse over the $ label
3. Mouse pointer changes to clickable pointer
4. On click on the dollar sign, the entire widget is highlighted. Expected behaviour as per release url -
5. Mouse pointer should not change to clickable pointer. It should remain as open hand
6. Nothing should change on clicking the dollar sign

[shwetha-ramesh]

@keyurparalkar #MigrationTestingIssues

19. In Modal on Migration the Close button text is overlapped when Icon is added.

20. . Multi tree select, Multi select has theme highlight on migration

21. Multi select has no revert option for box radius on migration.

22. All select widgets, input widgets has drop down wrt theme on migration

[btsgh]

23. • Create a Form, add two input widgets and on Select widget. 

    • On the Submit button, bind it to a query (Query1) such that it updates an excel data source.
    • Apply a theme other than default

    • Change font to Montserrat or Ubuntu or any font

    • Deploy the app
    • The font is seen as applied to the header region as well - ("" … "Share" / "Edit App") and also on the bottom right "Built on appsmith_" text. 
The font changes should only be applied on the canvas.

[btsgh]

24. "Built on appsmith" on the bottom right corner of deployed screen - If I change background colour on a theme, the "Built on appsmith" background colour also gets impacted. Since its a logo, the changes to canvas should not get reflected here. so background color should not reflect on that logo"

[shwetha-ramesh]

@keyurparalkar #MigrationTestingIssues

25. Page breaks when Progress widget is opened on theming DP

26. No border radius for radio group widget.

27. On migration Rating app changes it stars higlight without hover on the stars. https://loom.com/share/560e89b97197435c810a278c7d92d15f

28. Change the font size in release on RTE widget > Now in appsmith check it is changed back to Paragraph

29. No scroll observed on deploy mode on theming, also a white cast is present at the end.

30. Drag and drop icon button widget on migration click on revert option for button color > now toggle the JS twice and observe the color disappears on the widget and the field

[btsgh]

31.

• In the COLOR section, Click on primary colour circle - change colour
• Now click again on primary colour to modify the colour
• The Primary colour pop up does not come up and the text area below it to enter the colour hex value also gets closed.
• We need to click on primary colour circle again to see the colour box.
• Same is the behaviour with background colour also. Expected behaviour - on step 2, the primary colour should come up and the text area to enter hex value should also remain.

[shwetha-ramesh]

@keyurparalkar #MigrationTestingIssues

31. Blue highlight appears on change for Switch group widget on migration. https://loom.com/share/1f62e44e2c6b460c97eddf2a3801a499

32. Tab widget has bold fonts on migration and tab highlight also appears wrt theme. Also a white cast is present at the end of the tab

33. . No hover found on radio buttons for tree select widget.

34. On release if Tabs widget has ‘Shows tabs’ toggled off on migration tabs are still visible.

[btsgh]

35.

• Checkbox Group Widget .. Drag and drop checkbox group widget on Theming DP
• Drag and drop Drag and drop checkbox group widget on Release
• Spacing in Theming looks more crushed than a neater view in release.
• In this case, on theming when more options are added, the newer options are tried to be fit into this UI, and text look cut off.
• In Release, these options are arranged neatly such that there is no text cutoff, and user needs to scroll down to see them.
• Since Theming is all about UI look and feel, it would be nice if the spacing in Theming DP is maintained similar to Release.

This was called out in Point 13 comments. Re-raising to see if this can be fixed.

[btsgh]

@keyurparalkar #MigrationTestingIssues

36. In theming DP, change theme to rounded, add your own custom colours and save it as MyTheme4. Now in release url, create a page with Checkbox group widget. Open this page on Theming DP. MyTheme4 is not applied completely. Only the background colour is applied. Checkboxes are squared. Default checkbox is not having any background color and so looks like it is merged with the background.

[btsgh]

37. Default check box widget size in theming dp and release are different

[btsgh]

@keyurparalkar #MigrationTestingIssues

38. -In theming DP, change theme to rounded, add your own custom colours and save it as MyTheme4. -Now in release url, create a page with Checkbox widget. -Open this page on Theming DP. -MyTheme4 is not applied completely. -Instead of the checkbox being rounded and shaded with a background of dark blue as per MyTheme4, the checkbox is square with a green background

    

[btsgh]

@keyurparalkar #MigrationTestingIssues In theming DP, change theme to rounded, add your own custom colours and save it as MyTheme4. Now in release url, create a page with Tree Select widget. Open this page on Theming DP. MyTheme4 is not applied correctly. The issues are - -The Hover highlights are grey instead of light blue as per the theme. -The edges are sharp instead of rounded. -The default selected radio button is not visible in the dropdown -On selection of any option in the dropdown, corresponding radio button disappears

[btsgh]

40. Drag and Drop modal widget onto the canvas on theming DP. Confirm button "m" is getting cutoff on Modal widget

[btsgh]

41. Add a Select widget to the Canvas. Click on the dropdown .. issues found -
    • Hover over the options in the dropdown is grey, does not take the theme colour
    • The filter text box is fully rounded, as against the partially rounded for other select drop-downs Filter text box
    • The Select option area, on click, is highlighted in Grey instead of highlighting in the selected theme colours"
    • 

[btsgh]

42. Video widget - On applying a background colour, and then undoing it, (cmd + z), the colour goes away from the background. However, the hex value remains in the background colour field.

[btsgh]

43. In Tree select widget, click on the dropdown, Enter some text in the filter field - the close (x) icon appears. Move the mouse over the x, see that the grey background on the x symbol is cutoff .. Observe in release url, it is fine.

[shwetha-ramesh]

@btsgh (#43) is observed in all Select widgets.

[btsgh]

44.

• Create a Switch Group Widget
• Choose OnSelectionChange -> Show Message: ""Selected"" -> Type: Info
• Click on Deploy
• Choose an option.
• The message ""Selected"" comes up on the top of the UI (Near the URL of the page) As per release behaviour, the message ""Selected"" should come up on the right side of the UI

[btsgh]

45. "Table widget - Add a table widget in a page in release url,

• Add cell background colour - #FFC13D
• Add text colour - F86A2B
• Set text size as Paragraph 14px
• Make text align to center
• Make vertical alignment to down
• Rearrange the columns. Open this page in the theming dp

  We can see that the background colour does not apply completely on the three dots for truncate text The text in the task column is cutoff due to center

  

  alignment."

[btsgh]

46. • Created a theme ""MyTheme4"" Which is rounded with additional background colours
    • Drop an icon button widget .
    • Increase the size of the widget and note the borders of the icon button.
    • It is square with rounded borders. Also, if I navigate to another page, and come back to this icon button widget page, now the borders are sharp.
    • In Release, the round shape is retained.

[btsgh]

47. On migration, the widget text fonts are not retained as per the app in the release. They change to the theming font. (For the theme that i have chosen, Monserrat is the font type that i have selected)

[btsgh]

48. Table widget -> Connect to a query formed from a google sheets datasource (or even a mongodb datasource). Though Data is displayed - errors popup. Same document /same sheet if i connect in release .. no such errors are seen ..Looks like an additional "(" is added in table widgets in theming dp -

[btsgh]

49. On a table widget, On binding to a google sheets query and pulling data, if the text in a column exceeds the column width, at some places, it is truncated properly with three dots, and on hover - full text is shown. (which is the right behaviour) ... but in some cases, the text is cutoff and no hover text is displayed.

[shwetha-ramesh]

@jsartisan #DPIssues

50. Widget with drop down have different behavior for different family of widgets- ex: for fully rounded theme; Button group widget has sharp border radius drop down, for input family widget the drop down is fully rounded and for select widget family the drop down is medium rounded

51. For select widget the drop down appears medium rounded in edit mode and sharp border radius on Deploy mode. 1

52. Also a sporadic behavior is observed for select widget on deploy mode where theme is not applied for select widget drop down

53. Multiselect widget has no theme highlight observed - appears grey on click and hover

[chandannkumar]

@keyurparalkar #DP issue

54. Border Radius is unselected by default for every new field is added under Object type in JSON form

55. Accent color appeared as grey instead of theming color when new field added under Object type in JSON form refer pt. 54's video

[btsgh]

-Drag and drop a table widget onto the theming dp canvas. -In the properties pane, add two new columns (CustomColumn1 and CustomColumn2) -Click on the settings of CustomColumn1. Choose ""Menu Button"" from Column Type dropdown -Scroll down to LabelColor in the property pane. -Set any LabelColour from the palette. -Nothing happens on the button Expected - The label colour should get changed to what is selected in the palette.

[btsgh]

57. -Drag and drop a table widget onto the theming dp canvas. -In the properties pane, add two new columns (CustomColumn1 and CustomColumn2) -Click on the settings of CustomColumn1. Choose ""Menu Button"" from Column Type dropdown -Scroll down to Menu Items, and click Add a New Menu Item. Add 2 menu items. -Click on the OpenMenu button in the CustomColumn1 on the table. -The dropdown that appears to show the Menu items is not having the Theme applied.

    

[btsgh]

58. -Drag and drop a table widget onto the theming dp canvas. -In the properties pane, add two new columns (CustomColumn1 and CustomColumn2) -Click on the settings of CustomColumn2. Choose ""Icon Button"" from Column Type dropdown -Choose Icon as Cog for the button -Scroll down and set OnClick Navigate to say https://www.yahoo.com -Now click Deploy. On Deploy, the cogs in the CustomColumn2 have a grey background and do not have the theme applied.

    

[shwetha-ramesh]

@jsartisan #DPIssues for Table widget

59. Theme is not applied for hover on deploy mode

60. Search box border must be highlighted on click for table widget

61. "New theme colors doesnt get added to table widget row highlight on hover Step1: Select a theme (Sharp) > Drop table widget > Observe button color and row highlight on hover Step 2: Change theme (Rounded > Observe the old table widget has new theme button color but old theme row highlight Step 3: Drop a new table widget > Observe button and row hoverligght are wrt theme selected where as Table1 still has old theme highlight Step 4: Click on refresh > Observe row highlight is lost on both table widget and now appears Grey and not wrt theme" https://loom.com/share/92d6b2fd48514ef580e745ba2bdff25a

[btsgh]

62. For fully rounded theme, add a button group widget. The More button is cutoff.

[chandannkumar]

63. JSON form's Reset button is not fit with Rounded/Modern theme whereas Submit button fits.

    Applied background color in JSON form to observe the issue