chore: remove blur from boverlay in cases where its not allowed by br… #2712
Conversation
|
|
|
Caution Review failedThe pull request is closed. WalkthroughThe changes update the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BOverlay
participant Browser
User->>BOverlay: Set blur, variant, bgColor props
BOverlay->>BOverlay: Compute blurStyles
alt variant is 'white' or 'transparent' and no bgColor
BOverlay->>Browser: Apply CSS backdropFilter: blur(...)
else
BOverlay->>Browser: Do not apply blur
end
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
commit: |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/docs/src/docs/migration-guide.md (1)
590-594: Fix grammar and approve documentation addition.The new BOverlay section effectively documents the blur limitation. However, there's a minor grammatical issue that should be addressed.
Apply this diff to fix the grammar:
-prop `blur` does not work when prop `bgColor` is defined. It also will not work if prop `variant` is anything other than `white` or `transparent`. This overcomes a browser change. +prop `blur` does not work when the prop `bgColor` is defined. It also will not work if the prop `variant` is anything other than `white` or `transparent`. This overcomes a browser change.The documentation content is accurate and helpful for migration purposes.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~594-~594: You might be missing the article “the” here.
Context: ...ris defined. It also will not work if propvariantis anything other thanwhite...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/src/docs/components/overlay.md(4 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/src/docs/migration-guide.md
[uncategorized] ~594-~594: You might be missing the article “the” here.
Context: ...ris defined. It also will not work if propvariantis anything other thanwhite...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (3)
packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue (1)
128-131: LGTM! Well-implemented conditional blur logic.The conditional logic correctly restricts the backdrop filter blur effect to cases where it's supported by browsers. The condition properly checks for the presence of blur, absence of bgColor, and restricts variants to 'white' or 'transparent'. This aligns perfectly with the PR objective to remove blur where it's not allowed by browsers.
apps/docs/src/docs/components/overlay.md (2)
98-98: Excellent documentation clarity improvement.The updated label text clearly explains the blur limitations, helping users understand when the blur effect will and won't work. This aligns perfectly with the component implementation and provides valuable guidance to developers.
Also applies to: 147-150
189-189: Great TypeScript improvements for better type safety.The changes enhance type safety and developer experience:
- Making the
variantsarrayas constprovides better type inference and prevents accidental modifications- Properly typing the
variantref with(typeof variants)[number]ensures only valid variant values can be assignedThese improvements make the code more robust and provide better IDE support.
Also applies to: 192-192, 953-954
* upstream/main: chore: remove blur from boverlay in cases where its not allowed by br… (bootstrap-vue-next#2712) feat(BTableLite): add `table-colgroup` slot (bootstrap-vue-next#2680) perf: use getter functions over computed in some cases feat(BModal): use css var for zindex, add helper vars and ontop class (bootstrap-vue-next#2556) feat(BFormTags): added feedbackAriaLive prop (bootstrap-vue-next#2696) fix(scss) moved all scss styles out of components (bootstrap-vue-next#2671) fix(BModal): ensure clicking inside and releasing outside does not close modal (bootstrap-vue-next#2703) (bootstrap-vue-next#2704) fix(BToast): race condition if using setInterval to update countdown doc data feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place feat(BToast): add noProgress prop, make progress show as default if modelValue is number. fix(useToastController): if using the deprecated show method the countdown didn't start.
…owser
Describe the PR
A clear and concise description of what the pull request does.
Small replication
A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit
8000- Updated overlay behavior so the blur effect is only applied when compatible with the selected variant and background color.