Open
Conversation
Co-authored-by: Tomasz Janiczek <tomasz.janiczek@callstak.com>
Co-authored-by: Tomasz Janiczek <tomasz.janiczek@callstak.com>
Co-authored-by: Sangamesh Somawar <sangamesh1439@gmail.com>
…allstack#3858) Co-authored-by: Gabriel Jean <gab@inkrebit.com>
Co-authored-by: Evan Cheung <evancheung@funktroniclabs.com>
Co-authored-by: Tomasz Janiczek <tomasz.janiczek@callstak.com>
Co-authored-by: Ben Steel <ben@think-now.com> Co-authored-by: Luke Walczak <lukasz.walczak.pwr@gmail.com>
* chore: Update RN to 0.82 and Example App Expo version to 54 (WIP) * chore: Fixed BackHandler and some unit tests * chore: Missing unit tests update * chore: updated worklets * chore: removed patch-package * chore: package.json re-arrangement and small typescript issues fixed * fix: applied menu fix for 0.81 * fix: Added missing yarn.lock changes * fix: Docs * fix: Docs build fix * fix: Adjusted node version and removed latest changes
|
Caution Review failedFailed to post review comments 📝 WalkthroughWalkthroughThis pull request performs a comprehensive modernization of the React Native Paper project, migrating from a custom documentation system to Docusaurus 2, updating CI/CD infrastructure to use EAS-based publishing, upgrading Node.js versions, and replacing Flow type checking with ESLint-based validation. The scope spans build configuration, documentation generation, GitHub workflows, and code quality tooling. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 95
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
.circleci/deploy-docs.sh (3)
22-23: 🧹 Nitpick | 🔵 TrivialSSH_REPO substitution assumes HTTPS origin URL format.
If the remote origin is already configured as an SSH URL (
git@github.com:...), the substitution on line 23 will not match andSSH_REPOwill equalREPO, which is correct. However, if the URL uses a different HTTPS format (e.g.,https://github.com/org/repo.gitvs without.git), ensure consistency.Consider adding a guard or normalizing the URL:
Optional: Add validation
REPO=`git config remote.origin.url` SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:} +# Ensure SSH_REPO uses SSH format +if [[ ! "$SSH_REPO" =~ ^git@github\.com: ]]; then + echo "Warning: Could not convert REPO to SSH format: $REPO" +fi SHA=`git rev-parse --verify HEAD`
69-72: 🧹 Nitpick | 🔵 TrivialUnnecessary
yarnafter returning to source branch.The final
yarnon line 72 reinstalls dependencies after checking out the source branch, but the deployment is already complete at this point. This adds unnecessary time to the CI job without providing value for the deployment workflow.Proposed fix: Remove trailing yarn install
# Change back to original branch cd .. git checkout $SOURCE_BRANCH -yarn
50-52:⚠️ Potential issue | 🔴 CriticalSet
COMMIT_AUTHOR_NAMEandCOMMIT_AUTHOR_EMAILenvironment variables in CircleCI.The script uses
set -euxo pipefail(line 5), which causes it to fail immediately when$COMMIT_AUTHOR_NAMEand$COMMIT_AUTHOR_EMAIL(lines 51-52) are undefined. These variables are not configured in.circleci/config.ymland must be provided externally (e.g., as CircleCI context variables or repository settings) or the deployment will fail..github/ISSUE_TEMPLATE/config.yml (1)
15-17:⚠️ Potential issue | 🟡 MinorFix the Discord description grammar/casing.
User-facing copy should read cleanly.✏️ Proposed fix
- about: Join to our official discord channel. + about: Join our official Discord channel.docs/docs/guides/08-theming-with-react-navigation.md (1)
246-250:⚠️ Potential issue | 🟡 MinorMinor wording fix: “documentation” (singular).
Line 247 uses “documentations,” which reads awkwardly.
✏️ Suggested edit
- You can learn all about it their documentations: + You can learn all about it in their documentation:
🤖 Fix all issues with AI agents
In @.circleci/comment-artifacts.sh:
- Line 4: The current assignment of LINK in comment-artifacts.sh hardcodes the
artifacts URL using environment vars CIRCLE_WORKFLOW_JOB_ID and
CIRCLE_NODE_INDEX; change this to query the CircleCI API after store_artifacts
instead of relying on the storage domain pattern—replace the static LINK
construct with a short function or block that calls the CircleCI REST endpoint
to list artifacts for the workflow/job and extracts the artifact URL(s), using
CIRCLE_WORKFLOW_JOB_ID and CIRCLE_NODE_INDEX only as API query parameters and
falling back to the hardcoded pattern if the API call fails.
In @.circleci/deploy-docs.sh:
- Around line 33-36: The rm commands use the recursive glob pattern 'dist/**/*'
which requires bash globstar enabled; update .circleci/deploy-docs.sh to either
enable globstar (e.g., run shopt -s globstar at the top of the script before the
rm -rf dist/**/* invocation) or replace the glob usage with a portable recursive
removal approach (use a find-based removal or plain rm -rf dist to clear nested
files) so that the 'rm -rf dist/**/*' and related lines reliably remove nested
files; ensure the chosen fix affects the existing rm -f
dist/*.{html,css,js,json,map,xml} and rmdir dist/* lines consistently.
In @.eslintrc:
- Line 17: The "no-undef" rule is currently disabled which removes
undefined-variable checks; either re-enable it (set "no-undef" back to "error"
or "warn") or restrict the disablement via an overrides block so TypeScript
files (where tsc handles undefineds) keep it off but plain JS files still run
the rule; locate the "no-undef" entry in .eslintrc and update the config
accordingly or add an overrides entry targeting "*.ts" /
"@typescript-eslint/parser" so undefined variable checks remain active for
non-TS code.
In @.github/ISSUE_TEMPLATE/bug_report.md:
- Around line 27-35: The Markdown table under the environment section has
inconsistent column widths and trailing spaces in the left-column software
names; fix it by normalizing each cell to have no trailing spaces, aligning the
pipes consistently, and using a uniform separator row (e.g. the header row "|
software | version |" followed by a single consistent dashed separator like "|
--- | --- |"). Update the rows for "ios", "android", "react-native",
"react-native-paper", "node", "npm or yarn", and "expo sdk" to remove extra
spaces and ensure each row follows the same "| value | value |" pattern so the
table renders consistently across Markdown parsers.
In @.github/pull_request_template.md:
- Line 16: Convert the single-line reminder "Keep in mind that PR changes must
pass lint, typescript and tests." into a Markdown checklist so contributors can
mark items as done; replace that line with three checklist items like "- [ ]
Lint passed", "- [ ] TypeScript checks passed", and "- [ ] Tests passed" (or a
single combined "- [ ] Lint, TypeScript and tests all pass") in the PR template
to make it actionable and scannable.
- Around line 8-10: Update the "### Related issue" section in the PR template to
include explicit examples of GitHub auto-closing issue syntax (e.g., "Fixes
`#123`", "Closes owner/repo#123") so contributors know how to link issues; modify
the existing details block (the collapsible "🔗 Optional enhancement") under the
"### Related issue" header to contain these example phrases and a short note
about their behavior (auto-close vs. reference) to make the guidance
discoverable.
In @.github/workflows/check-repro.yml:
- Line 10: The job condition uses github.event.label.name which is only present
for labeling events, so the job never runs for the configured triggers
(issues.opened, issues.edited, issue_comment); update the if condition to
inspect the issue's labels (github.event.issue.labels) and check whether any
label's name equals "bug" (e.g., use a contains-style check over
github.event.issue.labels[*].name or join+contains) so the job executes when the
opened/edited issue has the bug label.
- Around line 21-24: The current RegExp construction in the regex variable
requires whitespace after a GitHub repo path and forces extra chars after snack
URLs, so update the pattern built in the RegExp(...) call to allow end-of-string
(or word boundary) after each URL and make trailing slash/characters optional
for GitHub repos while keeping Snack matching flexible; specifically edit the
string passed to the RegExp constructor (the regex variable) so the GitHub
branch uses an optional trailing slash or end-of-string (e.g. allow
(?:\/)?(?:\s|$) or a word boundary) instead of `[\\s\\n]+`, and make the snack
branch accept non-whitespace to end-of-string (e.g. use `\\S+` or allow
end-of-string) so URLs at the end of the body are matched.
In @.github/workflows/publish-each-pr.yml:
- Around line 84-88: The call to github.rest.issues.createComment is not awaited
so the workflow may finish before the comment is posted; update the step where
github.rest.issues.createComment({ issue_number: context.issue.number, owner:
context.repo.owner, repo: context.repo.repo, body }) is invoked to await the
promise (i.e., use await github.rest.issues.createComment(...)) and ensure the
surrounding function is async or returns the promise so the runner waits for
completion.
- Line 62: The current JSON.parse('${{ steps.expo.outputs.EXPO_CONFIG }}') is
fragile; instead read the EXPO_CONFIG value from an environment variable or a
file and parse that (e.g. set env EXPO_CONFIG: ${{
steps.expo.outputs.EXPO_CONFIG }} in the workflow and replace the template
literal with JSON.parse(process.env.EXPO_CONFIG) or read and parse a temp file),
ensuring you still assign the result to the same config variable; update the
workflow step that produces steps.expo.outputs.EXPO_CONFIG so it is exported
into the job's environment or written to disk before parsing.
In @.github/workflows/semantic-pr.yml:
- Around line 1-13: Update the GitHub Action usage of
amannn/action-semantic-pull-request@v4.5.0 to the latest release tag
amannn/action-semantic-pull-request@v6.1.1 and add explicit repository
permissions by adding a permissions block with pull-requests: read; also
consider restricting the workflow triggers (e.g., refine the on: value) for more
granular control. Locate the step that uses amannn/action-semantic-pull-request
in the job (the steps entry with uses:
amannn/action-semantic-pull-request@v4.5.0) and change the version to `@v6.1.1`
and add a top-level permissions mapping (permissions: pull-requests: read) to
the workflow file.
In @.github/workflows/updates.yml:
- Around line 2-9: The workflow currently triggers on push but the job condition
references github.event.pull_request (which doesn't exist for push), so update
the trigger from on: push to on: pull_request with types: [closed], and change
the job `if` to check that the PR was merged and has the label (e.g.
`github.event.pull_request.merged == true &&
contains(github.event.pull_request.labels.*.name, 'example app')`); modify the
top-level `on:` block and the `publish` job `if` expression (referencing the
`publish` job and the `contains(github.event.pull_request.labels.*.name,
'example app')` expression) accordingly.
In @.github/workflows/versions.yml:
- Line 8: The current job-level condition if: ${{ github.event.label.name ==
'bug' }} is false for opened/edited events; change the condition on that job to
check label membership in the labels arrays and also handle the labeled event,
e.g. replace the single-event check with a boolean that uses contains(...)
against github.event.issue.labels and github.event.pull_request.labels and/or
checks (github.event_name == 'labeled' && github.event.label.name == 'bug') so
the job runs for opened/edited events when the PR/issue already has the bug
label and for the labeled event when the label is added later; also add the
labeled trigger to the workflow's on: section so github.event.label is available
when a label is added.
In @.gitignore:
- Around line 66-71: The .gitignore currently ignores .yarn/* which also
excludes the committed Yarn runtime referenced by .yarnrc.yml (e.g.
.yarn/releases/yarn-4.5.3.cjs); update .gitignore to allowlist the required Yarn
subdirectories by adding negation entries for the release/runtime and other
Yarn-managed folders (for example allowlist .yarn/releases/, .yarn/plugins/,
.yarn/sdks/, .yarn/patches/, .yarn/versions/) so that
.yarn/releases/yarn-4.5.3.cjs and related files are committed while keeping the
rest ignored.
In @.yarnrc.yml:
- Around line 1-3: Remove the vendored yarn binary reference by deleting the
yarnPath entry from .yarnrc.yml and instead pin Yarn via the packageManager
field in package.json (set packageManager to yarn@4.5.3+sha224.<hash>), then
enable Corepack in CI (run corepack enable before yarn install) so Corepack will
fetch the pinned Yarn; update CI scripts accordingly and ensure no reference to
yarnPath remains in the repo.
In `@babel.config.js`:
- Line 2: babel.config.js references the preset
'module:`@react-native/babel-preset`' but that package is not installed and the
project still has the now-unused 'metro-react-native-babel-preset'; update
package.json by adding '@react-native/babel-preset' to dependencies or
devDependencies and remove 'metro-react-native-babel-preset', then run npm/yarn
install (and commit updated lockfile) so the preset referenced by the presets
array in babel.config.js can be resolved at build time.
In `@CONTRIBUTING.md`:
- Line 16: Replace the sentence "Run `yarn bootstrap` on the root level, to
setup the development environment." with corrected grammar and clearer wording:
change "setup" to the verb phrase "set up" and "on the root level" to "at the
repo root", resulting in "Run `yarn bootstrap` at the repo root to set up the
development environment." Ensure the punctuation is adjusted (remove the
unnecessary comma) so the sentence reads smoothly.
In `@docs/.eslintrc`:
- Around line 10-13: The ignore pattern in the import/no-unresolved rule is
wrong: replace the literal string "@^site" with the regex "^@site" inside the
"import/no-unresolved" rule's ignore array so the rule correctly ignores imports
starting with the `@site` scope (update the pattern in the array alongside
"^@docusaurus" and "^@theme").
In `@docs/component-docs-plugin/generatePageMDX.js`:
- Around line 29-37: The "Known Issues" disclosure lacks a summary tag; update
the returned template string (the MDX built where the code returns the
multi-line string containing "## Known Issues" and the <details> block) to
include a <summary> element inside the <details>—for example a concise label
like "<summary>Known Issues</summary>" (optionally with an icon) placed before
the <ul> so screen readers and keyboard users can discover and toggle the
section; ensure the change is made in the template that references the issues
variable so rendering still injects ${issues}.
In `@docs/component-docs-plugin/index.js`:
- Around line 41-44: The current directory creation uses path.join(docsRootDir,
targetPath).split('/').slice(0, -1).join('/') which breaks on Windows; replace
that expression with path.dirname(path.join(docsRootDir, targetPath)) when
calling fs.mkdirSync so fs.mkdirSync(path.dirname(path.join(docsRootDir,
targetPath)), { recursive: true }) uses path.dirname to compute the parent
directory in a cross-platform way (locate the call around fs.mkdirSync,
path.join, docsRootDir and targetPath).
- Around line 14-16: The clean() function calls fs.rmSync(docsRootDir, {
recursive: true, force: true }) without validating docsRootDir; add defensive
checks in clean() to resolve and realpath docsRootDir and the repository root
(e.g., using path.resolve()/fs.realpathSync or process.cwd()), ensure
docsRootDir is non-empty, not "." or ".." or "/", and that its resolved path is
a descendant of the repo root (common prefix check) and not equal to the repo
root before calling fs.rmSync; if validation fails, throw or log an error and
skip deletion.
In `@docs/component-docs-plugin/useDocs.tsx`:
- Around line 35-37: The Prop interface currently types defaultValue as always
present which causes runtime errors when react-docgen returns null/undefined;
update the Prop/interface definition to make defaultValue optional or nullable
(e.g., defaultValue?: { value: string } | null) and then update any access sites
(e.g., where code reads prop.defaultValue.value in useDocs.tsx) to guard the
access with an existence check or optional chaining (prop.defaultValue?.value)
and provide a sensible fallback when undefined.
In `@docs/docs/guides/01-getting-started.md`:
- Around line 21-22: Fix the spelling mistake "Additionaly" to "Additionally" in
the sentence about iOS, and replace the generic "Provider" reference with the
specific component name "PaperProvider" so the guide consistently uses
PaperProvider throughout (check the sentence that currently reads "Provider" and
update it to "PaperProvider").
In `@docs/docs/guides/02-theming.mdx`:
- Around line 538-542: The code example incorrectly destructures the return of
useAppTheme(); instead of const { theme } = useAppTheme() you should assign the
hook return directly (e.g., const theme = useAppTheme()) in the App component
and then use theme.colors.primary in the View style; update the App function
(export default function App) to reflect this change so the example matches the
hook's actual return shape.
- Line 31: The sentence contains a duplicated word "to" ("...prop is passed to
to the `PaperProvider`"); edit the text in the guides/theming content so it
reads "...prop is passed to the `PaperProvider`" (remove the extra "to"),
ensuring the sentence around the `PaperProvider` mention and the inline code
tokens (`theme`, `version`) remain unchanged.
- Line 152: Replace the typo "platfrom" with the correct spelling "platform" in
the theming guide; search for the token "platfrom" in the 02-theming.mdx
document and update that occurrence to "platform" so the text reads correctly.
In `@docs/docs/guides/04-fonts.md`:
- Line 152: Fix the typo in the docs sentence that currently reads "The default
`fontFamily` is different per particular platfrom:" by replacing "platfrom" with
"platform" so it reads "The default `fontFamily` is different per particular
platform:"; locate this text by searching for the phrase "default `fontFamily`"
in the guide and update the single-word misspelling.
- Around line 410-426: The example uses Platform.select() inside fontConfig but
never imports Platform; add an import for Platform from 'react-native' (e.g.,
import { Platform } from 'react-native') and ensure the symbol Platform is
referenced where fontConfig is defined so Platform.select(...) resolves
correctly; update the top-level imports alongside React and the
react-native-paper imports to include this new import.
In `@docs/docs/guides/05-react-native-web.md`:
- Around line 23-24: Replace the non‑breaking space in the install command code
block so the command reads with a normal ASCII space: change the string "npm
install --save-dev react-app-rewired" (the code block content) to "npm install
--save-dev react-app-rewired" to ensure terminals parse the option correctly.
In `@docs/docs/guides/09-bottom-navigation.md`:
- Line 9: The <img> element displaying the animated GIF is missing alt text;
update the tag in docs/guides/09-bottom-navigation.md (the <img
src="/react-native-paper/screenshots/material-bottom-tabs.gif" ... /> element)
to include a concise, descriptive alt attribute that summarizes the animation
for screen readers (for example describing the bottom navigation behavior
shown), ensuring accessibility for users who cannot see the GIF.
In `@docs/docs/guides/09-react-navigation.md`:
- Around line 244-247: Add an accessibilityLabel to the menu anchor
Appbar.Action so screen readers can describe the control; update the
Appbar.Action (the component using icon="dots-vertical" and onPress={openMenu})
to include an accessibilityLabel prop like "Open menu" or "More options" to
clearly identify the button for assistive technologies.
In `@docs/docs/guides/10-migration-guide-to-5.0.md`:
- Around line 13-33: Fix several typos and wording issues in the "Installation"
section and the FAB size bullets: remove the duplicated/odd "API has been
changed" phrasing, correct spelling errors like "oficially"→"officially" and
"Additionaly"→"Additionally", remove the stray "npm2yarn" token inside code
fences so the bash blocks show only the commands, and ensure the safe-area
installation and iOS pod step are worded clearly; also update the FAB size
bullets that currently mislabel "Appbar" to the correct "FAB" label and confirm
the size labels text is consistent across the FAB size list and the rest of the
doc (refer to the "Installation" heading and the "FAB size" bullets).
- Around line 624-625: Finish the truncated sentence to fully describe the new
TextInput.Icon prop: state that the old property name was renamed to icon and
that icon now accepts either a string icon name, a React element, or a function
that receives an object with { color, size } and returns a React node (the
TextInput.Icon will call that function and pass color and size to render the
appropriate icon). Update the sentence around TextInput.Icon to explicitly list
these accepted types and clarify that the function form is invoked with color
and size.
- Around line 270-279: The BottomNavigation example's routes array contains an
unterminated string in the favorites entry (the property unfocusedIcon:
"heart-outline;), which breaks the snippet; fix it by adding the missing closing
quote so the favorites route reads unfocusedIcon: "heart-outline" (locate the
routes array and the favorites object to update unfocusedIcon accordingly).
In `@docs/docs/guides/11-ripple-effect.md`:
- Line 15: Fix the grammar and clarity of the rippleColor description: change
"For the instance, to make the `Button` component's ripple effect transparent,
simply pass the desired color value to the prop" to a concise sentence such as
"For instance, to make the `Button` component's ripple effect transparent, pass
the desired color to the `rippleColor` prop," ensuring you reference the
`rippleColor` prop and the `Button` component (`rippleColor`, `Button`) and
remove the extra article "the" before "instance."
In `@docs/docusaurus.config.js`:
- Around line 199-223: The editUrl function uses
params.docPath.match(/\/?([^/]+)\.mdx$/)[1] without checking for a null match
which can throw; update the editUrl implementation (around the
customUrlComponent logic) to first run the regex match into a variable, check
that it is non-null before accessing [1] (or use optional chaining / a fallback
string), then only consult customUrls[customUrlComponent] when a valid component
name was extracted, otherwise fall back to the existing default return
(`${urlToMain}/src/${params.docPath.replace('mdx','tsx')}`) to ensure null-safe
behavior for params.docPath.
In `@docs/package.json`:
- Around line 31-37: The project pins React 17 ("react": "17.0.2") but your
resolved type packages are at React 18 which causes type mismatches; update the
`@types` packages to match React 17 by setting `@types/react` and `@types/react-dom`
to a 17.x version (e.g. 17.0.x) in your package.json (resolutions or
devDependencies where they are enforced), then reinstall (yarn/npm) and
regenerate the lockfile so Docusaurus 2.3.x and the runtime React version align
with the TypeScript definitions.
In `@docs/public/1.0/app.src.js`:
- Around line 5-12: Replace the hard-coded absolute imports by using
package/module specifiers and correct relative asset paths: change imports
referencing App and Layout from '/Users/.../component-docs/dist/templates/...'
to import App and Layout from 'component-docs/dist/templates/App' and
'component-docs/dist/templates/Layout' (or the package entry points), import
data with './app.data' stays, replace CSS imports from
'/Users/.../component-docs/dist/styles/...' to
'component-docs/dist/styles/reset.css' and
'component-docs/dist/styles/globals.css', and fix the assets stylesheet import
to the correct repo location (e.g., 'docs/src/assets/styles.css' or the
appropriate versioned 'docs/public/.../assets/styles.css') so App, Layout, data
and CSS resolve portably.
In `@docs/public/1.0/bottom-navigation.html`:
- Around line 104-105: Update the documentation text for renderLabel to complete
the sentence: change the description from "Callback which React Element to be
used as tab label" to "Callback which returns a React Element to be used as the
tab label" (ensure the prop name renderLabel is referenced); leave getLabelText
description intact but verify consistency in phrasing with renderLabel.
- Line 44: Fix the typo in the documentation line describing the "index" prop:
change "reprsenting" to "representing" in the list item that reads
'<code>index</code>: a number ... in the <code>routes</code> array' so the
description for the index prop is spelled correctly.
- Line 121: Fix the typo "minmize" in the documentation sentence on
bottom-navigation (the string "minmize re-rendering of the pages") by correcting
it to "minimize", updating the text where that exact phrase appears so the docs
read "Pure components are used to minimize re-rendering of the pages."
In `@docs/public/1.0/caption.html`:
- Around line 2-3: The <img> tag inside the "screenshots" div in caption.html is
missing alt text; update the <img src="screenshots/caption.png" /> element to
include a descriptive alt attribute (e.g., alt="...") that briefly conveys the
screenshot content for accessibility and screen readers.
In `@docs/public/1.0/card.html`:
- Around line 2-4: Add descriptive alt attributes to each screenshot <img>
element (the <img class="medium" src="screenshots/card-1.png" /> and <img
class="medium" src="screenshots/card-2.png" />) so they read something like
alt="Screenshot of card example 1" and alt="Screenshot of card example 2";
ensure the alt text succinctly describes the image content for accessibility
without changing layout or behavior.
In `@docs/public/1.0/chip.html`:
- Around line 2-4: The two screenshot img elements inside the screenshots div
(the tags with src="screenshots/chip-1.png" and src="screenshots/chip-2.png")
are missing alt attributes; add meaningful alt text to each <img> (e.g.,
alt="Chip component: default state" and alt="Chip component: selected state" or
other descriptive text matching the images) so the images are accessible to
screen readers.
In `@docs/public/1.0/contributing.html`:
- Around line 11-46: Fix several typos and capitalization in the contributing
guide text: change "developement" to "development" (near the "yarn bootstrap"
instruction), change "commiting" to "committing" (in the pre-commit hooks
sentence), change "a idea" to "an idea" (in the component example guidance),
capitalize "circle ci" to "CircleCI" (in the chore example), and correct "eg" to
"e.g." (in the test and chore list items) so all user-facing strings are spelled
and punctuated properly.
In `@docs/public/1.0/drawer-item.html`:
- Line 1: The menu toggle checkbox (input id="slide-sidebar",
class="_menuButton__1gt5k1p") and the search input (class="_searchbar__1gt5k1p")
lack accessible names; add an aria-label to the checkbox (e.g.,
aria-label="Toggle navigation") and to the search input (e.g.,
aria-label="Filter navigation"), and where appropriate add aria-controls on the
checkbox pointing to the navigation/menu container (the element with class
"_menu__1gt5k1p") and aria-expanded that toggles with the checkbox state so
screen readers can identify and interact with these controls.
- Around line 6-8: The DrawerItem example shows the attribute split into two
tokens (`label` and `Item"`), so update the docs generator/template that
produces code tokenization so attribute values containing spaces are emitted as
a single string token; specifically ensure the snippet for MyComponent rendering
<DrawerItem label="First Item" /> outputs label="First Item" as one string token
(adjust the HTML/attribute tokenizer or highlight config used by the generator
that processes DrawerItem examples so it treats quoted attribute values with
spaces as a single token).
In `@docs/public/1.0/drawer-section.html`:
- Line 1: The search input (input type="search" with class "_searchbar__1gt5k1p"
and placeholder "Filter…") lacks an accessible label; add one by either adding
an associated <label for="...">Filter</label> and an id on the input or by
adding an aria-label (e.g., aria-label="Filter items") to the input element so
screen readers have a proper label.
- Line 1: The document is missing the HTML5 doctype which can trigger quirks
mode; add the <!doctype html> declaration as the very first line before the
existing <html lang="en" data-reactroot=""> tag in the generated
drawer-section.html so the page renders in standards mode.
In `@docs/public/1.0/fab.html`:
- Around line 2-4: The two <img> elements inside the "screenshots" div are
missing alt attributes; add descriptive alt text to each <img> (e.g.,
alt="Floating action button open state screenshot" for the first and
alt="Floating action button menu screenshot" for the second) so screen readers
can convey the content and improve a11y compliance, updating both <img
src="screenshots/fab-1.png" /> and <img src="screenshots/fab-2.png" />
accordingly.
In `@docs/public/1.0/fabgroup.html`:
- Around line 6-7: The docs import line incorrectly pulls StyleSheet from
'react-native-paper' — update the import so that StyleSheet (if needed) is
imported from 'react-native' or simply remove StyleSheet from the import if it's
unused; locate the import statement that references FABGroup and StyleSheet and
either change StyleSheet's source to 'react-native' or delete StyleSheet from
the import list while keeping FABGroup imported from 'react-native-paper'.
In `@docs/public/1.0/headline.html`:
- Around line 2-4: The screenshot img inside the <div class="screenshots"> lacks
alt text; update the <img> element (the image showing the headline screenshot)
to include an appropriate alt attribute describing the image (e.g.,
alt="Headline example screenshot" or a more specific description relevant to the
content) to improve accessibility for screen readers.
In `@docs/public/1.0/helper-text.html`:
- Line 1: Replace the misspelled word "conjuction" with "conjunction" in the
generated meta tag content values: update the meta name="description" content,
meta name="twitter:description" content, and meta property="og:description"
content in the HelperText HTML (look for the meta tag strings containing "Helper
text is used in conjuction" and change them to "Helper text is used in
conjunction"). Ensure all three occurrences are corrected in
docs/public/1.0/helper-text.html and regenerate the page if necessary.
In `@docs/public/1.0/icons.html`:
- Around line 2-27: Fix several grammar/typos in the icon docs text: change
"need link the library" to "need to link the library", change contractions and
informal phrases like "If don't want" to "If you do not want", fix
possessive/its/it's in the render-function section to "The function receives an
object with size and color properties as its argument", replace "element is used
as is without any modification" with "The returned element is used as-is without
modification", and change "upto" to "up to"; update other nearby sentences
around the icon prop, Button, MaterialIcon and react-native-vector-icons
references to ensure articles and verb forms are correct and consistent.
In `@docs/public/1.0/index.html`:
- Line 1: The primary CTA anchor with classes _button__ap3x3f _primary__ap3x3f
currently has a duplicated ".html" in its href ("getting-started.html.html")
causing a 404; update that anchor's href value to "getting-started.html" (look
for the <a> element with class _button__ap3x3f _primary__ap3x3f or the exact
href string to locate it) so the Get started link points to the correct page.
In `@docs/public/1.0/list-accordion.html`:
- Around line 2-5: The three <img> elements inside the screenshots div are
missing alt attributes; update each <img class="medium" src="..."> (e.g.,
list-accordion-1.png, list-accordion-2.png, list-accordion-3.png) to include
concise, descriptive alt text that describes the content of each screenshot (for
example "List accordion collapsed state", "List accordion expanded with item
details", etc.) so they are accessible to screen readers.
- Around line 9-10: Remove the unused Checkbox import from the module import
list: update the import that currently reads ListAccordion, ListItem, Checkbox
from 'react-native-paper' to import only ListAccordion and ListItem (leave the
ListAccordion and ListItem identifiers intact and remove the Checkbox
identifier).
In `@docs/public/1.0/list-item.html`:
- Around line 2-5: The three <img class="medium"> elements
(screenshots/list-item-1.png, list-item-2.png, list-item-3.png) are missing alt
attributes; update each <img class="medium" src="..."> to include concise,
descriptive alt text that explains the screenshot content (e.g., "Screenshot:
list item default state", "Screenshot: list item hovered", "Screenshot: list
item with actions") so assistive technologies can convey the images' purpose.
In `@docs/public/1.0/list-section.html`:
- Around line 2-4: The img element displaying the screenshot lacks descriptive
alt text; update the <img src="screenshots/list-section.png" /> tag in
list-section.html (the screenshots/list-section.png element) to include an
appropriate alt attribute that describes the image content (e.g., alt="List
section component showing item rows with avatar, title, and action buttons") so
the screenshot is accessible to screen readers and improves SEO.
In `@docs/public/1.0/modal.html`:
- Around line 11-20: The example defines _showModal and never calls it, so add a
trigger in the render() output that calls this._showModal (e.g., a Button or
TouchableOpacity with onPress={this._showModal}) placed before the <Modal>
component so users can open the modal; ensure you use the existing arrow methods
(_showModal and _hideModal) and keep the Modal's visible prop and onDismiss
pointing to visible and this._hideModal respectively.
In `@docs/public/1.0/paper.html`:
- Around line 9-28: The example uses StyleSheet.create() but never imports
StyleSheet; update the top of the usage snippet to import StyleSheet from
react-native so the symbols StyleSheet, styles and MyComponent compile
correctly—add the missing import alongside the existing React and
react-native-paper imports so the Paper/Text example and styles object work as
shown.
In `@docs/public/1.0/paragraph.html`:
- Around line 2-4: The screenshot img element inside the div with
class="screenshots" (img src="screenshots/paragraph.png") is missing alt text;
add a descriptive alt attribute to the <img> (for example alt="Screenshot of
paragraph component showing ...") so screen readers and accessibility tools have
meaningful content, keeping the description concise and relevant to the image.
In `@docs/public/1.0/progress-bar.html`:
- Around line 2-4: The img element <img src="screenshots/progress-bar.png" /> in
the screenshots block is missing accessible alt text; update that <img> tag to
include a meaningful alt attribute (for example a short description like
"progress bar example") so the image has descriptive alternative text for screen
readers and accessibility tooling.
- Around line 6-10: The example uses Colors.red800 in the ProgressBar JSX but
never imports Colors; update the top imports to include Colors from
'react-native-paper' (or remove the Colors usage) so MyComponent's ProgressBar
has a valid color prop; specifically modify the import that currently only
imports ProgressBar to also import Colors so the Colors symbol is defined for
use in MyComponent.
In `@docs/public/1.0/radio-button.html`:
- Around line 2-17: The four <img> tags for screenshots
(src="screenshots/radio-enabled.android.png",
"screenshots/radio-disabled.android.png", "screenshots/radio-enabled.ios.png",
"screenshots/radio-disabled.ios.png") are missing alt attributes; update each
<img> element to include descriptive alt text (e.g., "Android radio button
enabled", "Android radio button disabled", "iOS radio button enabled", "iOS
radio button disabled") so the images are accessible to screen readers and
convey their purpose.
- Around line 35-44: The example has mismatched checked values: the RadioButton
checked prop compares against 'first' and 'second' but the onPress handlers set
checked to 'firstOption' and 'secondOption', so no button becomes selected;
update the onPress setState calls in the RadioButton examples to set checked to
'first' and 'second' (or alternatively change the checked comparisons to
'firstOption'/'secondOption') so the values used by the checked prop and
setState match; locate the RadioButton instances and their onPress handlers
(references: RadioButton, checked prop, onPress, setState) and make the strings
consistent.
In `@docs/public/1.0/searchbar.html`:
- Around line 2-4: The searchbar screenshot img element lacks accessible alt
text; update the <img class="medium" src="screenshots/searchbar.png" /> in
docs/public/1.0/searchbar.html to include a descriptive alt attribute (e.g.,
describing the search bar UI shown) so the image is properly described for
assistive technologies and content readers.
In `@docs/public/1.0/snackbar.html`:
- Around line 6-24: The snippet in MyComponent uses View and Button but doesn't
import them; update the top imports to include View and Button from the
appropriate library (e.g., import { View, Button } from 'react-native' or from
the UI library used), so that the components referenced in MyComponent.render
(View, Button) resolve correctly; ensure the import statement sits alongside
existing imports for React and StyleSheet and that any style symbol like
styles.container remains defined.
In `@docs/public/1.0/subheading.html`:
- Around line 2-4: The <img> tag inside the div with class "screenshots" is
missing alt text (and can benefit from lazy loading); update the <img> element
to include a descriptive alt attribute that summarizes the screenshot content
for screen readers and add loading="lazy" to defer offscreen image loading.
- Line 1: The search input with class "_searchbar__1gt5k1p" lacks an accessible
label; add one by either adding a visible <label> tied to the input (using for +
id) or adding an aria-label/aria-labelledby attribute (e.g., aria-label="Filter
components" or aria-label="Search") to the element with class
"_searchbar__1gt5k1p" so screen readers can announce its purpose; ensure the id
used for the input matches the label's for if you choose the <label> approach.
In `@docs/public/1.0/switch.html`:
- Around line 2-18: Add descriptive alt attributes to each <img> tag to improve
accessibility: for the images named "switch-enabled.android.png",
"switch-disabled.android.png", "switch-enabled.ios.png", and
"switch-disabled.ios.png" add alt text that concisely describes platform and
state (e.g., "Android switch — enabled", "Android switch — disabled", "iOS
switch — enabled", "iOS switch — disabled") so each <img> element conveys the
screenshot meaning to assistive technologies.
In `@docs/public/1.0/text-input.html`:
- Around line 2-6: The <figcaption> element is closed with a stray </span> which
leaves <figcaption> unclosed; update the markup around the <figure> (the
<figcaption> element next to <img src="screenshots/textinput.unfocused.png" />)
to replace the incorrect closing tag with a proper </figcaption> so the
<figcaption> opens and closes correctly and no stray </span> remains.
- Around line 4-9: Update the two <img> elements in
docs/public/1.0/text-input.html (the images with
src="screenshots/textinput.unfocused.png" and
src="screenshots/textinput.focused.png") to include descriptive alt attributes
that match the figcaption text (e.g., alt="Text input, unfocused" and alt="Text
input, focused") so screen readers can convey the image meaning; ensure the alt
strings are concise and convey the same state described by the corresponding
<figcaption>.
- Around line 44-45: Replace the legacy React Native docs URL in the anchor
element that renders the external TextInput props link (the <a> with classes
"_propLabel__vv20rl _rest__vv20rl" and inner <code>... TextInput props</code>)
so its href points directly to the current canonical URL
"https://reactnative.dev/docs/textinput.html#props" instead of
"https://facebook.github.io/react-native/docs/textinput.html#props"; update the
href value accordingly and ensure the link target and display text remain
unchanged.
In `@docs/public/1.0/theming.html`:
- Line 43: Fix the typo "throught" to "throughout" in the theming documentation
by updating the two list items that describe <code>colors</code> and
<code>fonts</code> (the strings "colors used throught different elements" and
"fonts used throught different elements") so both read "used throughout
different elements".
In `@docs/public/1.0/toolbar.html`:
- Around line 3-11: The two screenshot img elements
(src="screenshots/toolbar.android.png" and src="screenshots/toolbar.ios.png")
are missing alt attributes; update both <img class="medium"> elements in
toolbar.html to include meaningful alt text (e.g., "Toolbar on Android" and
"Toolbar on iOS" or similar descriptive text) so screen readers and
accessibility tools have proper descriptions.
In `@docs/public/1.0/touchable-ripple.html`:
- Around line 19-21: Fix the typo and update the stale React Native docs link in
the background prop description: change "drawabale" to "drawable" in the
<code>background</code> prop text and replace the old facebook.github.io URL
with the current React Native docs URL (e.g.
https://reactnative.dev/docs/touchablenativefeedback#background) so the
<code>background</code> prop description is spelled correctly and points to the
up-to-date documentation.
In `@docs/public/2.0/app.src.js`:
- Around line 5-10: Replace the machine-specific absolute imports in
docs/public/2.0/app.src.js with package and correct relative imports: import App
from 'component-docs/dist/templates/App.js'; import
'component-docs/dist/styles/reset.css'; import
'component-docs/dist/styles/globals.css'; keep import data from './app.data';
and change the assets import to the correct relative path import
'./assets/styles.css' (note the single-dot relative path from docs/public/2.0).
In `@docs/public/2.0/appbar-content.html`:
- Around line 1-2: Replace the incorrect article "a appbar" with "an appbar" in
both occurrences: update the meta description content attribute (the meta tag
with name="description") and the visible paragraph inside the MarkdownContent
div (the <p> that currently reads "A component used to display a title and
optional subtitle in a appbar."); ensure both strings are changed to "an appbar"
so the meta description and body text match.
In `@docs/public/2.0/appbar-header.html`:
- Around line 4-10: Add meaningful alt attributes to the two <img> elements (the
ones with class="medium" and src="screenshots/appbar-header.android.png" and
src="screenshots/appbar-header.ios.png") so the screenshots are accessible;
update each <img> to include descriptive alt text summarizing the image content
(e.g., "App bar header on Android showing ...", "App bar header on iOS showing
...") that conveys the purpose of the screenshot.
In `@docs/public/2.0/appbar.html`:
- Around line 4-6: The <img class="medium" src="screenshots/appbar.png" /> tag
is missing alt text; update the <img> element in appbar.html to include an
appropriate alt attribute (for example alt="Screenshot of the app bar showing
navigation and toolbar controls") so the screenshot is accessible to screen
readers and meets accessibility requirements.
- Line 1: The external edit anchor element with class
"EditButtonContainer_emlbhqm" (the <a> tag that opens the GitHub edit link in a
new tab) is missing rel="noopener noreferrer"; update that anchor to include
rel="noopener noreferrer" alongside target="_blank" to prevent
reverse-tabnabbing and secure the external link.
In `@docs/public/2.0/avatar-icon.html`:
- Line 4: The <img> element with class "medium" and src
"screenshots/avatar-icon.png" is missing an alt attribute; update that <img> tag
to include a concise, descriptive alt text (e.g., alt="User avatar icon" or
similar appropriate description) so the image is accessible to screen readers
and conveys its purpose.
In `@docs/public/2.0/avatar-image.html`:
- Around line 2-5: Add a descriptive alt attribute to the Avatar.Image
screenshot tag so the content image is accessible; locate the <img
class="medium" src="screenshots/avatar-image.png" /> element and add an alt
value that succinctly describes the image (for example: "Avatar component
example showing medium-sized circular user image with initials"), ensuring the
alt text describes the content of the screenshot.
In `@docs/public/2.0/avatar-text.html`:
- Line 4: Add a descriptive alt attribute to the <img> element (the tag with
class="medium" and src="screenshots/avatar-text.png") to improve accessibility;
update the <img class="medium" src="screenshots/avatar-text.png" /> element to
include an appropriate alt string describing the screenshot (e.g., "Screenshot
of avatar text example") so screen readers can convey the image content.
In `@docs/public/2.0/badge.html`:
- Line 1: The review flagged empty href attributes on navigation anchors (e.g.,
the <a class="LinkItem_l5q2p2e" href=""> elements for "Avatar", "Drawer",
"List") which cause reloads and accessibility issues; fix by either supplying
the correct target URLs for those parent overview pages or converting those
anchors into non-link elements (e.g., <span> or <button>) and updating
associated markup (the surrounding Row_rl210no/GroupItems_g1ol5l8s structure and
any aria-expanded/aria-controls you use) so the collapsed-group toggle behavior
and accessibility attributes remain correct.
- Line 1: The edit link anchor (class "EditButtonContainer_emlbhqm") contains a
redundant path segment "/2.0//../src/components/Badge.js"; update the
documentation generator/template that builds that href so it normalizes paths
(remove double slashes and resolve ".." segments) before rendering—e.g., use a
path normalization routine (path.posix.normalize or equivalent) or construct the
repo path from a single source variable to produce "/src/components/Badge.js"
and ensure the template uses the normalized value for the href.
- Line 22: The style tag in the badge HTML includes an unnecessary type
attribute; remove the type="text/css" from the <style> tag (replace occurrences
of <style type="text/css"> with just <style>) so the markup uses the HTML5
default and is cleaner—update the instance in the badge.html file where the
style tag is declared.
In `@docs/public/2.0/banner.html`:
- Around line 2-4: The <img> tag for the screenshot (class="medium",
src="screenshots/banner.gif") is missing alt text; add a meaningful alt
attribute (e.g., alt="brief description of the banner screenshot") to the <img>
element to satisfy accessibility requirements and screen readers.
- Around line 57-64: Fix the grammar in the banner actions description: change
"Action items to shown in the banner." to "Action items to show in the banner.",
add a comma in "To customize button you can pass other props that button
component takes." and reword it to "To customize the button, you can pass other
props that the button component accepts.", and ensure the examples referencing
`label`, `onPress`, `style`, and `theme` remain unchanged.
- Line 1: The external edit anchor element with class
"EditButtonContainer_emlbhqm" (the <a> that has target="_blank" and href to
GitHub) is missing rel="noopener noreferrer"; update that anchor to include
rel="noopener noreferrer" to prevent reverse-tabnabbing while preserving
target="_blank" and existing attributes.
In `@docs/public/2.0/bottom-navigation.html`:
- Around line 4-6: The screenshot img element lacks accessible alt text; open
the <img class="medium" src="screenshots/bottom-navigation.gif" /> element in
the bottom-navigation HTML and add a meaningful alt attribute (e.g.,
alt="Animated demonstration of bottom navigation component") describing the
image content concisely for screen readers so it meets accessibility
requirements.
- Line 1: The external edit anchor with target="_blank" (the <a> element having
class "EditButtonContainer_emlbhqm" and the href pointing to the GitHub edit
URL) should include rel="noopener noreferrer" to prevent reverse-tabnabbing;
update the anchor element where class="EditButtonContainer_emlbhqm" (the edit
link) to add the rel attribute alongside the existing target.
- Around line 60-142: Fix copy issues in the BottomNavigation docs: correct
typos ("reprsenting" → "representing", "minmize" → "minimize"), reword the
renderLabel prop text to "Callback which returns a React Element to be used as
tab label" (replace the broken sentence), and remove the stray "/**" before the
getColor paragraph so the getColor doc reads normally; changes should be applied
around the documented symbols: index, routes, renderLabel, SceneMap and getColor
in the BottomNavigation docs.
In `@README.md`:
- Line 41: Fix the sentence containing the app store links by removing the extra
leading space inside the iOS link text (change "[ iOS]" to "[iOS]") and correct
the phrase "in the both stores" to "in both stores" in the same sentence that
lists the Android and iOS demo app links.
|
|
||
| URL="https://callstack-github-bot.herokuapp.com/comment" | ||
| LINK="https://$CIRCLE_BUILD_NUM-71323749-gh.circle-artifacts.com/$CIRCLE_NODE_INDEX/docs/index.html" | ||
| LINK="https://output.circle-artifacts.com/output/job/$CIRCLE_WORKFLOW_JOB_ID/artifacts/$CIRCLE_NODE_INDEX/docs/index.html" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🌐 Web query:
CircleCI CIRCLE_WORKFLOW_JOB_ID artifacts URL format
💡 Result:
CircleCI artifact “raw” URLs can be constructed from CIRCLE_WORKFLOW_JOB_ID using this pattern:
https://output.circle-artifacts.com/output/job/<CIRCLE_WORKFLOW_JOB_ID>/artifacts/<CIRCLE_NODE_INDEX>/<path_to_file_or_folder> [1]
Example:
https://output.circle-artifacts.com/output/job/3df8fe81-1066-4a7b-9843-bad46ff42b65/artifacts/0/foo.txt [1]
Notes:
- If you are not using parallelism,
CIRCLE_NODE_INDEXis0. [1] - CircleCI recommends fetching artifact URLs via the API after
store_artifacts(the storage domain/pattern can change). [1][3]
Sources: [1] [2] [3]
The CircleCI artifacts URL format is correct.
The URL format using $CIRCLE_WORKFLOW_JOB_ID matches CircleCI's current artifacts API pattern. Both $CIRCLE_WORKFLOW_JOB_ID and $CIRCLE_NODE_INDEX are the correct environment variables for this context.
Optionally, consider fetching artifact URLs via the CircleCI API after store_artifacts instead of hardcoding them, as CircleCI notes the storage domain and pattern can change.
🤖 Prompt for AI Agents
In @.circleci/comment-artifacts.sh at line 4, The current assignment of LINK in
comment-artifacts.sh hardcodes the artifacts URL using environment vars
CIRCLE_WORKFLOW_JOB_ID and CIRCLE_NODE_INDEX; change this to query the CircleCI
API after store_artifacts instead of relying on the storage domain
pattern—replace the static LINK construct with a short function or block that
calls the CircleCI REST endpoint to list artifacts for the workflow/job and
extracts the artifact URL(s), using CIRCLE_WORKFLOW_JOB_ID and CIRCLE_NODE_INDEX
only as API query parameters and falling back to the hardcoded pattern if the
API call fails.
Comment on lines
33
to
36
| # Clean existing dist/ contents | ||
| rm -rf dist/**/* || : | ||
| rm -f dist/*.{html,css,js,json,map} || : | ||
| rm -f dist/*.{html,css,js,json,map,xml} || : | ||
| rmdir dist/* || : |
There was a problem hiding this comment.
Glob pattern dist/**/* requires globstar to be enabled.
The ** glob pattern for recursive matching doesn't work in bash by default. Without shopt -s globstar, ** is treated as a single *, potentially leaving nested files unremoved.
Proposed fix
# Clean existing dist/ contents
-rm -rf dist/**/* || :
+rm -rf dist/* || :
rm -f dist/*.{html,css,js,json,map,xml} || :
-rmdir dist/* || :Alternatively, enable globstar:
+shopt -s globstar
# Clean existing dist/ contents
rm -rf dist/**/* || :📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| # Clean existing dist/ contents | |
| rm -rf dist/**/* || : | |
| rm -f dist/*.{html,css,js,json,map} || : | |
| rm -f dist/*.{html,css,js,json,map,xml} || : | |
| rmdir dist/* || : | |
| # Clean existing dist/ contents | |
| rm -rf dist/* || : | |
| rm -f dist/*.{html,css,js,json,map,xml} || : |
🤖 Prompt for AI Agents
In @.circleci/deploy-docs.sh around lines 33 - 36, The rm commands use the
recursive glob pattern 'dist/**/*' which requires bash globstar enabled; update
.circleci/deploy-docs.sh to either enable globstar (e.g., run shopt -s globstar
at the top of the script before the rm -rf dist/**/* invocation) or replace the
glob usage with a portable recursive removal approach (use a find-based removal
or plain rm -rf dist to clear nested files) so that the 'rm -rf dist/**/*' and
related lines reliably remove nested files; ensure the chosen fix affects the
existing rm -f dist/*.{html,css,js,json,map,xml} and rmdir dist/* lines
consistently.
Comment on lines
+8
to
+10
| ### Related issue | ||
|
|
||
| <!-- If this pull request addresses an existing issue, link to the issue. If an issue is not present, describe the issue here. --> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding GitHub issue linking syntax guidance.
The related issue section could benefit from examples of GitHub's auto-closing syntax to help contributors properly link issues.
🔗 Optional enhancement: Add linking syntax examples
### Related issue
-<!-- If this pull request addresses an existing issue, link to the issue. If an issue is not present, describe the issue here. -->
+<!-- Link to the related issue using GitHub keywords: -->
+<!-- - Use "Fixes `#123`" or "Closes `#123`" to auto-close the issue when this PR merges -->
+<!-- - Use "Related to `#123`" or "Addresses `#123`" for reference without auto-closing -->
+<!-- If no issue exists, describe the problem here. -->📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ### Related issue | |
| <!-- If this pull request addresses an existing issue, link to the issue. If an issue is not present, describe the issue here. --> | |
| ### Related issue | |
| <!-- Link to the related issue using GitHub keywords: --> | |
| <!-- - Use "Fixes `#123`" or "Closes `#123`" to auto-close the issue when this PR merges --> | |
| <!-- - Use "Related to `#123`" or "Addresses `#123`" for reference without auto-closing --> | |
| <!-- If no issue exists, describe the problem here. --> |
🤖 Prompt for AI Agents
In @.github/pull_request_template.md around lines 8 - 10, Update the "###
Related issue" section in the PR template to include explicit examples of GitHub
auto-closing issue syntax (e.g., "Fixes `#123`", "Closes owner/repo#123") so
contributors know how to link issues; modify the existing details block (the
collapsible "🔗 Optional enhancement") under the "### Related issue" header to
contain these example phrases and a short note about their behavior (auto-close
vs. reference) to make the guidance discoverable.
|
|
||
| <!-- Describe the **steps to test this change**, so that a reviewer can verify it. Provide screenshots or videos if the change affects UI. --> | ||
|
|
||
| <!-- Keep in mind that PR changes must pass lint, typescript and tests. --> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider converting the reminder into a checklist.
The reminder about lint, TypeScript, and tests could be more actionable as a checklist that contributors can tick off.
✅ Optional enhancement: Convert to checklist format
-<!-- Keep in mind that PR changes must pass lint, typescript and tests. -->
+### Checklist
+
+- [ ] Passes lint checks
+- [ ] Passes TypeScript compilation
+- [ ] Tests added/updated and passing📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <!-- Keep in mind that PR changes must pass lint, typescript and tests. --> | |
| ### Checklist | |
| - [ ] Passes lint checks | |
| - [ ] Passes TypeScript compilation | |
| - [ ] Tests added/updated and passing |
🤖 Prompt for AI Agents
In @.github/pull_request_template.md at line 16, Convert the single-line
reminder "Keep in mind that PR changes must pass lint, typescript and tests."
into a Markdown checklist so contributors can mark items as done; replace that
line with three checklist items like "- [ ] Lint passed", "- [ ] TypeScript
checks passed", and "- [ ] Tests passed" (or a single combined "- [ ] Lint,
TypeScript and tests all pass") in the PR template to make it actionable and
scannable.
Comment on lines
+2
to
+9
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
| jobs: | ||
| publish: | ||
| if: ${{ (contains(github.event.pull_request.labels.*.name, 'example app')) }} | ||
| name: Install and publish |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
GitHub Actions push event payload vs pull_request event payload github.event.pull_request
💡 Result:
Why github.event.pull_request exists in pull_request but not in push
GitHub Actions exposes the raw webhook payload that triggered the run as github.event (also available on disk via GITHUB_EVENT_PATH, typically /github/workflow/event.json). The shape of that payload depends entirely on the triggering event. [3][4]
pushevent payload: contains fields likeref,before,after,base_ref,commits, etc.—nopull_requestobject. [1]pull_requestevent payload: includes a top-levelpull_requestobject (sogithub.event.pull_request.*works). [2]
So, on a push-triggered run, github.event.pull_request is null/undefined (because it’s not part of that payload at all).
Related context differences you’ll notice
github.head_ref/GITHUB_HEAD_REFare only set forpull_request/pull_request_target, not forpush. [5][4]- For
pull_requestruns, GitHub notes you may needgithub.event.pull_request.head.shato get the head SHA (becauseGITHUB_SHAcan be the PR merge commit). [6]
How to write workflows that handle both safely
Guard PR-only fields:
if: ${{ github.event_name == 'pull_request' && github.event.pull_request.merged == true }}If you must find the PR from a push run (e.g., push to main after merge)
A push payload won’t tell you the PR directly, so you typically query the API using the pushed SHA (e.g., github.sha) and list PRs associated with that commit:
GET /repos/{owner}/{repo}/commits/{commit_sha}/pulls[7]
This is the standard way to “recover” PR metadata when your workflow is triggered by push rather than pull_request. [7]
Sources: GitHub webhook payload docs for push and pull_request, Actions contexts/variables docs, and REST API commits endpoints. [1][2][5][4][6][7]
🌐 Web query:
GitHub Actions pull_request closed merged event actions/checkout default SHA
💡 Result:
On a workflow triggered by pull_request with types: [closed]:
actions/checkout(noref:specified) checks out${{ github.sha }}/GITHUB_SHA(that’s the default).- For the
pull_requestevent, GitHub setsGITHUB_SHAto the “last merge commit” associated with the event’sGITHUB_REF. In the common PR lifecycle (opened/synchronize),GITHUB_REFisrefs/pull/<num>/merge(the PR “merge” ref), so the default checkout is that synthetic merge commit. [1] - When the PR is closed because it was merged,
GITHUB_REFchanges to the fully-qualified base branch ref (for examplerefs/heads/main). So onclosed+merged runs, the default checkout tracks the base branch ref rather thanrefs/pull/<num>/merge. [1]
If you want a specific SHA instead of the default:
- Checkout the PR head commit (not the merge ref):
ref: ${{ github.event.pull_request.head.sha }}[1][2]
(Where [1] documents GITHUB_SHA/GITHUB_REF behavior for pull_request, and [2] shows actions/checkout usage for checking out pull_request.head.sha.)
Sources: [1] [2]
Fix trigger/condition mismatch: job never runs on push.
github.event.pull_request does not exist in push event payloads, so the job condition will always evaluate false. Switch to pull_request trigger with merged status check:
Proposed fix
-on:
- push:
- branches:
- - main
+on:
+ pull_request:
+ types: [closed]
+ branches:
+ - main
jobs:
publish:
- if: ${{ (contains(github.event.pull_request.labels.*.name, 'example app')) }}
+ if: ${{ github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'example app') }}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| on: | |
| push: | |
| branches: | |
| - main | |
| jobs: | |
| publish: | |
| if: ${{ (contains(github.event.pull_request.labels.*.name, 'example app')) }} | |
| name: Install and publish | |
| on: | |
| pull_request: | |
| types: [closed] | |
| branches: | |
| - main | |
| jobs: | |
| publish: | |
| if: ${{ github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'example app') }} | |
| name: Install and publish |
🤖 Prompt for AI Agents
In @.github/workflows/updates.yml around lines 2 - 9, The workflow currently
triggers on push but the job condition references github.event.pull_request
(which doesn't exist for push), so update the trigger from on: push to on:
pull_request with types: [closed], and change the job `if` to check that the PR
was merged and has the label (e.g. `github.event.pull_request.merged == true &&
contains(github.event.pull_request.labels.*.name, 'example app')`); modify the
top-level `on:` block and the `publish` job `if` expression (referencing the
`publish` job and the `contains(github.event.pull_request.labels.*.name,
'example app')` expression) accordingly.
Comment on lines
+4
to
+9
| <img src="screenshots/textinput.unfocused.png" /> | ||
| <figcaption>Unfocused</span> | ||
| </figure> | ||
| <figure> | ||
| <img src="screenshots/textinput.focused.png" /> | ||
| <figcaption>Focused</figcaption> |
There was a problem hiding this comment.
Add alt text to screenshots for accessibility.
Images should include alt text so screen readers can convey meaning.
🛠️ Proposed fix
- <img src="screenshots/textinput.unfocused.png" />
+ <img src="screenshots/textinput.unfocused.png" alt="TextInput unfocused state" />
...
- <img src="screenshots/textinput.focused.png" />
+ <img src="screenshots/textinput.focused.png" alt="TextInput focused state" />🤖 Prompt for AI Agents
In `@docs/public/1.0/text-input.html` around lines 4 - 9, Update the two <img>
elements in docs/public/1.0/text-input.html (the images with
src="screenshots/textinput.unfocused.png" and
src="screenshots/textinput.focused.png") to include descriptive alt attributes
that match the figcaption text (e.g., alt="Text input, unfocused" and alt="Text
input, focused") so screen readers can convey the image meaning; ensure the alt
strings are concise and convey the same state described by the corresponding
<figcaption>.
Comment on lines
+44
to
+45
| </span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="style" href="#style"><code>style</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>any</code></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="theme" href="#theme"><code>theme</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Theme</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div></div></div></div><a class="_propLabel__vv20rl _rest__vv20rl" href="https://facebook.github.io/react-native/docs/textinput.html#props"><code>...<!-- -->TextInput props</code></a><h2 class="_propsHeader__vv20rl">Methods</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="isFocused" href="#isFocused"><code>isFocused</code></a><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Returns <code>true</code> if the input is currently focused, <code>false</code> otherwise.</p> | ||
| </span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="clear" href="#clear"><code>clear</code></a><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Removes all text from the TextInput.</p> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if the link resolves and trace any redirects
curl -I -L -w "\nFinal URL: %{url_effective}\n" 'https://facebook.github.io/react-native/docs/textinput.html#props' 2>&1 | head -30Repository: PicnicSupermarket/react-native-paper
Length of output: 1272
🌐 Web query:
React Native TextInput documentation current URL 2025
💡 Result:
The current React Native TextInput documentation URL (as used in 2025 and still current) is:
https://reactnative.dev/docs/textinput(reactnative.dev)
Citations:
Update the external React Native TextInput documentation link to the current URL.
The link to https://facebook.github.io/react-native/docs/textinput.html#props uses a legacy domain. While it redirects to the current documentation at https://reactnative.dev/docs/textinput.html, the reference should be updated directly to the current URL to avoid unnecessary redirects and point to the authoritative documentation source.
🤖 Prompt for AI Agents
In `@docs/public/1.0/text-input.html` around lines 44 - 45, Replace the legacy
React Native docs URL in the anchor element that renders the external TextInput
props link (the <a> with classes "_propLabel__vv20rl _rest__vv20rl" and inner
<code>... TextInput props</code>) so its href points directly to the current
canonical URL "https://reactnative.dev/docs/textinput.html#props" instead of
"https://facebook.github.io/react-native/docs/textinput.html#props"; update the
href value accordingly and ensure the link target and display text remain
unchanged.
Comment on lines
+5
to
+10
| import App from '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/templates/App.js'; | ||
| import data from './app.data'; | ||
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/reset.css'; | ||
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/globals.css'; | ||
|
|
||
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/assets/styles.css'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Step 1: Find the file
echo "=== Locating file ==="
find . -name "app.src.js" -o -name "app.src.js*" 2>/dev/null
# Step 2: Check if docs/public/2.0/app.src.js exists
if [ -f "docs/public/2.0/app.src.js" ]; then
echo ""
echo "=== Content of docs/public/2.0/app.src.js (lines 1-20) ==="
head -20 "docs/public/2.0/app.src.js"
fi
# Step 3: Search for absolute paths in JS/TS files
echo ""
echo "=== Searching for absolute paths (/Users/, /home/, C:\\) in source files ==="
rg -n '(/Users/|/home/|C:\\)' --type js --type ts --type jsx --type tsx . 2>/dev/null | head -30Repository: PicnicSupermarket/react-native-paper
Length of output: 1234
🏁 Script executed:
#!/bin/bash
# Check all versions for the same absolute path issue
echo "=== Checking all app.src.js versions ==="
for file in ./docs/public/*/app.src.js; do
echo ""
echo "File: $file"
head -10 "$file" | grep -E "Users|home|import" || echo "(no absolute paths)"
done
# Check if component-docs exists as a dependency
echo ""
echo "=== Checking for component-docs in package.json ==="
if [ -f "docs/package.json" ]; then
cat "docs/package.json" | grep -A 5 -B 5 "component-docs" || echo "Not found in docs/package.json"
fi
# Check node_modules structure
echo ""
echo "=== Checking node_modules structure ==="
if [ -d "docs/node_modules/component-docs" ]; then
echo "Found docs/node_modules/component-docs"
ls -la "docs/node_modules/component-docs/dist/templates/" 2>/dev/null | head -10
ls -la "docs/node_modules/component-docs/dist/styles/" 2>/dev/null | head -10
else
echo "docs/node_modules/component-docs not found in repository"
fi
# Check for assets directory
echo ""
echo "=== Checking assets directory from docs/public/2.0 ==="
if [ -d "docs/assets" ]; then
echo "docs/assets exists"
ls -la "docs/assets/" | head -5
else
echo "docs/assets not found"
fiRepository: PicnicSupermarket/react-native-paper
Length of output: 3213
🏁 Script executed:
#!/bin/bash
# Find where assets might be
echo "=== Searching for assets directory ==="
find docs -type d -name "assets" 2>/dev/null
# Find CSS files in docs
echo ""
echo "=== Finding CSS files in docs ==="
find docs -name "*.css" -type f 2>/dev/null | grep -v node_modules | head -20
# Map the directory structure
echo ""
echo "=== Directory structure of docs ==="
tree -L 3 -d docs 2>/dev/null || find docs -maxdepth 3 -type d | head -30
# Check for styles.css specifically
echo ""
echo "=== Searching for styles.css ==="
find . -name "styles.css" -type f 2>/dev/null | grep -v node_modules
</parameter>Repository: PicnicSupermarket/react-native-paper
Length of output: 1332
🏁 Script executed:
#!/bin/bash
# Check what's in the assets directory
echo "=== Contents of docs/public/2.0/assets ==="
ls -la "docs/public/2.0/assets/" 2>/dev/null
echo ""
echo "=== Contents of docs/public/3.0/assets ==="
ls -la "docs/public/3.0/assets/" 2>/dev/null
echo ""
echo "=== Verify import path from docs/public/2.0/app.src.js ==="
echo "From docs/public/2.0/app.src.js:"
echo "- Import /Users/.../docs/assets/styles.css would be from docs/assets"
echo "- docs/assets does NOT exist"
echo "- Correct relative path should be: ./assets/styles.css"
echo "- That resolves to: docs/public/2.0/assets/"
</parameter>Repository: PicnicSupermarket/react-native-paper
Length of output: 991
Replace absolute local paths with package and relative imports.
The current imports use machine-specific absolute paths that will fail in CI and for other contributors. This issue affects all version files (1.0, 2.0, 3.0, and 4.0).
The component-docs imports can safely use package resolution since component-docs is declared in docs/package.json. However, the assets import path in the proposed fix is incorrect: from docs/public/2.0/app.src.js, the correct relative path to the assets directory is ./assets/styles.css (not ../../assets/styles.css, which would resolve to a non-existent docs/assets/ directory).
Corrected fix
-import App from '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/templates/App.js';
+import App from 'component-docs/dist/templates/App';
import data from './app.data';
-import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/reset.css';
-import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/globals.css';
+import 'component-docs/dist/styles/reset.css';
+import 'component-docs/dist/styles/globals.css';
-import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/assets/styles.css';
+import './assets/styles.css';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import App from '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/templates/App.js'; | |
| import data from './app.data'; | |
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/reset.css'; | |
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/globals.css'; | |
| import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/assets/styles.css'; | |
| import App from 'component-docs/dist/templates/App'; | |
| import data from './app.data'; | |
| import 'component-docs/dist/styles/reset.css'; | |
| import 'component-docs/dist/styles/globals.css'; | |
| import './assets/styles.css'; |
🤖 Prompt for AI Agents
In `@docs/public/2.0/app.src.js` around lines 5 - 10, Replace the machine-specific
absolute imports in docs/public/2.0/app.src.js with package and correct relative
imports: import App from 'component-docs/dist/templates/App.js'; import
'component-docs/dist/styles/reset.css'; import
'component-docs/dist/styles/globals.css'; keep import data from './app.data';
and change the assets import to the correct relative path import
'./assets/styles.css' (note the single-dot relative path from docs/public/2.0).
| @@ -0,0 +1,31 @@ | |||
| <html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content="Badges are small status descriptors for UI elements."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Badge"/><meta name="twitter:description" content="Badges are small status descriptors for UI elements."/><meta property="og:type" content="website"/><meta property="og:title" content="Badge"/><meta property="og:description" content="Badges are small status descriptors for UI elements."/><title>Badge</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_llziuo3"/><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l5q2p2e" href="index.html">Home</a><a data-selected="false" class="LinkItem_l5q2p2e" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l5q2p2e" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l5q2p2e" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l5q2p2e" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l5q2p2e" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l5q2p2e" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l5q2p2e" href="contributing.html">Contributing</a><hr class="SeparatorItem_s1gpol2t"/><a data-selected="false" class="LinkItem_l5q2p2e" href="activity-indicator.html">ActivityIndicator</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="true" class="LinkItem_l5q2p2e" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l5q2p2e" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l5q2p2e" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l5q2p2e" href="button.html">Button</a><a data-selected="false" class="LinkItem_l5q2p2e" href="caption.html">Caption</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-title.html">Card.Title</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="chip.html">Chip</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="divider.html">Divider</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l5q2p2e" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l5q2p2e" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l5q2p2e" href="icon-button.html">IconButton</a><a data-selected="false" class="LinkItem_l5q2p2e" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-icon.html">List.Icon</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="modal.html">Modal</a><a data-selected="false" class="LinkItem_l5q2p2e" href="paragraph.html">Paragraph</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="progress-bar.html">ProgressBar</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l5q2p2e" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l5q2p2e" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l5q2p2e" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l5q2p2e" href="switch.html">Switch</a><a data-selected="false" class="LinkItem_l5q2p2e" href="text.html">Text</a><a data-selected="false" class="LinkItem_l5q2p2e" href="text-input.html">TextInput</a><a data-selected="false" class="LinkItem_l5q2p2e" href="title.html">Title</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="toggle-button-group.html">ToggleButton.Group</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="Inner_ir6lat6"><a target="_blank" href="https://github.com/callstack/react-native-paper/edit/2.0//../src/components/Badge.js" class="EditButtonContainer_emlbhqm"><svg width="18px" height="20px" viewBox="0 0 18 20"><path fill="none" transform="translate(2.000000, 2.000000)" d="M1.5,14.5363545 L1.5,11.3292488 L9.36649374,3.4627884 L12.5735698,6.66982438 L4.7071064,14.5363545 L1.5,14.5363545 Z M14.1535993,5.08986045 L12.5666426,6.67673666 L9.35957774,3.46971186 L10.9465031,1.88274634 C11.4083588,1.42089061 12.1250348,1.42089061 12.5868905,1.88274634 L14.1536082,3.44946407 C14.6154639,3.91131979 14.6154639,4.62799577 14.1536082,5.08985149 Z"></path></svg></a><h1 class="Title_t1dytcq5">Badge</h1><div class="MarkdownContent_m3ctz2y"><p>Badges are small status descriptors for UI elements. | |||
There was a problem hiding this comment.
Fix empty href attributes in navigation links.
Several parent navigation items (Avatar, Drawer, List) have empty href="" attributes. Empty hrefs cause page reloads when clicked and create poor accessibility—screen readers announce these as links with no destination. Consider either:
- Using proper URLs that link to parent component overview pages
- Converting these to non-link elements (e.g.,
<span>or<button>) if they're only meant as collapsible group headers
🤖 Prompt for AI Agents
In `@docs/public/2.0/badge.html` at line 1, The review flagged empty href
attributes on navigation anchors (e.g., the <a class="LinkItem_l5q2p2e" href="">
elements for "Avatar", "Drawer", "List") which cause reloads and accessibility
issues; fix by either supplying the correct target URLs for those parent
overview pages or converting those anchors into non-link elements (e.g., <span>
or <button>) and updating associated markup (the surrounding
Row_rl210no/GroupItems_g1ol5l8s structure and any aria-expanded/aria-controls
you use) so the collapsed-group toggle behavior and accessibility attributes
remain correct.
🧹 Nitpick | 🔵 Trivial
Simplify redundant path in edit link URL.
The GitHub edit link contains a redundant path segment: /2.0//../src/components/Badge.js. This simplifies to /src/components/Badge.js and could be cleaned up in the documentation generator template for better clarity.
🤖 Prompt for AI Agents
In `@docs/public/2.0/badge.html` at line 1, The edit link anchor (class
"EditButtonContainer_emlbhqm") contains a redundant path segment
"/2.0//../src/components/Badge.js"; update the documentation generator/template
that builds that href so it normalizes paths (remove double slashes and resolve
".." segments) before rendering—e.g., use a path normalization routine
(path.posix.normalize or equivalent) or construct the repo path from a single
source variable to produce "/src/components/Badge.js" and ensure the template
uses the normalized value for the href.
| </div></div><div class="PropInfo_p1eats2g"><a name="children" href="#children" class="PropLabel_psi127e"><code>children</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>string | number</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Content of the <code>Badge</code>.</p> | ||
| </div></div><div class="PropInfo_p1eats2g"><a name="size" href="#size" class="PropLabel_psi127e"><code>size</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>number</code></div><div class="PropItem_pwdtv5j"><span>Default value: </span><code>20</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Size of the <code>Badge</code>.</p> | ||
| </div></div><div class="PropInfo_p1eats2g"><a name="style" href="#style" class="PropLabel_psi127e"><code>style</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>any</code></div></div><div class="PropInfo_p1eats2g"><a name="theme" href="#theme" class="PropLabel_psi127e"><code>theme</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>Theme</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"></div></div></div></main></div></div> | ||
| <style type="text/css"> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove unnecessary type attribute on style tag.
The type="text/css" attribute is unnecessary in HTML5, as CSS is the default content type for <style> tags. This can be simplified to <style> for cleaner markup.
🤖 Prompt for AI Agents
In `@docs/public/2.0/badge.html` at line 22, The style tag in the badge HTML
includes an unnecessary type attribute; remove the type="text/css" from the
<style> tag (replace occurrences of <style type="text/css"> with just <style>)
so the markup uses the HTML5 default and is cleaner—update the instance in the
badge.html file where the style tag is declared.
impsdc
force-pushed
the
upgrade/v5.13.0
branch
from
8db9882 to
999ff1a
Compare
Author
|
@CodeRabbit pause |
✅ Actions performedReviews paused. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
20 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
STO-11341