fix(stepper): prevent item focus indicator clipping #1145
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Package Report | |
| on: | |
| pull_request: | |
| branches: | |
| - develop | |
| env: | |
| COMMENT_TITLE: "## Packages Report" | |
| UPDATING_MESSAGE: "Generating... ⚠️" | |
| jobs: | |
| post-status-comment: | |
| if: github.actor != 'dependabot[bot]' | |
| name: Post Status Comment | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Post status PR comment | |
| uses: actions/github-script@v6 | |
| with: | |
| script: | | |
| const { data: comments } = await github.rest.issues.listComments({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.payload.pull_request.number, | |
| }); | |
| const botComment = comments.find(comment => | |
| comment.user.login === 'github-actions[bot]' && | |
| comment.body.startsWith(process.env.COMMENT_TITLE) | |
| ); | |
| if (botComment) { | |
| await github.rest.issues.updateComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| comment_id: botComment.id, | |
| body: `${process.env.COMMENT_TITLE}\n\n${process.env.UPDATING_MESSAGE}`, | |
| }); | |
| } else { | |
| await github.rest.issues.createComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.payload.pull_request.number, | |
| body: `${process.env.COMMENT_TITLE}\n\n${process.env.UPDATING_MESSAGE}`, | |
| }); | |
| } | |
| extract-pr-data: | |
| name: Extract PR Data | |
| runs-on: ubuntu-latest | |
| needs: post-status-comment | |
| strategy: | |
| matrix: | |
| package: [core, default, classic, bootstrap, material, fluent, utils, html] | |
| steps: | |
| - name: Checkout branch | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - name: Setup node | |
| id: setup-node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 22.x | |
| - name: Use cache for root node_modules | |
| id: cache-root-node_modules | |
| uses: actions/cache@v4 | |
| with: | |
| path: node_modules | |
| key: root-node_modules-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('package-lock.json') }} | |
| - name: Install | |
| if: steps.cache-root-node_modules.outputs.cache-hit != 'true' | |
| run: | | |
| npm ci --no-audit --no-fund | |
| - name: Measure time and size | |
| run: | | |
| total_time=0 | |
| for i in {1..3}; do | |
| SECONDS=0 | |
| if [ "${{ matrix.package }}" = "html" ]; then | |
| npm run build --prefix packages/${{ matrix.package }} | |
| else | |
| npm run sass:compile:all --prefix packages/${{ matrix.package }} | |
| fi | |
| total_time=$((total_time + SECONDS)) | |
| done | |
| build_time=$(awk "BEGIN {printf \"%.0f\", $total_time / 3}") | |
| if [ "${{ matrix.package }}" = "html" ]; then | |
| size=$(du -sb packages/${{ matrix.package }}/dist | awk '{printf "%.2f", $1/(1024*1024)}') | |
| tar -czf packages/${{ matrix.package }}/dist.tar.gz -C packages/${{ matrix.package }} dist | |
| gzip_size=$(du -b packages/${{ matrix.package }}/dist.tar.gz | awk '{printf "%.2f", $1/(1024*1024)}') | |
| rm packages/${{ matrix.package }}/dist.tar.gz | |
| else | |
| size=$(du -b packages/${{ matrix.package }}/dist/all.css | awk '{printf "%.2f", $1/1024}') | |
| gzip_size=$(gzip -c packages/${{ matrix.package }}/dist/all.css | wc -c | awk '{printf "%.2f", $1/1024}') | |
| fi | |
| echo "${{ matrix.package }}:$size:$gzip_size:$build_time" >> data.txt | |
| - name: Upload PR data | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: pr-data-${{ matrix.package }} | |
| path: data.txt | |
| extract-develop-data: | |
| name: Extract Develop Data | |
| runs-on: ubuntu-latest | |
| needs: post-status-comment | |
| strategy: | |
| matrix: | |
| package: [core, default, classic, bootstrap, material, fluent, utils, html] | |
| steps: | |
| - name: Checkout branch | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - name: Setup node | |
| id: setup-node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 22.x | |
| - name: Use cache for root node_modules | |
| id: cache-root-node_modules | |
| uses: actions/cache@v4 | |
| with: | |
| path: node_modules | |
| key: root-node_modules-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('package-lock.json') }} | |
| - name: Install | |
| if: steps.cache-root-node_modules.outputs.cache-hit != 'true' | |
| run: | | |
| npm ci --no-audit --no-fund | |
| - name: Measure time and size | |
| run: | | |
| git fetch origin develop | |
| git checkout origin/develop | |
| total_time=0 | |
| for i in {1..3}; do | |
| SECONDS=0 | |
| if [ "${{ matrix.package }}" = "html" ]; then | |
| npm run build --prefix packages/${{ matrix.package }} | |
| else | |
| npm run sass:compile:all --prefix packages/${{ matrix.package }} | |
| fi | |
| total_time=$((total_time + SECONDS)) | |
| done | |
| build_time=$(awk "BEGIN {printf \"%.0f\", $total_time / 3}") | |
| if [ "${{ matrix.package }}" = "html" ]; then | |
| size=$(du -sb packages/${{ matrix.package }}/dist | awk '{printf "%.2f", $1/(1024*1024)}') | |
| tar -czf packages/${{ matrix.package }}/dist.tar.gz -C packages/${{ matrix.package }} dist | |
| gzip_size=$(du -b packages/${{ matrix.package }}/dist.tar.gz | awk '{printf "%.2f", $1/(1024*1024)}') | |
| rm packages/${{ matrix.package }}/dist.tar.gz | |
| else | |
| size=$(du -b packages/${{ matrix.package }}/dist/all.css | awk '{printf "%.2f", $1/1024}') | |
| gzip_size=$(gzip -c packages/${{ matrix.package }}/dist/all.css | wc -c | awk '{printf "%.2f", $1/1024}') | |
| fi | |
| echo "${{ matrix.package }}:$size:$gzip_size:$build_time" >> data.txt | |
| - name: Upload Develop data | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: develop-data-${{ matrix.package }} | |
| path: data.txt | |
| generate-report: | |
| name: Generate Report | |
| runs-on: ubuntu-latest | |
| needs: | |
| - extract-pr-data | |
| - extract-develop-data | |
| steps: | |
| - name: Download Artifacts | |
| uses: actions/download-artifact@v4 | |
| - name: Generate Comparison Table | |
| run: | | |
| echo "| | core | default | classic | bootstrap | material | fluent | utils | html |" >> size-comparison.md | |
| echo "|----------------|---------------|--------------------|-----------------------|----------------------|---------------------|-----------------|-------------------|-------------------|" >> size-comparison.md | |
| size_row="| **Size** " | |
| gzip_row="| **Gzip Size** " | |
| time_row="| **Compile Time** " | |
| for package in core default classic bootstrap material fluent utils html; do | |
| pr_file="pr-data-$package/data.txt" | |
| develop_file="develop-data-$package/data.txt" | |
| if [[ ! -f "$pr_file" || ! -f "$develop_file" ]]; then | |
| size_row+="| N/A " | |
| gzip_row+="| N/A " | |
| time_row+="| N/A " | |
| continue | |
| fi | |
| pr_data=$(cat "$pr_file") | |
| develop_data=$(cat "$develop_file") | |
| pr_size=$(echo "$pr_data" | cut -d':' -f2) | |
| pr_gzip_size=$(echo "$pr_data" | cut -d':' -f3) | |
| pr_time=$(echo "$pr_data" | cut -d':' -f4) | |
| develop_size=$(echo "$develop_data" | cut -d':' -f2) | |
| develop_gzip_size=$(echo "$develop_data" | cut -d':' -f3) | |
| develop_time=$(echo "$develop_data" | cut -d':' -f4) | |
| size_diff=$(awk "BEGIN {print $pr_size - $develop_size}") | |
| size_diff_percent=$(awk "BEGIN {if ($develop_size > 0) print sprintf(\"%.1f\", (($pr_size - $develop_size) / $develop_size) * 100); else print 0}") | |
| gzip_diff=$(awk "BEGIN {print $pr_gzip_size - $develop_gzip_size}") | |
| gzip_diff_percent=$(awk "BEGIN {if ($develop_gzip_size > 0) print sprintf(\"%.1f\", (($pr_gzip_size - $develop_gzip_size) / $develop_gzip_size) * 100); else print 0}") | |
| time_diff=$(awk "BEGIN {print $pr_time - $develop_time}") | |
| time_diff_abs=$(awk "BEGIN {print ($pr_time > $develop_time ? $pr_time - $develop_time : $develop_time - $pr_time)}") | |
| # Adds 2 seconds tolerance for time difference | |
| if [ "$time_diff_abs" -le 2 ]; then | |
| time_diff=0 | |
| fi | |
| time_diff_percent=$(awk "BEGIN {if ($develop_time > 0) print sprintf(\"%.1f\", ($time_diff / $develop_time) * 100); else print 0}") | |
| size_arrow=$(awk "BEGIN {if ($size_diff > 0) print \"🔼\"; else if ($size_diff < 0) print \"🔽\"; else print \"\"}") | |
| gzip_arrow=$(awk "BEGIN {if ($gzip_diff > 0) print \"🔼\"; else if ($gzip_diff < 0) print \"🔽\"; else print \"\"}") | |
| time_arrow=$(awk "BEGIN {if ($time_diff > 0) print \"🔼\"; else if ($time_diff < 0) print \"🔽\"; else print \"\"}") | |
| if [ "$package" = "html" ]; then | |
| size_row+="| $pr_size MB (${size_diff_percent}%$size_arrow)" | |
| gzip_row+="| $pr_gzip_size MB (${gzip_diff_percent}%$gzip_arrow)" | |
| else | |
| size_row+="| $pr_size KB (${size_diff_percent}%$size_arrow)" | |
| gzip_row+="| $pr_gzip_size KB (${gzip_diff_percent}%$gzip_arrow)" | |
| fi | |
| time_row+="| $(awk "BEGIN {printf \"%.0f\", $pr_time}") s (${time_diff_percent}%$time_arrow)" | |
| done | |
| echo "$size_row|" >> size-comparison.md | |
| echo "$gzip_row|" >> size-comparison.md | |
| echo "$time_row|" >> size-comparison.md | |
| - name: Update PR comment | |
| uses: actions/github-script@v6 | |
| with: | |
| script: | | |
| const fs = require('fs'); | |
| const table = fs.readFileSync('size-comparison.md', 'utf8'); | |
| const { data: comments } = await github.rest.issues.listComments({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.payload.pull_request.number, | |
| }); | |
| const botComment = comments.find(comment => | |
| comment.user.login === 'github-actions[bot]' && | |
| comment.body.startsWith(process.env.COMMENT_TITLE) | |
| ); | |
| await github.rest.issues.updateComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| comment_id: botComment.id, | |
| body: `${process.env.COMMENT_TITLE}\n\n${table}`, | |
| }); |