feat: improving PR experience with comments

.github/workflows/pull-request.yml

@@ -22,51 +22,12 @@ jobs:
         with:
           node-version: 18.x.x
           cache: "npm"
-      - name: Install dependencies
-        run: npm ci
-      - name: Store Playwright's Version
-        id: store-playwright-version
-        run: |
-          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
-          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
-          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
-      - name: Cache Playwright Browsers for Playwright's Version
-        id: cache-playwright-browsers
-        uses: actions/cache@v3
-        env:
-          PLAYWRIGHT_VERSION: ${{ steps.store-playwright-version.outputs.PLAYWRIGHT_VERSION }}
-        if: env.PLAYWRIGHT_VERSION == 'true'
+      - name: Code Quality
+        uses: ZebraDevs/web-components-code-quality@action-setup
         with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
-      - name: Install playwright browsers
-        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps
-      - name: Run custom elements manifest analyzer
-        run: npm run analyze
-      - name: Run eslint
-        run: npm run lint
-      - name: Run prettier
-        run: npm run prettier
-      - name: Run lit-analyzer
-        run: npm run lint:lit-analyzer
-      - name: Run tests
-        run: npm run test -- --debug
-      - name: Test tsdoc
-        run: npm run docs
-      - name: Check for modified files
-        id: git-check
-        run: echo "modified=$(if [ -n "$(git status --porcelain)" ]; then echo "true"; else echo "false"; fi)" >> $GITHUB_ENV
-      - name: Update changes in GitHub repository
-        env:
-          MODIFIED: ${{ steps.git-check.outputs.modified }}
-        if: env.MODIFIED == 'true'
-        run: |
-          git config --global user.name "github-actions"
-          git config --global user.email "[email protected]"
-          git add -A
-          git commit -m '[automated commit] lint format and import sort'
-          git push
+          token: ${{ secrets.GITHUB_TOKEN }}
+          test-results-path: "src/test/test-results.xml"
+
   generate-localizations:
     name: Generate localizations.
     needs: [code-quality]

package.json

@@ -111,13 +111,15 @@
     "storybook": "^8.4.4",
     "ts-lit-plugin": "^2.0.2",
     "ts-morph": "^24.0.0",
+    "typedoc": "^0.27.4",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0",
     "vite": "^6.0.2"
   },
   "dependencies": {
     "@fontsource/ibm-plex-sans": "^5.0.21",
     "@lit/localize": "^0.12.2",
+    "@web/test-runner-junit-reporter": "^0.7.2",
     "@zebra-fed/zeta-icons": "^0.9.0",
     "lit": "^3.2.1"
   },

src/components/dialog/dialog.styles.js

@@ -114,4 +114,4 @@ export default css`
   zeta-icon {
     --icon-size: 32px;
   }
-`;
+`;

src/components/dialog/dialog.ts

@@ -136,4 +136,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "zeta-dialog": ZetaDialog;
   }
-}
+}

src/components/fab/fab.ts

@@ -55,18 +55,28 @@ export class ZetaFab extends Flavored(BaseButton) {
 
   @property({ type: String, reflect: true }) size: "small" | "large" = "small";
 
-  private getLabel() {
-    return this.label ? html`<div class="label">${this.label}</div>` : nothing;
-  }
+  // TESTING
   protected render() {
     return html`
       <button ?disabled=${this.disabled} value=${ifDefined(this.value)} name=${ifDefined(this.name)} type=${ifDefined(this.type)}>
         <zeta-icon .rounded=${this.rounded}><slot></slot></zeta-icon>
-        ${this.extended ? this.getLabel() : nothing}
       </button>
-      ${this.extended ? nothing : this.getLabel()}
     `;
   }
+  // TESTING END
+
+  // private getLabel() {
+  //   return this.label ? html`<div class="label">${this.label}</div>` : nothing;
+  // }
+  // protected render() {
+  //   return html`
+  //     <button ?disabled=${this.disabled} value=${ifDefined(this.value)} name=${ifDefined(this.name)} type=${ifDefined(this.type)}>
+  //       <zeta-icon .rounded=${this.rounded}><slot></slot></zeta-icon>
+  //       ${this.extended ? this.getLabel() : nothing}
+  //     </button>
+  //     ${this.extended ? nothing : this.getLabel()}
+  //   `;
+  // }
 }
 
 declare global {

src/components/navigation-rail/navigation-rail-item.styles.js

@@ -5,7 +5,7 @@ export default css`
     display: flex;
     max-width: 64px;
   }
-  slot{
+  slot {
     font: var(--label-small);
   }
 
@@ -14,8 +14,6 @@ export default css`
     background-color: var(--surface-selected);
   }
 
-
-
   :host > * {
     display: flex;
     overflow-x: hidden;

src/components/navigation-rail/navigation-rail.styles.js

@@ -11,6 +11,4 @@ export default css`
   ::slotted(:not(zeta-navigation-rail-item)) {
     display: none;
   }
-
-
 `;

src/index.ts

@@ -140,4 +140,4 @@ export {
   ZetaTopAppbar,
   ZetaUploadItem,
   ZetaWorkcloudIndicator
-};
+};