primer-buttons
Advanced tools
Comparing version 0.3.1 to 0.4.0
@@ -0,1 +1,13 @@ | ||
# v0.4.0 | ||
* Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40) | ||
* update buttons version number - broccolini [github/github@6504e09](https://github.com/github/github/commit/6504e09) | ||
* Make all href #url - Mu-An Chiou [github/github@27ba40c](https://github.com/github/github/commit/27ba40c) | ||
* Add placeholder URL and aria-expanded - Mu-An Chiou [github/github@8f6b03d](https://github.com/github/github/commit/8f6b03d) | ||
* Make sure :disabled state is different from normal state on .btn-link - Mu-An Chiou [github/github@3e17fe6](https://github.com/github/github/commit/3e17fe6) | ||
* bump padding on social-count - broccolini [github/github@f12bd30](https://github.com/github/github/commit/f12bd30) | ||
* Make padding on btn-large more normal - Patrick Marsceill [github/github@6db7bbe](https://github.com/github/github/commit/6db7bbe) | ||
* Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) | ||
* Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) | ||
# v0.3.1 | ||
@@ -2,0 +14,0 @@ |
{ | ||
"version": "0.3.1", | ||
"version": "0.4.0", | ||
"name": "primer-buttons", | ||
@@ -14,5 +14,5 @@ "description": "A collection of buttons used for primary and secondary actions.", | ||
], | ||
"repository": "https://github.com/primer/buttons.git", | ||
"repository": "https://github.com/primer/primer-buttons.git", | ||
"bugs": { | ||
"url": "https://github.com/primer/buttons/issues" | ||
"url": "https://github.com/primer/primer-buttons/issues" | ||
}, | ||
@@ -19,0 +19,0 @@ "scripts": { |
@@ -38,12 +38,7 @@ # Primer CSS Buttons | ||
You can read more about other primer modules in the [full primer docs][docs]. | ||
<!-- %docs | ||
title: Buttons | ||
homepage: https://github.com/primer/buttons | ||
status: Stable | ||
--> | ||
### Buttons | ||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. | ||
@@ -59,3 +54,3 @@ | ||
<button class="btn" type="button">Button button</button> | ||
<a class="btn" href="#" role="button">Link button</a> | ||
<a class="btn" href="#url" role="button">Link button</a> | ||
``` | ||
@@ -103,3 +98,3 @@ | ||
<button class="btn" type="button" disabled>Disabled button</button> | ||
<a class="btn disabled" href="#" role="button">Disabled button</a> | ||
<a class="btn disabled" href="#url" role="button">Disabled button</a> | ||
``` | ||
@@ -111,3 +106,3 @@ | ||
<button class="btn btn-primary" type="button" disabled>Disabled button</button> | ||
<a class="btn btn-primary disabled" href="#" role="button">Disabled button</a> | ||
<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a> | ||
``` | ||
@@ -117,3 +112,3 @@ | ||
<button class="btn btn-danger" type="button" disabled>Disabled button</button> | ||
<a class="btn btn-danger disabled" href="#" role="button">Disabled button</a> | ||
<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a> | ||
``` | ||
@@ -123,3 +118,3 @@ | ||
<button class="btn btn-outline" type="button" disabled>Disabled button</button> | ||
<a class="btn btn-outline disabled" href="#" role="button">Disabled button</a> | ||
<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a> | ||
``` | ||
@@ -144,7 +139,7 @@ | ||
<div class="clearfix"> | ||
<a class="btn btn-sm btn-with-count" href="#" role="button"> | ||
<a class="btn btn-sm btn-with-count" href="#url" role="button"> | ||
<%= octicon "eye" %> | ||
Watch | ||
</a> | ||
<a class="social-count" href="#">6</a> | ||
<a class="social-count" href="#url">6</a> | ||
</div> | ||
@@ -179,33 +174,34 @@ ``` | ||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.btn-group` and the buttons will be rounded and spaced automatically. | ||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically. | ||
```html | ||
<div class="btn-group"> | ||
<button class="btn" type="button">Button</button> | ||
<button class="btn" type="button">Button</button> | ||
<button class="btn" type="button">Button</button> | ||
<div class="BtnGroup mr-2"> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
</div> | ||
<div class="btn-group"> | ||
<button class="btn btn-outline" type="button">Button</button> | ||
<button class="btn btn-outline" type="button">Button</button> | ||
<button class="btn btn-outline" type="button">Button</button> | ||
<div class="BtnGroup mr-2"> | ||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button> | ||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button> | ||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button> | ||
</div> | ||
<div class="btn-group"> | ||
<button class="btn btn-sm" type="button">Button</button> | ||
<button class="btn btn-sm" type="button">Button</button> | ||
<button class="btn btn-sm" type="button">Button</button> | ||
<div class="BtnGroup"> | ||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button> | ||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button> | ||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button> | ||
</div> | ||
``` | ||
Add `.btn-group-form` to `<form>`s within `.btn-group`s for proper spacing and rounded corners. | ||
Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rounded corners. | ||
```html | ||
<div class="btn-group"> | ||
<form class="btn-group-form"> | ||
<button class="btn" type="button">Button in a form</button> | ||
<div class="BtnGroup"> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
<form class="BtnGroup-form"> | ||
<button class="btn BtnGroup-item" type="button">Button in a form</button> | ||
</form> | ||
<button class="btn" type="button">Button</button> | ||
<button class="btn" type="button">Button</button> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
<button class="btn BtnGroup-item" type="button">Button</button> | ||
</div> | ||
@@ -220,3 +216,3 @@ ``` | ||
<span class="hidden-text-expander"> | ||
<button type="button" class="ellipsis-expander">…</button> | ||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button> | ||
</span> | ||
@@ -223,0 +219,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
28652
30
225