Skip to content
This repository has been archived by the owner on Aug 3, 2022. It is now read-only.

update small button size and deprecate the xs one #145

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

update small button size and deprecate the xs one #145

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eac5dd4
update small button size and deprecate the xs one
phndiaye Jun 23, 2022
eeeaa0f
fix pr feedback and remove legacy stylemark doc
phndiaye Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 3 additions & 137 deletions less/base/_buttons.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div class="col-xs-4">
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--default">Default</button>
</div>
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--default disabled">Disabled</button>
</div>
</div>

<div class="col-xs-4">
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--primary">Primary</button>
</div>
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--primary disabled">Disabled Primary</button>
</div>
</div>

<div class="col-xs-4">
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--secondary">Secondary</button>
</div>
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--secondary disabled">Disabled Secondary</button>
</div>
</div>
```

### 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
<div style="background-color: #1b0059;" class="col-xs-4">
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--dark-bg">Dark background</button>
</div>
<div class="margin-top-xxx-sm">
<button class="upf-btn upf-btn--dark-bg disabled">Disabled dark background</button>
</div>
</div>

<div class="col-xs-4">
<button class="upf-btn upf-btn--destructive">
Destructive button
</button>
</div>
```

```buttons-destructive-demo.hbs
{{#destructive-button destructiveAction="deleteCampaign" record=model
<i class="fa fa-trash"></i> &nbsp; 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
<button class="upf-btn upf-btn--has-right-icon">
Button with right icon

<span class="upf-btn__right-icon">
<i class="fa fa-long-arrow-right"></i>
</span>
</button>
```

### Available Sizes
-------------------

Need different sizes to fit your design. Use `.upf-btn--small` or `.upf-btn--x-small`
as size modifiers.

```sizes.html
<div class="col-xs-4">
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--default">Standard Size</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--primary">Standard Size</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--secondary">Standard Size</button>
</div>
</div>

<div class="col-xs-4">
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--default upf-btn--small">Size Small</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--primary upf-btn--small">Size Small</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--secondary upf-btn--small">Size Small</button>
</div>
</div>

<div class="col-xs-4">
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--default upf-btn--x-small">Size Extra Small</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--primary upf-btn--x-small">Size Extra Small</button>
</div>
<div class="margin-bottom-xxx-sm">
<button class="upf-btn upf-btn--secondary upf-btn--x-small">Size Extra Small</button>
</div>
</div>
```
*/

.upf-btn {
background-image: none;
border-radius: @default-radius;
Expand Down Expand Up @@ -353,15 +220,14 @@ as size modifiers.
// --------------------------------------------------

.upf-btn--small, .upf-btn--sm {
height: @input-size-sm;
height: var(--spacing-px-24);

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 {
Expand Down