chore: add pr-preview and some styling issues

.github/workflows/pr-preview.yml

@@ -0,0 +1,58 @@
+
+### WARNING -- this file was generated by generate-workflows
+name: pr-preview
+on: pull_request_target
+jobs:
+  build-upload:
+    runs-on: ubuntu-latest
+    env:
+      SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
+      SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+      GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }}
+      GH_PR_NUM:   ${{ github.event.number }}
+    steps:
+      - uses: actions/checkout@v4
+      # Yes, we really want to checkout the PR
+      - run: |
+          git fetch origin pull/$GH_PR_NUM/head:tmp
+          git checkout tmp
+
+      - run: |
+          git rev-parse origin/main
+          git rev-parse HEAD
+          git rev-parse origin/main..HEAD
+          git log origin/main..HEAD --format="%b"
+
+      # Yes, we really want to checkout the PR
+      # Injected by generate-workflows.js
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - uses: actions/cache@v4
+        id: npm-cache
+        name: Load npm deps from cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-npm-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+      - run: npm install --frozen-lockfile --legacy-peer-deps
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+      - run: npm run build
+        name: Build component groups
+      - uses: actions/cache@v4
+        id: docs-cache
+        name: Load webpack cache
+        with:
+          path: '.cache'
+          key: ${{ runner.os }}-v4-${{ hashFiles('yarn.lock') }}
+      - run: npm run build:docs
+        name: Build docs
+      - run: node .github/upload-preview.js packages/module/public
+        name: Upload docs
+        if: always()
+      - run: npx puppeteer browsers install chrome
+        name: Install Chrome for Puppeteer
+      - run: npm run serve:docs & npm run test:a11y
+        name: a11y tests
+      - run: node .github/upload-preview.js packages/module/coverage
+        name: Upload a11y report
+        if: always()

packages/module/patternfly-docs/content/examples/basic.md

@@ -25,7 +25,7 @@ The WidgetLayout component provides a complete drag-and-drop dashboard experienc
 
 ### Interactive example
 
-```js file="./BasicExample.tsx"
+```js file="./BasicExample.tsx" isFullscreen
 
 ```
 

packages/module/src/WidgetLayout/styles.ts

@@ -31,15 +31,15 @@ export const gridLayoutStyles = `
 
   .react-grid-item.react-grid-placeholder {
     background-color: var(--pf-t--color--gray--60);
-    border-radius: 12px;
+    border-radius: var(--pf-t--global--border--radius--medium);
   }
 
   .react-grid-item .react-resizable-handle::after {
     display: none;
   }
 
   .react-grid-item .react-resizable-handle img {
-    padding: 3px;
+    padding: var(--pf-t--global--spacer--xs);
   }
 
   #widget-layout-container {
@@ -78,21 +78,21 @@ export const gridLayoutStyles = `
   }
 
   .grid-tile .widg-c-icon--header .service-icon {
-    height: 28px;
-    width: 28px;
+    height: var(--pf-t--global--icon--size--lg);
+    width: var(--pf-t--global--icon--size--lg);
   }
 
   .grid-tile .widg-c-icon--header .pf-v6-svg {
     color: var(--pf-t--color--blue--50);
-    height: 22px;
-    width: 22px;
+    height: var(--pf-t--global--icon--size--md);
+    width: var(--pf-t--global--icon--size--md);
     margin-bottom: var(--pf-t--global--spacer--sm);
   }
 
   .grid-tile .widg-card-header-text {
     gap: 0;
     line-height: 0;
-    padding-top: 2px;
+    padding-top: var(--pf-t--global--spacer--xs);
   }
 
   .grid-tile .pf-v6-c-card__header .pf-v6-c-menu-toggle {
@@ -117,7 +117,7 @@ export const gridLayoutStyles = `
   }
 
   .widg-l-gallery {
-    --pf-v6-l-gallery--m-gutter--GridGap: 8px;
+    --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
   }
 `;