refactor(inline-notice): migrate InlineNotice from Flow to TypeScript - #4727
Merged
mergify[bot] merged 1 commit intoJul 30, 2026
Merged
Conversation
Contributor
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughAdds a typed ChangesInlineNotice feature
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/inline-notice/InlineNotice.js.flow`:
- Around line 7-12: The Flow API must match the TypeScript InlineNoticeProps
contract. In src/components/inline-notice/InlineNotice.js.flow lines 7-12,
extend Props with the native div attributes while omitting title, and support
forwarding those remaining props to the outer div. In
src/components/inline-notice/index.js.flow lines 1-2, re-export the matching
Flow props type consistently with index.ts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 56b3a918-e89a-479d-8a84-a86c943339ca
📒 Files selected for processing (7)
src/components/index.tssrc/components/inline-notice/InlineNotice.js.flowsrc/components/inline-notice/InlineNotice.stories.tsxsrc/components/inline-notice/InlineNotice.tsxsrc/components/inline-notice/__tests__/InlineNotice.test.tsxsrc/components/inline-notice/index.js.flowsrc/components/inline-notice/index.ts
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/inline-notice/InlineNotice.js.flow`:
- Around line 7-12: The Flow API must match the TypeScript InlineNoticeProps
contract. In src/components/inline-notice/InlineNotice.js.flow lines 7-12,
extend Props with the native div attributes while omitting title, and support
forwarding those remaining props to the outer div. In
src/components/inline-notice/index.js.flow lines 1-2, re-export the matching
Flow props type consistently with index.ts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 56b3a918-e89a-479d-8a84-a86c943339ca
📒 Files selected for processing (7)
src/components/index.tssrc/components/inline-notice/InlineNotice.js.flowsrc/components/inline-notice/InlineNotice.stories.tsxsrc/components/inline-notice/InlineNotice.tsxsrc/components/inline-notice/__tests__/InlineNotice.test.tsxsrc/components/inline-notice/index.js.flowsrc/components/inline-notice/index.ts
🛑 Comments failed to post (1)
src/components/inline-notice/InlineNotice.js.flow (1)
7-12: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "== files ==" git ls-files | rg 'src/components/inline-notice/|inline-notice' || true echo "== flow files ==" for f in $(git ls-files 'src/components/inline-notice/*'); do echo "--- $f" wc -l "$f" sed -n '1,140p' "$f" done echo "== ts/index files ==" git ls-files 'src/components/inline-notice/*' | grep -v '.flow$' | while read -r f; do echo "--- $f" wc -l "$f" sed -n '1,220p' "$f" done echo "== searches for InlineNoticeProps and native attrs ==" rg -n "InlineNoticeProps|InlineNoticeType|type Props|interface.*InlineNotice|export function InlineNotice|forwardRef|div" src/components/inline-notice src -g '!node_modules' -g '!dist' -g '!build' || trueRepository: box/box-ui-elements
Length of output: 50376
🏁 Script executed:
#!/bin/bash set -euo pipefail python3 - <<'PY' import pathlib, re def files(): base = pathlib.Path('src/components/inline-notice') return sorted([p for p in base.glob('*') if p.is_file()]) for p in files(): text = p.read_text() print(f'=== {p} ===') print(f'has_flow_marker = {text.startswith("// `@flow`")}') print(f'props_kind = None') print(f'exports_default_or_named_inline_props = {bool(re.search(r"\bexport\s+(default|.*InlineNoticeProps|.*InlineNoticeProps\b)", text))}') print(f'inline_notice_type_refs = {re.findall(r"\bInlineNoticeProps\b|\bInlineNoticeType\b|type Props|interface Props", text)}') print('---') PYRepository: box/box-ui-elements
Length of output: 538
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "== files ==" git ls-files 'src/components/inline-notice/*' echo "== inline notice files ==" for f in $(git ls-files 'src/components/inline-notice/*'); do echo "--- $f" wc -l "$f" sed -n '1,180p' "$f" done echo "== focused API searches ==" rg -n "InlineNoticeProps|InlineNoticeType|type Props|interface Props|forwardRef|<div|as: 'div'|as: \"div\"|...rest" src/components/inline-notice -g '!node_modules' -g '!dist' -g '!build' || true echo "== Flow API surface probe ==" python3 - <<'PY' import pathlib, re base = pathlib.Path('src/components/inline-notice') for p in sorted(base.glob('*')): if not p.is_file(): continue text = p.read_text() print(f'=== {p} ===') print('has_flow_marker=', text.startswith('// `@flow`')) print('flow_file=', p.name.endswith('.flow')) print('props_defs=', re.findall(r'(?:type|interface)\s+Props[^;\n{]*(?:{[^}]*}|[^;\n]*)', text)) print('inline_props_refs=', re.findall(r'\bInlineNoticeProps\b', text)) print('inline_type_refs=', re.findall(r'\bInlineNoticeType\b', text)) print('exports=', re.findall(r'export\s+(?:{[^}]+default[^}]+|{[^}]+inlineNoticeProps[^}]+|default|type\s+[A-Za-z_$][\w$]+)[^{]*|export\s+default', text)) PYRepository: box/box-ui-elements
Length of output: 10266
Align the Flow compatibility surface with the TypeScript API.
The TypeScript API exposes
InlineNoticeProps(which isOmit<React.HTMLAttributes<HTMLDivElement>, 'title'>) and passes...restto the outerdiv. Match that in Flow:
src/components/inline-notice/InlineNotice.js.flow#L7-L12: add the native div props/...restshape totype Props.src/components/inline-notice/index.js.flow#L1-L2: re-export a matching Flow props type, aligned withindex.ts.📍 Affects 2 files
src/components/inline-notice/InlineNotice.js.flow#L7-L12(this comment)src/components/inline-notice/index.js.flow#L1-L2🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/inline-notice/InlineNotice.js.flow` around lines 7 - 12, The Flow API must match the TypeScript InlineNoticeProps contract. In src/components/inline-notice/InlineNotice.js.flow lines 7-12, extend Props with the native div attributes while omitting title, and support forwarding those remaining props to the outer div. In src/components/inline-notice/index.js.flow lines 1-2, re-export the matching Flow props type consistently with index.ts.
bonchevskyi
force-pushed
the
refactor/flow-to-ts-inline-notice
branch
from
July 29, 2026 10:10
dfef997 to
3082442
Compare
vitali-usik
previously approved these changes
Jul 29, 2026
tjiang-box
previously approved these changes
Jul 29, 2026
bonchevskyi
force-pushed
the
refactor/flow-to-ts-inline-notice
branch
from
July 29, 2026 17:16
3082442 to
d464f77
Compare
tjiang-box
approved these changes
Jul 29, 2026
bonchevskyi
force-pushed
the
refactor/flow-to-ts-inline-notice
branch
from
July 30, 2026 08:33
d464f77 to
d4dcc84
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/inline-notice/InlineNotice.js.flow`:
- Around line 7-12: Update the Flow props definition in InlineNotice.js.flow by
exporting it as the named InlineNoticeProps type, extending native div
attributes while omitting the native title field and declaring the custom title,
children, className, and type fields. Preserve the existing default export and
align the Flow contract with the TypeScript export.
In `@src/components/inline-notice/InlineNotice.tsx`:
- Line 19: Update the title render condition in InlineNotice.tsx at lines 19-19
and InlineNotice.js.flow at lines 16-16 to check title != null instead of
truthiness, ensuring every non-null ReactNode value, including 0, false, and an
empty string, renders consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: edcf97d6-1099-4663-a94c-bc2c388a1213
📒 Files selected for processing (7)
src/components/index.tssrc/components/inline-notice/InlineNotice.js.flowsrc/components/inline-notice/InlineNotice.stories.tsxsrc/components/inline-notice/InlineNotice.tsxsrc/components/inline-notice/__tests__/InlineNotice.test.tsxsrc/components/inline-notice/index.js.flowsrc/components/inline-notice/index.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/inline-notice/index.js.flow
- src/components/inline-notice/index.ts
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/inline-notice/InlineNotice.js.flow`:
- Around line 7-12: Update the Flow props definition in InlineNotice.js.flow by
exporting it as the named InlineNoticeProps type, extending native div
attributes while omitting the native title field and declaring the custom title,
children, className, and type fields. Preserve the existing default export and
align the Flow contract with the TypeScript export.
In `@src/components/inline-notice/InlineNotice.tsx`:
- Line 19: Update the title render condition in InlineNotice.tsx at lines 19-19
and InlineNotice.js.flow at lines 16-16 to check title != null instead of
truthiness, ensuring every non-null ReactNode value, including 0, false, and an
empty string, renders consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: edcf97d6-1099-4663-a94c-bc2c388a1213
📒 Files selected for processing (7)
src/components/index.tssrc/components/inline-notice/InlineNotice.js.flowsrc/components/inline-notice/InlineNotice.stories.tsxsrc/components/inline-notice/InlineNotice.tsxsrc/components/inline-notice/__tests__/InlineNotice.test.tsxsrc/components/inline-notice/index.js.flowsrc/components/inline-notice/index.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/inline-notice/index.js.flow
- src/components/inline-notice/index.ts
🛑 Comments failed to post (1)
src/components/inline-notice/InlineNotice.js.flow (1)
7-12: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "Tracked files matching inline-notice:" git ls-files | rg '(^|/)inline-notice/|InlineNotice' || true echo echo "Flow/TS files:" fd -a 'inline-notice|InlineNotice' . | sed 's#^\./##' | sort echo echo "Search for Props/InlineNoticeProps/native div type:" rg -n "type Props|interface InlineNoticeProps|type InlineNoticeProps|Native|native attributes|NativeDivProps|DivProps|title\\?:" src -g '*.{js,js.flow,ts,tsx,jsx}' || trueRepository: box/box-ui-elements
Length of output: 50375
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "Files with inline-notice (tracked):" git ls-files 'src/*inline*notice*' 'src/components/inline-notice/*' 'src/components/**/InlineNotice*' | sort || true echo echo "Candidate flow file contents:" for f in src/components/inline-notice/index.js.flow src/components/inline-notice/InlineNotice.js.flow; do if [ -f "$f" ]; then echo "--- $f ($(wc -l < "$f") lines) ---" cat -n "$f" fi done echo echo "Candidate TypeScript implementation files:" for f in src/components/inline-notice/index.ts src/components/inline-notice/index.tsx src/components/inline-notice/InlineNotice.tsx src/components/inline-notice/InlineNotice.ts; do if [ -f "$f" ]; then echo "--- $f ($(wc -l < "$f") lines) ---" sed -n '1,220p' "$f" | cat -n fi doneRepository: box/box-ui-elements
Length of output: 2859
Export the Flow equivalent of
InlineNoticeProps.
src/components/inline-notice/index.tsre-exports the TypeScriptInlineNoticeProps, which extends native<div>attributes and overridestitle; the.js.flowside only defines a private localPropsand exports the default. Keep the Flow contract aligned by exporting a named Flow props type with the same native div attributes, omitted nativetitle, and the customtitle,children,className, andtypefields.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/inline-notice/InlineNotice.js.flow` around lines 7 - 12, Update the Flow props definition in InlineNotice.js.flow by exporting it as the named InlineNoticeProps type, extending native div attributes while omitting the native title field and declaring the custom title, children, className, and type fields. Preserve the existing default export and align the Flow contract with the TypeScript export.
vitali-usik
approved these changes
Jul 30, 2026
Contributor
Merge Queue Status
This pull request spent 11 seconds in the queue, including 1 second running CI. Required conditions to merge
|
This was referenced Aug 7, 2026
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
3 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.
Convert InlineNotice component to TypeScript
This PR converts
src/components/inline-noticefrom JavaScript with Flow to TypeScript.Changes
InlineNotice.jstoInlineNotice.tsxwith exportedInlineNoticePropsinterface<div>attributes throughReact.HTMLAttributesindex.jstoindex.ts, re-exporting the component and its typesInlineNotice.stories.jstoInlineNotice.stories.tsx__tests__/InlineNotice.test.jstoInlineNotice.test.tsx.js.flowfiles for backward compatibilityInlineNoticeexports tosrc/components/index.tsTesting
inline-noticeandinline-error; all 7 tests passyarn lint:ts, ESLint, andflow checkpassComponents/InlineNoticestory builds successfullySummary by CodeRabbit
InlineNoticecomponent for inline contextual messages.InlineNoticeProps.InlineNoticefrom the main components entry point.InlineNoticetest coverage to align with the component’s rendered structure.