Merge branch 'master' into play/1603_add_text_color_hover_prop

.github/workflows/github-actions-check-labels.yml

@@ -0,0 +1,35 @@
+name: Check Labels
+run-name: ${{ github.actor }} is checking labels 🚀
+on:
+  pull_request:
+    types: [ labeled, unlabeled ]
+jobs:
+  Checking-Labels:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Semver label
+        run: |
+          LABELS=$(jq -r '.pull_request.labels[].name' "$GITHUB_EVENT_PATH")
+          SEMVER_PATTERN="^(major|minor|patch)$"
+
+          SEMVER_LABELS=$(echo "$LABELS" | grep -iE "$SEMVER_PATTERN" || true)
+
+          # Check if SEMVER_LABELS is empty
+          if [ -z "$SEMVER_LABELS" ]; then
+            echo "Error: No Semver label found. Please add exactly one of: major, minor, patch (case-insensitive)"
+            exit 1
+          fi
+
+          SEMVER_LABEL_COUNT=$(echo "$SEMVER_LABELS" | wc -l)
+
+          if [ "$SEMVER_LABEL_COUNT" -eq 0 ]; then
+            echo "Error: No Semver label found. Please add exactly one of: major, minor, patch (case-insensitive)"
+            exit 1
+          elif [ "$SEMVER_LABEL_COUNT" -gt 1 ]; then
+            echo "Error: Multiple Semver labels found. Please ensure only one is present:"
+            echo "$SEMVER_LABELS"
+            exit 1
+          else
+            NORMALIZED_LABEL=$(echo "$SEMVER_LABELS" | tr '[:upper:]' '[:lower:]')
+            echo "Valid Semver label found: $NORMALIZED_LABEL"
+          fi

.github/workflows/github-actions-release-candidate.yml

@@ -30,29 +30,88 @@ jobs:
         with:
           bundler-cache: true
       - name: Python Setup
-        uses: actions/setup-python@v4 
-        with: 
+        uses: actions/setup-python@v4
+        with:
           python-version: '3.9'
       - name: Set Git Config
         run: |
           git config --local user.name "${{ github.actor }}"
           git config --local user.email "${{ github.actor }}@users.noreply.github.com"
-      - name: Grab Current Version and Set New RC Version
-        id: set-version
+      - name: Get Semver Label
+        id: get-label
         run: |
-          current_npm_version=$(node -pe "require('./package.json').version")
+          PR_NUMBER=$(curl -s -H "Authorization: token $GITHUB_TOKEN" \
+            "https://api.github.com/repos/${{ github.repository }}/commits/${{ github.sha }}/pulls" \
+            | jq '.[0].number')
+          echo "PR_NUMBER=$PR_NUMBER" >> $GITHUB_ENV
           
-          if [[ $current_npm_version == *"-rc."* ]]; then
-            new_npm_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+          if [ ! -z "$PR_NUMBER" ] && [ "$PR_NUMBER" != "null" ]; then
+            echo "✅ Successfully found PR number: $PR_NUMBER"
           else
