2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-10-03 17:21:20 +08:00
discourse/plugins
chapoi 759fc04041
UX: rework button classes (#34882)
Context: The `btn` mixin is used for every functional button, but this
includes button elements that are not, or should not be, styled like our
default or primary buttons.

To change how this works this commit:
* stripped down the mixin to the bare essentials, mainly limiting to the
properties that use variables.
* moved most things into the `btn` class
* moved some things into specific descriptive classes (default, danger,
success) such as border-radius
Example of button that does not need a border-radius and would benefit
from this:
<img width="464" height="184" alt="CleanShot 2025-09-19 at 12 56 04@2x"
src="https://github.com/user-attachments/assets/e908b2cf-971f-4c1f-aade-7492bad2f89c"
/>

* Deprecated…
  * FlatButton component
* btn-active: we should use the proper pseudoclass :active or a –-active
modifier in code if we need it
* btn-text: every button by default is a btn-text. We already have a
class to indicate when it isn’t (no-text)
* fixed btn-link property to make DButton component behave like an
inline link (no padding, link-styling)
* Since I moved styling from .btn, ths means every button now needs a
specific declaration. So I’ve added btn-default where necessary.
* Fixed btn-flat hover effect: The difference between btn-flat and
btn-transparent was getting very ambiguous. I’ve fixed the hover effect
for btn-flat so that the distinction is:
<img width="1094" height="408" alt="image"
src="https://github.com/user-attachments/assets/addf56a9-1f61-463d-abd9-5028a3b88fad"
/>
* Changed the custom icon colour from header icons so it follows the
normal btn-flat styling, the way the sidebar icon already was doing.
(Consistency)


**Other small button-related change along the way**
What | BC | AC |
|----| ----|--------|
Inconsistent save/cancel colours | <img width="1720" height="1084"
alt="CleanShot 2025-09-19 at 15 31 40@2x"
src="https://github.com/user-attachments/assets/227289c3-6ded-4633-868d-6e33c32d83c3"
/> | <img width="1720" height="1084" alt="CleanShot 2025-09-19 at 15 30
56@2x"
src="https://github.com/user-attachments/assets/b23f96c9-04f3-40ea-9fba-2be59eae8e64"
/> |

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2025-10-02 13:32:36 -06:00
..
automation DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
chat UX: rework button classes (#34882) 2025-10-02 13:32:36 -06:00
checklist DEV: Silence post-stream-widget-overrides in the checklist plugin (#33743) 2025-07-22 14:47:33 -03:00
discourse-adplugin DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-affiliate DEV: Clean up requires (#34946) 2025-09-24 12:00:22 +02:00
discourse-ai UX: rework button classes (#34882) 2025-10-02 13:32:36 -06:00
discourse-apple-auth Revert "DEV: Move more data into the server session" (#35115) 2025-10-01 16:44:43 +02:00
discourse-assign DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-calendar UX: rework button classes (#34882) 2025-10-02 13:32:36 -06:00
discourse-chat-integration UX: rework button classes (#34882) 2025-10-02 13:32:36 -06:00
discourse-data-explorer DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-details Update translations (#35031) 2025-09-29 10:26:53 +02:00
discourse-gamification DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-github DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-graphviz DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-hcaptcha Update translations (#35104) 2025-10-01 11:08:49 +02:00
discourse-lazy-videos DEV: Remove unnecessary freeze calls (#35064) 2025-09-30 15:36:16 +02:00
discourse-local-dates DEV: Replace deprecated Ember's native array any with some (#35010) 2025-09-30 15:49:13 -03:00
discourse-login-with-amazon Update translations (#35065) 2025-09-30 16:06:14 +02:00
discourse-lti Update translations (#35065) 2025-09-30 16:06:14 +02:00
discourse-math DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-microsoft-auth DEV: Fix random typos (#34987) 2025-09-26 09:52:28 +08:00
discourse-narrative-bot DEV: Remove unnecessary freeze calls (#35064) 2025-09-30 15:36:16 +02:00
discourse-oauth2-basic Update translations (#35104) 2025-10-01 11:08:49 +02:00
discourse-openid-connect DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-patreon DEV: Remove unnecessary freeze calls (#35064) 2025-09-30 15:36:16 +02:00
discourse-policy DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-post-voting FIX: post voting comments editing UX (#35108) 2025-10-01 11:31:19 +02:00
discourse-presence Update translations (#34482) 2025-08-22 17:11:31 +02:00
discourse-reactions DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-rss-polling DEV: Resolve deprecated route names in rss-polling (#35084) 2025-09-30 22:07:07 +01:00
discourse-solved DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-subscriptions DEV: Remove obsolete register_svg_icon checks (#35067) 2025-09-30 15:51:44 +02:00
discourse-templates DEV: Remove obsolete register_svg_icon checks (#35067) 2025-09-30 15:51:44 +02:00
discourse-topic-voting DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-user-notes DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
discourse-zendesk-plugin DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
footnote DEV: Remove obsolete register_svg_icon checks (#35067) 2025-09-30 15:51:44 +02:00
poll DEV: Clean up scope resolution operators in plugins (#34979) 2025-09-30 14:36:34 +02:00
spoiler-alert Update translations (#35031) 2025-09-29 10:26:53 +02:00
styleguide UX: rework button classes (#34882) 2025-10-02 13:32:36 -06:00