search

qooxdoo / qooxdoo

qooxdoo - Universal JavaScript Framework
http://qooxdoo.org
Other
764 stars 259 forks source link

Fix styling of qx.ui.form.SelectBox which have a coloured button #10640

Closed p9malino26 closed 5 months ago

p9malino26 commented 5 months ago

This PR fixes the issue that occurs when an instance of qx.ui.form.SelectBox is made taller (thicker) than its default height, causing its button to not stretch to the SelectBox's full height. It happens for example when a SelectBox is placed inside a toolbar. This causes visual issues in themes where the button is a different colour to the rest of the select box, like in zx.ui.theme.avocado:

image

However, SelectBoxes with their default heights look fine:

image

This PR solves the problem by wrapping the SelectBox's "arrow" child control in a qx.ui.container.Composite (qxObject id: "arrowButton"). The arrowButton is made to stretch to the full height of the SelectBox, but the arrow stays in the centre of arrowButton.

NB: while the Composite is named like a button, it is not an actual Qooxdoo button, but it still behaves like a button.

This is a very minimally-breaking change, which at least does not break Qooxdoo's build in themes (Tangible, Classic, Modern, etc). This will only really affect themes which give a backgroundColor to selectbox/arrow that is different to the SelectBox's backgroundColor, and this can be fixed by adding the following to the theme's Appearance.js:

"selectbox-arrow-button": {
      include: "widget",
      style(states) {
        return {
          backgroundColor: "selectbox-button-color"
        }
      }
    }

Also, as a bonus, I have changed the overrides to be standard JSDoc.