@primer/css 19.2.1-rc.c39b001c → 19.3.0-rc.4c07f3a3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "19.2.1-rc.c39b001c",
+  "version": "19.3.0-rc.4c07f3a3",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -47,7 +47,7 @@
     "autoprefixer": "10.4.1",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",
-    "eslint": "8.6.0",
+    "eslint": "8.8.0",
     "eslint-plugin-github": "4.3.5",
     "eslint-plugin-jest": "25.3.3",
     "eslint-plugin-prettier": "4.0.0",
@@ -58,7 +58,7 @@
     "jest": "27.4.5",
     "js-yaml": "4.1.0",
     "postcss": "8.4.5",
-    "postcss-calc": "8.0.0",
+    "postcss-calc": "8.2.3",
     "postcss-import": "14.0.2",
     "postcss-load-config": "3.1.0",
     "postcss-scss": "4.0.2",

package/pagination/pagination.scss

@@ -4,7 +4,6 @@
   a,
   span,
   em {
-    display: inline-block;
     min-width: 32px;
     // stylelint-disable-next-line primer/spacing
     padding: 5px 10px;
@@ -84,6 +83,44 @@
       clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
     }
   }
+
+  // Responsive
+
+  // Hide everything by default
+  > * {
+    display: none;
+  }
+
+  // 0 -> sm
+  // Only show [Previous] [Next]
+
+  > :first-child,
+  > :last-child,
+  > .previous_page,
+  > .next_page {
+    display: inline-block;
+  }
+
+  // sm -> md
+  // Also show [first] [last] [current number] and [...]
+
+  @include breakpoint(sm) {
+    > :nth-child(2),
+    > :nth-last-child(2),
+    > .current,
+    > .gap {
+      display: inline-block;
+    }
+  }
+
+  // md -> or more
+  // Show everything
+
+  @include breakpoint(md) {
+    > * {
+      display: inline-block;
+    }
+  }
 }
 
 // Unified centered pagination across the site

package/table-object/table-object.scss

@@ -1,3 +1,6 @@
+// Deprecated
+// TODO: Replace TableObject with flexbox or a new Table component
+
 // TableObject is a module for creating dynamically resizable elements that
 // always sit on the same horizontal line (e.g., they never wrap). Using
 // tables means it's cross browser friendly.

package/table-object/README.md

@@ -1,25 +0,0 @@
----
-bundle: "table-object"
-generated: true
----
-
-# Primer CSS: `table-object` bundle
-
-## Usage
-
-Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
-
-```scss
-@import "@primer/css/table-object/index.scss";
-```
-
-## Build
-
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`.
-
-## License
-
-[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
-
-
-[scss]: https://sass-lang.com/documentation/syntax#scss