From eac5dd4b1e2ceae639e04824da3f01eb3bc572bd Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 23 Jun 2022 17:31:35 +0200 Subject: [PATCH 1/2] update small button size and deprecate the xs one --- less/base/_buttons.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/less/base/_buttons.less b/less/base/_buttons.less index ea00d9e..65082f8 100644 --- a/less/base/_buttons.less +++ b/less/base/_buttons.less @@ -353,15 +353,14 @@ as size modifiers. // -------------------------------------------------- .upf-btn--small, .upf-btn--sm { - height: @input-size-sm; + height: 24px; a& { line-height: 2rem; } } +// Deprecated in favor of small. .upf-btn--x-small, .upf-btn--xs { - height: @input-size-x-sm; - padding: 0 @spacing-xx-sm; - line-height: 2rem; + &:extend(.upf-btn--small); } .upf-btn--medium, .upf-btn--md { From eeeaa0f9512fc97994c73633b6e166a529ab4e6c Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Fri, 24 Jun 2022 14:22:59 +0200 Subject: [PATCH 2/2] fix pr feedback and remove legacy stylemark doc --- less/base/_buttons.less | 135 +--------------------------------------- 1 file changed, 1 insertion(+), 134 deletions(-) diff --git a/less/base/_buttons.less b/less/base/_buttons.less index 65082f8..0e39a52 100644 --- a/less/base/_buttons.less +++ b/less/base/_buttons.less @@ -28,139 +28,6 @@ } -/* ---- -name: Buttons -category: Components ---- - -Buttons are best used to enable a user to perform a change or complete steps in a task. -They are typically found inside forms, modal dialogs, or as calls to action. - -We have 3 main types of buttons: -* **Default** (via `.upf-btn--default`) that can be used when you need multiple buttons - with no clear hierarchy between them. -* **Primary** (via `.upf-btn--primary`) that is to be used to emphasize the most important -action in a form (Example: "Save" or "Continue" in a form). -* **Secondary** (via `.upf-btn--secondary`), that is to be used as a companion to primary action -to represent a secondary action a user can perform. Because they can have negative consequences, -especially when used unintentionally, Secondary Buttons have less visual weight. - -```buttons.html -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-``` - -### Alternative buttons ------------------------- -* **For dark background** (via `.upf-btn--dark-bg`) can be used for buttons on dark backgrounds to ensure that the button is still visible. - -* **Destructive buttons** (via `.upf-btn--destructive`) can be used to signify a call-to-action that is negative (such as deletion) - -```buttons-alternative.html -
-
- -
-
- -
-
- -
- -
-``` - -```buttons-destructive-demo.hbs - {{#destructive-button destructiveAction="deleteCampaign" record=model -   Delete - {{/destructive-button}} -``` -TODO: Finish this (font-awesome imports not working correctly?) -* **Button with social media** -* **Button with right icon** can be used to announce that clicking it will lead somewhere, making it useful for multistep processes. -```buttons-alternative-2.html - -``` - -### Available Sizes -------------------- - -Need different sizes to fit your design. Use `.upf-btn--small` or `.upf-btn--x-small` -as size modifiers. - -```sizes.html -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-``` -*/ - .upf-btn { background-image: none; border-radius: @default-radius; @@ -353,7 +220,7 @@ as size modifiers. // -------------------------------------------------- .upf-btn--small, .upf-btn--sm { - height: 24px; + height: var(--spacing-px-24); a& { line-height: 2rem; } }