Fix print CSS for containers. Bump PRR for docs (#1261)

* Fix print CSS for containers. Bump PRR for docs

Author: carloskelly13

.changeset/young-poems-poke.md

@@ -0,0 +1,6 @@
+---
+'spectacle': patch
+'spectacle-docs': patch
+---
+
+Fixed print CSS for container components. Update PRR for docs.

.github/workflows/docs.yml

@@ -64,19 +64,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Deploy docs (staging)
-        if: github.ref != 'refs/heads/main'
-        working-directory: ./website
-        run: pnpm deploy:stage
-        env:
-          # GH actions have a PR merge commit that _isn't_ our actual commits.
-          # Manually infer correct branch and sha for pull requests.
-          FORMIDEPLOY_GIT_SHA: ${{ github.event.pull_request.head.sha }}
-          FORMIDEPLOY_PULL_REQUEST: ${{ steps.pr_info.outputs.pull_request_number }}
-          GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
-          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
-
       - name: Deploy docs (production)
         if: github.ref == 'refs/heads/main'
         working-directory: ./website

package.json

@@ -39,7 +39,7 @@
     "ts-jest": "^29.0.3",
     "typescript": "^4.8.4",
     "wait-on": "^6.0.1",
-    "webpack": "^5.68.0",
+    "webpack": "5.76.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
     "wireit": "^0.7.2"

packages/spectacle/src/components/layout-primitives.ts

@@ -1,4 +1,11 @@
 import styled from 'styled-components';
+
+const containerPrintStyle = `
+  @media print {
+    height: inherit;
+  }
+`;
+
 import {
   compose,
   grid,
@@ -18,11 +25,13 @@ type BoxProps = SS.LayoutProps &
   SS.BorderProps;
 
 const Box = styled.div<BoxProps>(
-  compose(layout, space, position, color, border)
+  compose(layout, space, position, color, border),
+  containerPrintStyle
 );
 
 const FlexBox = styled.div<BoxProps & SS.FlexboxProps>(
-  compose(layout, space, position, color, border, flexbox)
+  compose(layout, space, position, color, border, flexbox),
+  containerPrintStyle
 );
 
 FlexBox.defaultProps = {
@@ -32,7 +41,10 @@ FlexBox.defaultProps = {
 };
 
 type GridProps = SS.LayoutProps & SS.GridProps & SS.PositionProps;
-const Grid = styled.div<GridProps>(compose(layout, grid, position));
+const Grid = styled.div<GridProps>(
+  compose(layout, grid, position),
+  containerPrintStyle
+);
 
 Grid.defaultProps = {
   display: 'grid'