Commit Graph

35 Commits

Author SHA1 Message Date
Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00
Penar Musaraj 2dc48fd6c1
UX: Uniformize styles for focus states (#11933) 2021-02-03 11:45:54 -05:00
Penar Musaraj c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00
Joffrey JAFFEUX 5d792483f0
UI: various select-kit dropdown tweaks/cleaning (#9922) 2020-05-29 11:11:28 +02:00
Joffrey JAFFEUX d7d5bb4454
UX: homogenises sk row padding and topic-admin-menu (#9920) 2020-05-29 09:35:43 +02:00
Joffrey JAFFEUX 0431942f3d
DEV: select-kit 2 (#7998)
This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component.

Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
2020-02-03 14:22:14 +01:00
Kris 9c41b66996 UX: Tag combo box styles should match tags on topics 2019-12-11 14:49:39 -05:00
Kris d4f1e6d11b UX: update disabled dropdowns style w/ color variables 2019-10-22 16:32:24 -04:00
Kris 4af7471ead Better contrast ratio match between dark and light themes 2019-01-02 17:54:22 -05:00
Kris 0bf413be3e IE11 fix for category dropdown search icon position 2018-10-26 13:28:05 -04:00
Kris eca671b972 Prevent category dropdowns from cropping text, simplify styles 2018-10-01 11:53:18 -04:00
Guo Xiang Tan d41f74578a Fix JS build. 2018-09-19 23:12:34 +08:00
Joe b64436ba09
UX: select-kit filter input size fix 2018-09-19 22:05:56 +08:00
Joe e844fa5370
UX: general cleanup of inputs, buttons and select elements - part 1 2018-09-19 20:37:04 +08:00
Kris 4cf3ef53bc Prevent spinner in tag dropdown from being squished 2018-09-18 11:27:01 -04:00
Joe 02e0426de6
FIX: search icon is rendered outside of tag-selector filter-input
Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
Kris 7d66e11771
UX: Mobile Nav Cleanup (#5812) 2018-05-09 17:48:34 -04:00
Guo Xiang Tan 36d9f7f814 Revert "UX: Don't set width to auto for select kit combo box."
This reverts commit c7b526b9e0.
2018-05-09 14:28:45 +08:00
Guo Xiang Tan c7b526b9e0 UX: Don't set width to auto for select kit combo box. 2018-05-09 14:21:47 +08:00
Kris f69c289fcf select-kit consistency fix 2018-05-03 11:08:47 -04:00
Kris d7b1a83e94 Taller category dropdown using viewport height 2018-05-02 12:23:37 -04:00
Kris 70ed25470d Streamlining select-kit styles for simpler styling 2018-05-01 20:43:18 -04:00
Kris 108e622a61 Matching select-kit padding with inputs 2018-04-19 11:36:09 -04:00
Joffrey JAFFEUX 3287ac77e0
FIX: reverts combobox placeholder and introduces noneLabel
noneLabels works almost like none but instead of actually adding a row in the list, it will only change the text displayed in the header, when there's no selection.
2018-03-29 13:42:00 +02:00
Guo Xiang Tan 27f06505b1 Allow placeholder to be configured for `combo-box`. 2018-03-29 17:04:48 +08:00
Joffrey JAFFEUX 037cc63b91
FIX: minor alignments improvements to select-kit 2018-03-22 17:17:28 +01:00
Kris 677e126fbf UX: Implementing a box-shadow system, cleaning up existing shadows 2018-02-20 12:18:20 -05:00
Joffrey JAFFEUX c48761c628
s/select-box-kit/select-kit
Definitely remove legacy naming.
2018-02-05 18:25:39 +01:00
Kris add641cbbc
UX: Input and search cleanup (#5546)
* Cleaning up input sizes

* alignment

* more alignment adjustments
2018-01-31 11:44:51 -05:00
Bruno Perel 6750ff6873 (S)CSS cleanup: 0px => O and removal of duplicated properties (#5526) 2018-01-25 09:53:36 -05:00
Kris 674013129a
UX: Type system rebuild (#5492) 2018-01-12 17:27:38 -05:00
Kris d615a37eba UX: Hiding composer preview reduces width of composer overlay 2017-12-01 22:23:12 -05:00
Kris ada1d6b987
Composer restyle
* composer restyle, some input normalization

* style adjustments: spacing, preview background, colors

* small spacing adjustments, removing default iOS input appearance, fixing merge

* small width adjustment

* fixing mobile link modal for small devices

* FIX: more resilient allowInitiatlValueMutation implementation

* Build scrollMap only on scroll.

* FIX: pick date and time was not reseting state

* FIX: removes auto sizing and touchstart support for now

* Revert "FIX: reflects discourse icons naming scheme s/d-icon-*/d-*"

This reverts commit b5ed980235.

* tweak icon-library generation

* FIX: regression preventing to set number of hours before closing

This commit also adds a full test suite for editing topic timer.

* FIX: makes allowInitialValueMutation more restrictive

* FIX: invite-list expects initial value mutation

* fixing tag input spacing

* minor input cleanup

* bump onebox version

* FIX: avoids test failing at some times of the day

* FIX: various issues when editing category permissions

This commit also adds multiple tests
2017-11-27 15:23:18 -05:00
Joffrey JAFFEUX 329343be06
FIX: various sizing issues on select-kit 2017-11-26 17:21:39 +01:00
Joffrey JAFFEUX 39f3dbd945
Introduces select-kit
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```
2017-11-21 11:53:09 +01:00