primer-utilities - npm Package Compare versions

Comparing version 4.15.0-alpha.1a319bd0 to 4.15.0-alpha.1a7850cf

docs/animations.md

 ---
 title: Animations
+path: utilities/animations
 example_layout: toggle
@@ -15,3 +16,3 @@ status: Stable
 
-```html
+```erb
 <span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
@@ -24,3 +25,3 @@ ```
 
-```html
+```erb
 <span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
@@ -33,3 +34,3 @@ ```
 
-```html
+```erb
 <div class="anim-fade-up"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
@@ -42,3 +43,3 @@ ```
 
-```html
+```erb
 <div class="anim-fade-down"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
@@ -51,3 +52,3 @@ ```
 
-```html
+```erb
 <div class="anim-scale-in bg-gray-dark text-white p-2"><%= octicon("mark-github") %></div>
@@ -68,3 +69,3 @@ ```
 
-```html
+```erb
 <%= octicon("mark-github", :class => "anim-pulse") %>
@@ -77,3 +78,3 @@ ```
 
-```html
+```erb
 <div class="Box hover-grow m-3 p-4">
@@ -80,0 +81,0 @@ <%= octicon("mark-github", :height => 32) %>

docs/borders.md

 ---
 title: Borders
-status: New release
+path: utilities/borders
+status: Stable
 status_issue: https://github.com/github/design-systems/issues/72
@@ -5,0 +6,0 @@ ---

docs/box-shadow.md

 ---
 title: Box shadow
-status: New release
+path: utilities/box-shadow
+status: Stable
 status_issue: https://github.com/github/design-systems/issues/269
@@ -21,3 +22,3 @@ ---
 
-These types of shadows are typically applied to elements with borders, like [`Box`](/styleguide/css/styles/core/components/box).
+These types of shadows are typically applied to elements with borders, such as the [Box component](/css/components/box).
 
@@ -28,6 +29,6 @@ ```html
     <div class="Box-row">
-      <h3 class="mb-0">Organization</h3>
+      <h3 class="m-0">Organization</h3>
     </div>
     <div class="Box-row">
-      <p class="mb-0 alt-text-small text-gray">
+      <p class="mb-0 text-gray">
         Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
@@ -55,3 +56,3 @@ </p>
 
-```html
+```erb
 <div class="col-6">
@@ -61,3 +62,3 @@ <a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
     <h3 class="text-gray-dark">Serverless architecture</h3>
-    <p class="alt-text-small text-gray">
+    <p class="text-gray">
       Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
@@ -87,3 +88,3 @@ </p>
 <div class="box-shadow-large rounded-2 overflow-hidden">
-  <img src="<%= image_path "modules/site/org_example_nasa.png" %>" class="img-responsive" alt="NASA is on GitHub">
+  <img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub">
 </div>
@@ -90,0 +91,0 @@ ```

docs/details.md

 ---
 title: Details
-status: New release
+path: utilities/details
+status: Stable
 ---
@@ -5,0 +6,0 @@

docs/flexbox.md

 ---
 title: Flexbox
-status: New release
-source: /app/assets/stylesheets/primer-core/utilities/lib/layout.scss
+path: utilities/flexbox
+status: Stable
 status_issue: https://github.com/github/design-systems/issues/157
@@ -579,3 +579,3 @@ ---
 
-All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas:
+All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas:
 
@@ -648,6 +648,6 @@ - `d-[breakpoint]-[property]` for `display`
 
-```html
+```erb
 <div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
   <div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
-    <img style="max-width:100px; max-height:100px;" src="/images/gravatars/gravatar-user-420.png" />
+    <img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
   </div>
@@ -665,4 +665,4 @@ <div class="d-flex text-center text-md-left">
 
-This section lists flexbox bugs that affect browsers we [currently support](.../styles#user-content-browser-support).
+This section lists flexbox bugs that affect browsers we currently support (**citation needed**).
 
 **1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).

docs/layout.md

 ---
 title: Layout
+path: utilities/layout
 status: Stable
@@ -54,3 +55,3 @@ ---
 
-There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](../../objects/grid#column-widths).
+There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/css/objects/grid#column-widths).
 
@@ -69,3 +70,3 @@ ```html
 ### Responsive display
-A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
+A selection of display utilities are able to be applied or changed per [breakpoint](/css/objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
 
@@ -122,3 +123,3 @@ In the following example, the `ul` element switches from `display: block` on mobile to  `display: inline-block` at the `md` breakpoint, while the list items remain inline.
 ### Responsive floats
-Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
+Float utilities can be applied or changed per [breakpoint](/css/objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
 
@@ -168,3 +169,3 @@ Each responsive float utility is applied to the specified breakpoint and up, using the following formula:  `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
 <div class="one-fourth column">
-  <img class="width-fit bg-gray" src="/images/gravatars/gravatar-user-420.png" alt="width fitted octocat" />
+  <img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" />
 </div>
@@ -195,3 +196,3 @@ ```
 
-```html
+```erb
 <div class="d-table border border-gray">
@@ -213,2 +214,3 @@ <div class="d-table-cell height-full v-align-middle pl-3">
 _Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
+
 ```html
@@ -218,3 +220,3 @@ <div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
 </div>
-<div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px;  top:12px; left:12px;">
+<div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px; top:12px; left:12px;">
   Two
@@ -221,0 +223,0 @@ </div>

docs/margin.md

 ---
 title: Margin
+path: utilities/margin
 status: Stable
 ---
 
-Margin utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
+Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
 
@@ -106,3 +107,3 @@ {:toc}
 
-All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
@@ -109,0 +110,0 @@ ```html

docs/padding.md

 ---
 title: Padding
+path: utilities/padding
 status: Stable
 ---
 
-Padding utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
+Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
 
@@ -88,3 +89,3 @@ {:toc}
 
-All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
@@ -103,3 +104,3 @@ ```html
 
-It is intended to be used with [container styles](../../objects/grid#containers)
+It is intended to be used with [container styles](/css/objects/grid#containers)
 
@@ -106,0 +107,0 @@ ```html

docs/typography.md

 ---
 title: Typography
+path: utilities/typography
 status: Stable
 ---
 
-Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/primer/support/typography/#typography-variables) that you can use in components or custom CSS.
+Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
 
 {:toc}
 
-Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/primer/support/breakpoints) to be larger on desktop.
+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
 
@@ -12,0 +13,0 @@ | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |

package.json

 {
-  "version": "4.15.0-alpha.1a319bd0",
+  "version": "4.15.0-alpha.1a7850cf",
   "name": "primer-utilities",
@@ -31,6 +31,6 @@ "description": "Immutable, atomic CSS classes to rapidly build product",
     "prepublishOnly": "../../script/notify pending",
-    "publish": "../../script/notify success"
+    "postpublish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.8.0-alpha.1a319bd0"
+    "primer-support": "4.8.0-alpha.1a7850cf"
   },
@@ -37,0 +37,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

459570

increased by0.3%

Lines of code

217

increased by1.88%

Dependency changes

• + Addedprimer-support@4.8.0-alpha.1a7850cf(transitive)

• - Removedprimer-support@4.8.0-alpha.1a319bd0(transitive)

• Updatedprimer-support@4.8.0-alpha.1a7850cf