Socket
Socket
Sign inDemoInstall

primer-buttons

Package Overview
Dependencies
Maintainers
1
Versions
850
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

primer-buttons - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

12

CHANGELOG.md

@@ -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 @@

6

package.json
{
"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">&hellip;</button>
<button type="button" class="ellipsis-expander" aria-expanded="false">&hellip;</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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc