jquery / jquery/jquery-ui

Button backwards compatibility and CSS theme enhancement

Open
#2,381 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Button
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

I have written a wrapper to do this (but that's me and not others), however since 1.12 the icons in the buttons have changed.

The current icons are next to the text, however I would like to suggest 2 additional values for the "iconPosition" option, being "far-left" and "far-right", thus putting the icons in the same place as v1.11

Also, regarding the CSS with themes. To simplify theming, and as older browsers are now not supported, may I suggest using CSS variables where convinient:

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: var(--radius);
}
.ui-widget-overlay {
	background: var(--overlay-color);
	opacity: var(--overlay-opacity);
}

Not all values need to be variables, just ones adjusted in ThemeRoller and maybe a few more. That way there is a standard CSS file for all themes and an addendum or additional short file with the variable values. This would make it easier to make your own themes or do alterations.

Lastly, for margins, padding, etc. to switch from "px" to "em" where possible, thus making it more responsive to font sizing

Just as a praise:

People do not realise how amazing and useful jquery ui widgets are. We use them to dynamically write pages and content in our web apps, breaking them into different functions therein. Due to this, we can insert custom JS that overrides or adds to each function, being a quick and simple way for people to enable plugins for their web apps, without destroying the underlying code.

Basically we have custom widgets that dynamically builds each page, broken up into various functions, from init_top_section to get_save_params, save and saved, with options for the location of the save file, etc.. I know it wasn't built for this, but it has transformed the capabilities of our software, in that we can insert JS into the page that only implements changes safely for a particular user without affecting any others.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. First review the existing button iconPosition behavior and the ThemeRoller/CSS theming structure, then clarify which of the proposed compatibility, CSS-variable, and unit-conversion changes are in scope before defining completion criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, jquery
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.