Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
primer-box
Advanced tools
primer-box - npm Package Compare versions
Comparing version 2.6.0-alpha.62009446 to 2.6.0-alpha.77423703
| { | ||
| "version": "2.6.0-alpha.62009446", | ||
| "version": "2.6.0-alpha.77423703", | ||
| "name": "primer-box", | ||
@@ -30,6 +30,6 @@ "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", | ||
| "prepublishOnly": "../../script/notify pending", | ||
| "publish": "../../script/notify success" | ||
| "postpublish": "../../script/notify success" | ||
| }, | ||
| "dependencies": { | ||
| "primer-support": "4.8.0-alpha.62009446" | ||
| "primer-support": "4.8.0-alpha.77423703" | ||
| }, | ||
@@ -36,0 +36,0 @@ "keywords": [ |
@@ -40,4 +40,5 @@ # Primer box | ||
| title: Box | ||
| path: components/box | ||
| status_issue: https://github.com/github/design-systems/issues/198 | ||
| status: New release | ||
| status: Stable | ||
| --> | ||
@@ -263,3 +264,3 @@ | ||
| `Box-danger` is often paired with a red heading. See the [subhead](../subhead) docs for more information. | ||
| `Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information. | ||
@@ -361,5 +362,5 @@ ```html | ||
| Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](../alerts) for more information. | ||
| Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information. | ||
| ```html | ||
| ```erb | ||
| <div class="Box"> | ||
@@ -391,9 +392,9 @@ <div class="Box-header"> | ||
| ```html | ||
| <div class="Box"> | ||
| <div class="Box-body"> | ||
| <span class="pr-2">Box body</span> | ||
| <button href="#" class="Box-btn-octicon btn-octicon"><%= octicon("pencil") %></button> | ||
| </div> | ||
| ```erb | ||
| <div class="Box"> | ||
| <div class="Box-body"> | ||
| <span class="pr-2">Box body</span> | ||
| <button href="#" class="Box-btn-octicon btn-octicon"><%= octicon "pencil" %></button> | ||
| </div> | ||
| </div> | ||
| ``` | ||
@@ -403,21 +404,21 @@ | ||
| ```html | ||
| <div class="Box"> | ||
| <div class="Box-header clearfix"> | ||
| <button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon("x") %></button> | ||
| <h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3> | ||
| </div> | ||
| <div class="Box-body"> | ||
| Box body | ||
| </div> | ||
| ```erb | ||
| <div class="Box"> | ||
| <div class="Box-header clearfix"> | ||
| <button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon "x" %></button> | ||
| <h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3> | ||
| </div> | ||
| <div class="Box-body"> | ||
| Box body | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ```html | ||
| <div class="Box"> | ||
| <div class="Box-row clearfix"> | ||
| <button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button> | ||
| <p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p> | ||
| </div> | ||
| ```erb | ||
| <div class="Box"> | ||
| <div class="Box-row clearfix"> | ||
| <button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button> | ||
| <p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p> | ||
| </div> | ||
| </div> | ||
| ``` | ||
@@ -463,3 +464,3 @@ | ||
| Use [flexbox utilities](../../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. | ||
| Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. | ||
@@ -570,3 +571,3 @@ ```html | ||
| When a box is all by itself centered on a page you can use [column widths](../../objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../../utilities/typography) instead of the built in box title styles. | ||
| When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles. | ||
@@ -592,3 +593,3 @@ ```html | ||
| Box patterns can also be made with, and modified with [border utilities](../../utilities/borders). | ||
| Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders). | ||
@@ -595,0 +596,0 @@ <!-- %enddocs --> |
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Number of lines in readme file
- increased by0.17%
599
Worsened metrics
- Total package byte prevSize
- decreased by-0.09%
39897
Dependency changes
+ Addedprimer-support@4.8.0-alpha.77423703(transitive)
- Removedprimer-support@4.8.0-alpha.62009446(transitive)