-            new_npm_version=$(yarn version --preminor --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+            echo "❌ Unable to find PR number"
           fi
-          
+
+          echo "Fetching labels for PR #$PR_NUMBER..."
+          LABELS=$(gh pr view $PR_NUMBER --json labels -q '.labels[].name' || echo "Failed to fetch labels")
+          echo "Found labels: $LABELS"
+
+          if [ -z "$LABELS" ]; then
+            echo "⛔ Error: Failed to fetch PR labels"
+            exit 1
+          fi
+
+          SEMVER_LABEL=$(echo "$LABELS" | grep -iE '^(major|minor|patch)$' || true)
+          echo "Found Semver labels: $SEMVER_LABEL"
+
+          if [ -z "$SEMVER_LABEL" ]; then
+            echo "⛔ Error: No valid Semver label (major, minor, patch) found on PR #$PR_NUMBER."
+            exit 1
+          fi
+
+          LABEL_COUNT=$(echo "$SEMVER_LABEL" | wc -l)
+          echo "Number of Semver labels found: $LABEL_COUNT"
+
+          if [ "$LABEL_COUNT" -ne 1 ]; then
+            echo "⛔ Error: Expected exactly one Semver label, found $LABEL_COUNT on PR #$PR_NUMBER."
+            exit 1
+          fi
+
+          echo "SEMVER_LABEL=$SEMVER_LABEL" >> $GITHUB_ENV
+          echo "✅ Successfully found Semver label: $SEMVER_LABEL"
+
+          echo "SEMVER_LABEL=$SEMVER_LABEL" >> $GITHUB_ENV
+          echo "Semver label found: $SEMVER_LABEL"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Grab Current Version and Set New RC Version
+        id: set-version
+        run: |
+          current_npm_version=$(node -pe "require('./package.json').version")
+
+          case ${{ env.SEMVER_LABEL }} in
+            Major)
+              new_npm_version=$(yarn version --premajor --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+              ;;
+            Minor)
+              new_npm_version=$(yarn version --preminor --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+              ;;
+            Patch)
+              new_npm_version=$(yarn version --prepatch --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+              ;;
+            *)
+              echo "Error: Invalid Semver label: ${{ env.SEMVER_LABEL }}"
+              exit 1
+              ;;
+          esac
+
           new_npm_version=${new_npm_version#v}
           new_ruby_version=$(echo $new_npm_version | sed 's/-rc\./.pre.rc./')
-          
+
           echo "new_npm_version=${new_npm_version}" >> $GITHUB_ENV
           echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
+
       - name: Check if version exists and increment if necessary
         run: |
           max_attempts=100
@@ -140,10 +199,10 @@ jobs:
                 issue_number: pullRequestNumber,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                body: `You merged this pr to master branch: 
+                body: `You merged this pr to master branch:
                 - Ruby Gem: [${{env.RUBY_GEM_VERSION}}](${{env.RUBY_GEM_LINK}})
                 - NPM: [${{env.NPM_VERSION}}](${{env.NPM_LINK}})`
               });
             } else {
               console.log('No pull request found for this commit');
-            }
+            }

playbook-website/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ../playbook
   specs:
-    playbook_ui (14.6.2)
+    playbook_ui (14.7.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)

playbook-website/app/javascript/components/MainSidebar/MenuData/GuidelinesNavItems.ts

@@ -63,6 +63,10 @@ export const VisualGuidelinesItems = [
         name: "Hover",
         link: "/visual_guidelines/hover"
     },
+    {
+        name: "Group Hover",
+        link: "/visual_guidelines/group_hover"
+    },
     {
         name: "Text Align",
         link: "/visual_guidelines/text_align"

playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable flowtype/no-types-missing-file-annotation */
+
+import React from 'react'
+
+import {
+  Card,
+  Title,
+} from 'playbook-ui'
+
+import Example from '../Templates/Example'
+
+const GroupHoverDescription = () => (
+  <>
+    You can hover over a kit and its children's hover affects will be applied. Check out <a href="https://playbook.powerapp.cloud/visual_guidelines/hover">{"our hover affects here."}</a>
+  </>
+)
+
+const GroupHover = ({ example }: {example: string}) => (
+  <Example
+      backgroundClass='group-hover-class'
+      description={<GroupHoverDescription />}
+      example={example}
+      title="Group Hover"
+  >
+    <Card 
+      cursor="pointer"
+      groupHover
+    >
+      <Title
+          alignSelf="center"
+          groupHover 
+          hover={{ scale: "lg"}}
+          text="If the card is hovered, I'm hovered too!"
+      />
+      <Title
+          alignSelf="center"
+          paddingY="lg"
+          text="I don't have any hover effect on me"
+      />
+      <Title
+          alignSelf="center"
+          hover={{ scale: "lg"}}
+          text="I need to be hovered over directly"
+      />
+    </Card>
+  </Example>
+)
+
+export default GroupHover

playbook-website/app/javascript/components/VisualGuidelines/index.tsx

@@ -18,6 +18,7 @@ import Cursor from "../VisualGuidelines/Examples/Cursor";
 import FlexBox from "../VisualGuidelines/Examples/FlexBox";
 import Position from "../VisualGuidelines/Examples/Position";
 import Hover from "../VisualGuidelines/Examples/Hover";
+import GroupHover from "../VisualGuidelines/Examples/GroupHover";
 import TextAlign from "../VisualGuidelines/Examples/TextAlign";
 import Overflow from "./Examples/Overflow";
 import Truncate from "./Examples/Truncate";
@@ -82,6 +83,8 @@ const VisualGuidelines = ({
         return <VerticalAlign example={examples.vertical_align_jsx}/>;
       case "hover":
         return <Hover example={examples.hover_jsx}/>;
+      case "group_hover":
+        return <GroupHover example={examples.group_hover_jsx}/>;
       case "text_align":
         return <TextAlign example={examples.text_align_jsx} />
       case "overflow":

playbook-website/app/views/guides/getting_started/dependencies.md

@@ -0,0 +1,67 @@
+---
+title: Dependencies
+icon: code
+description: Some of our kits require additional libraries to run properly.
+---
+
+## Playbook UI Dependencies | React
+
+Playbook UI's React library needs the following packages installed in your project to work properly:
+
+```json
+"react"
+ "react-dom"
+ "react-is"
+ "react-trix"
+```
+
+## Playbook UI Dependencies | Rails
+
+Playbook UI's Rails gem requires React for its components javascript to fully function. Follow the instructions in the [Ruby & React Setup](/guides/getting_started/rails_&_react_setup) guide to add react to your Rails app.
+
+## Unbundled Dependencies
+
+These kits require you to install additional libraries to get full functionality.
+
+To install them add them to your project using `yarn add`, `npm install`, or manually add them to your `package.json` file.
+
+| Kit                 | Kit Link                                                                    | NPM Link(s)                                                                                              | Dependency(s)                               |
+|---------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|---------------------------------------------|
+| **Icon**            | [Icon](https://playbook.powerapp.cloud/kits/icon/react)                     | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Circle**     | [Icon Circle](https://playbook.powerapp.cloud/kits/icon_circle/react)       | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Stat Value** | [Icon Stat Value](https://playbook.powerapp.cloud/kits/icon_stat_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Value**      | [Icon Value](https://playbook.powerapp.cloud/kits/icon_value/react)         | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Map**             | [Map](https://playbook.powerapp.cloud/kits/map/react)                       | [maplibre-gl](https://www.npmjs.com/package/maplibre-gl)                                                 | maplibre-gl                                 |
+| **Rich Text Editor**<br>(TipTap Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | - [@tiptap/core](https://www.npmjs.com/package/@tiptap/core)<br>- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)<br>- [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/starter-kit)<br>- [@tiptap/extension-document](https://www.npmjs.com/package/@tiptap/extension-document)<br>- [@tiptap/extension-highlight](https://www.npmjs.com/package/@tiptap/extension-highlight)<br>- [@tiptap/extension-horizontal-rule](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)<br>- [@tiptap/extension-link](https://www.npmjs.com/package/@tiptap/extension-link)<br>- [@tiptap/extension-paragraph](https://www.npmjs.com/package/@tiptap/extension-paragraph)<br>- [@tiptap/extension-text](https://www.npmjs.com/package/@tiptap/extension-text)<br>- [@tiptap/pm](https://www.npmjs.com/package/@tiptap/pm) | - @tiptap/core<br>- @tiptap/react<br>- @tiptap/starter-kit<br>- @tiptap/extension-document<br>- @tiptap/extension-highlight<br>- @tiptap/extension-horizontal-rule<br>- @tiptap/extension-link<br>- @tiptap/extension-paragraph<br>- @tiptap/extension-text<br>- @tiptap/pm |
+
+## Bundled Dependencies
+
+These kits use dependencies that are bundled with them; no additional installation is required.
+
+| Kit                    | Kit Link                                                                    | NPM Link(s)                                                                                       | Dependency(s)                           |
+|------------------------|-----------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------|
+| **Advanced Table**     | [Advanced Table](https://playbook.powerapp.cloud/kits/advanced_table/react) | [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table)                      | @tanstack/react-table                   |
+| **Bar Graph**          | [Bar Graph](https://playbook.powerapp.cloud/kits/bar_graph/react)           | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Circle Chart**       | [Circle Chart](https://playbook.powerapp.cloud/kits/circle_chart/react)     | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Date Picker**        | [Date Picker](https://playbook.powerapp.cloud/kits/date_picker/react)       | [flatpickr](https://www.npmjs.com/package/flatpickr)                                              | flatpickr                               |
+| **Dialog**             | [Dialog](https://playbook.powerapp.cloud/kits/dialog/react)                 | [react-modal](https://www.npmjs.com/package/react-modal)                                          | react-modal                             |
+| **File Upload**        | [File Upload](https://playbook.powerapp.cloud/kits/file_upload/react)       | [react-dropzone](https://www.npmjs.com/package/react-dropzone)                                    | react-dropzone                          |
+| **Filter**             | [Filter](https://playbook.powerapp.cloud/kits/filter/react)                 | [react-popper](https://www.npmjs.com/package/react-popper)                                        | react-popper                            |
+| **Gauge**              | [Gauge](https://playbook.powerapp.cloud/kits/gauge/react)                   | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Highlight**          | [Highlight](https://playbook.powerapp.cloud/kits/highlight/react)           | [react-highlight-words](https://www.npmjs.com/package/react-highlight-words)                      | react-highlight-words                   |
+| **LightBox**           | [LightBox](https://playbook.powerapp.cloud/kits/lightbox/react)             | [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch)                        | react-zoom-pan-pinch                    |
+| **Line Graph**         | [Line Graph](https://playbook.powerapp.cloud/kits/line_graph/react)         | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Multi Level Select** | [Multi Level Select](https://playbook.powerapp.cloud/kits/multi_level_select/react) | [lodash](https://www.npmjs.com/package/lodash)                                                    | lodash                                  |
+| **Passphrase**         | [Passphrase](https://playbook.powerapp.cloud/kits/passphrase/react)         | [react-popper](https://www.npmjs.com/package/react-popper)                                        | react-popper                            |
+| **Phone Number Input** | [Phone Number Input](https://playbook.powerapp.cloud/kits/phone_number_input/react) | [intl-tel-input](https://www.npmjs.com/package/intl-tel-input)                                    | intl-tel-input                          |
+| **Popover**            | [Popover](https://playbook.powerapp.cloud/kits/popover/react)               | [lodash](https://www.npmjs.com/package/lodash),<br>[react-popper](https://www.npmjs.com/package/react-popper) | lodash,<br>react-popper                 |
+| **Rich Text Editor**<br>(Trix Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | [trix](https://www.npmjs.com/package/trix),<br>[react-trix](https://www.npmjs.com/package/react-trix) | trix,<br>react-trix                     |
+| **Tooltip**            | [Tooltip](https://playbook.powerapp.cloud/kits/tooltip/react)               | [@floating-ui/react](https://www.npmjs.com/package/@floating-ui/react)                            | @floating-ui/react                      |
+| **Treemap Chart**      | [Treemap Chart](https://playbook.powerapp.cloud/kits/treemap_chart/react)   | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Typeahead**          | [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react)           | [react-select](https://www.npmjs.com/package/react-select),<br>[lodash](https://www.npmjs.com/package/lodash) | react-select,<br>lodash                 |
+| **Walkthrough**        | [Walkthrough](https://playbook.powerapp.cloud/kits/walkthrough/react)       | [react-joyride](https://www.npmjs.com/package/react-joyride)                                      | react-joyride                           |
+
+## Notes
+**Rich Text Editor**: This kit supports two different editors:
+**TipTap Editor**: Requires manual installation of `tiptap` and various `@tiptap/*` extensions (listed above under Unbundled Dependencies).
+**Trix Editor**: Dependencies (`trix` and `react-trix`) are bundled with the kit; no extra installation is needed.