-
-
Notifications
You must be signed in to change notification settings - Fork 150
docs(BProgress): Parity pass #2689
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
WalkthroughThis update introduces several new Vue demo components showcasing various features of progress bars, such as custom labels, multiple bars, different heights, widths, backgrounds, and animations. The progress component documentation is refactored to use these new demos via embedded references, and the data file for progress components receives enhanced descriptive fields and structural improvements for clarity and maintainability. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocsPage
participant DemoComponent
User->>DocsPage: Navigates to Progress documentation
DocsPage->>DemoComponent: Loads embedded demo (e.g., ProgressBasic)
DemoComponent-->>DocsPage: Renders progress bar example
DocsPage-->>User: Displays documentation with live demos
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (5)
apps/docs/src/docs/components/progress.md (5)
5-6
: Refine introductory text for clarity
The current intro reads as a bit generic and repeats “progress bars.” Consider explicitly naming the component (e.g.,BProgress
) and tightening the phrasing.
18-18
: Clarify wording and spelling
- “in a single process” is confusing; perhaps “in a single progress instance” or similar.
- Use “subcomponents” (one word) for consistency with other docs.
- Add a period at the end of the sentence.
🧰 Tools
🪛 LanguageTool
[misspelling] ~18-~18: This word is normally spelled as one.
Context: ...e prop on the individualBProgressBar
sub-components (see the [Multiple Bars](#multiple-bars...(EN_COMPOUNDS_SUB_COMPONENTS)
28-28
: Unify phrasing and spelling in custom label guidance
- Change “sub-component” → “subcomponent” for consistency.
- Consider 8000 rephrasing to “Use the default slot of a
BProgressBar
subcomponent or thelabel
prop to customize the label.”🧰 Tools
🪛 LanguageTool
[misspelling] ~28-~28: This word is normally spelled as one.
Context: ...he default slot within aBProgressBar
sub-component, or by using thelabel
property on `B...(EN_COMPOUNDS_SUB_COMPONENT)
34-36
: Fix typo in width description
“maximum with of its parent container” → “maximum width of its parent container.”
75-77
: Improve list-item consistency
- Capitalize first words (“Height, if specified…” → “Height: if specified…”).
- Consider adding or removing periods uniformly at the end of each bullet.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/docs/src/data/components/progress.data.ts
(3 hunks)apps/docs/src/docs/components/demo/ProgressAnimated.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressBackgrounds.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressBasic.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressCustomLabels.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressHeight.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressLabels.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressMultipleBars.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressStriped.vue
(1 hunks)apps/docs/src/docs/components/demo/ProgressWidth.vue
(1 hunks)apps/docs/src/docs/components/progress.md
(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/docs/src/data/components/progress.data.ts (2)
apps/docs/src/utils/index.ts (2)
pick
(4-4)buildCommonProps
(3-3)apps/docs/src/types/index.ts (1)
PropertyReference
(11-16)
🪛 LanguageTool
apps/docs/src/docs/components/progress.md
[misspelling] ~18-~18: This word is normally spelled as one.
Context: ...e prop on the individual BProgressBar
sub-components (see the [Multiple Bars](#multiple-bars...
(EN_COMPOUNDS_SUB_COMPONENTS)
[misspelling] ~28-~28: This word is normally spelled as one.
Context: ...he default slot within a BProgressBar
sub-component, or by using the label
property on `B...
(EN_COMPOUNDS_SUB_COMPONENT)
[misspelling] ~70-~70: This word is normally spelled as one.
Context: ...e bars Include multiple BProgressBar
sub-components in a BProgress
component to build a h...
(EN_COMPOUNDS_SUB_COMPONENTS)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (39)
apps/docs/src/data/components/progress.data.ts (19)
3-3
: Adopt DRY by importing common prop helpers
Great addition ofbuildCommonProps
andpick
to centralize and reuse common prop metadata instead of repeating throughout multiple components.
12-16
: Clarifyanimated
behavior
The new description clearly explains that settinganimated
also appliesstriped
, which will help users understand the side effect.
20-22
: Documentheight
override
Good detail on how to override the default height using any valid CSS unit.
26-27
: Specifymax
prop purpose
The description “Set the maximum value” concisely conveys the intent of themax
prop.
30-31
: Explainprecision
rounding
Showing that this controls the number of decimal places will help avoid confusion.
35-36
: DetailshowProgress
output
Clear explanation that this toggles percentage display.
40-41
: ClarifyshowValue
display
Explicitly stating it shows the raw value improves discoverability of the feature.
45-47
: Definestriped
styling
Good to note this prop simply enables the striped background.
50-52
: Describevalue
control
The description “The current value of the progress bar” is straightforward and helpful.
53-53
: Integrate common visual props
The spread of['bgVariant','textVariant','variant']
from common props is an excellent DRY improvement—keeps docs consistent and maintainable.
71-73
: Enhanceanimated
description in BProgressBar
Consistent with the parent component, noting thestriped
side‐effect here is very helpful.
76-78
: Document explicitlabel
override
Clear guidance for when and how to use thelabel
prop.
81-83
: Clarifymax
usage in BProgressBar
Matching themax
description with the top‐level component keeps behavior expectations aligned.
86-88
: Explain decimal precision
Specifying default of0
and its effect on rounding is great for users.
91-93
: DetailshowProgress
toggle
Good to mirror the BProgress semantics here for consistency.
96-98
: Clarify raw value display
Reiterating thatshowValue
shows the raw number is helpful and consistent.
101-103
: Define striped style
This matches the top‐level component’s description—pleasant consistency.
106-108
: Describe barvalue
prop
Clear and aligned with the parent component.
109-109
: Apply common visual props to BProgressBar
Great use ofpick(buildCommonProps(), ...)
to keep bar‐specific props in sync with the main component.apps/docs/src/docs/components/demo/ProgressHeight.vue (1)
3-4
: Simple height demo is clear and concise
This component effectively demonstrates varying heights onBProgress
. Assuming global registration ofBProgress
, no additional imports are needed.apps/docs/src/docs/components/demo/ProgressBackgrounds.vue (1)
3-6
: Background variant showcase is spot on
Nicely illustrates the differentvariant
options with consistent spacing.apps/docs/src/docs/components/demo/ProgressAnimated.vue (1)
3-6
: Animated and striped demo is correct
Demonstrates combinedstriped
+animated
props across variants well.apps/docs/src/docs/components/demo/ProgressBasic.vue (1)
3-7
: Basic progress states rendered properly
Clear progression from 0% to 100% with proper spacing—exactly what the basic demo needs.apps/docs/src/docs/components/demo/ProgressStriped.vue (1)
1-9
: All set for striped demo
TheProgressStriped.vue
component correctly demonstrates striped progress bars with appropriate variants and spacing. Region markers and markup are consistent with project conventions.apps/docs/src/docs/components/demo/ProgressWidth.vue (1)
1-11
: Width demo is correct
TheProgressWidth.vue
component effectively showcases default and custom width classes. Template structure and region markers are consistent.apps/docs/src/docs/components/demo/ProgressLabels.vue (1)
1-15
: Label display demo looks good
ProgressLabels.vue
accurately demonstrates value and progress label options with precision control. Markup and props usage are clear and consistent.apps/docs/src/docs/components/demo/ProgressMultipleBars.vue (1)
1-9
: Multiple bars demo is correct
ProgressMultipleBars.vue
properly uses a parentBProgress
withBProgressBar
children to illustrate segmented bars. Structure and region tags are in line with other demos.apps/docs/src/docs/components/progress.md (12)
12-12
: Demo embed for Basic Usage looks good
The<<< DEMO ./demo/ProgressBasic.vue
directive correctly references the standalone demo component.
24-24
: Demo embed for Labels section looks good
The<<< DEMO ./demo/ProgressLabels.vue
directive is properly configured.
30-30
: Demo embed for Custom Labels looks good
The<<< DEMO ./demo/ProgressCustomLabels.vue
directive correctly references the demo.
32-32
: Width section header placement is correct
Reordering “Width” before “Height” matches the logical flow of props.
38-38
: Demo embed for Width looks good
The<<< DEMO ./demo/ProgressWidth.vue
directive is correctly set.
44-44
: Demo embed for Height looks good
The<<< DEMO ./demo/ProgressHeight.vue
directive is properly referenced.
50-50
: Demo embed for Backgrounds looks good
The<<< DEMO ./demo/ProgressBackgrounds.vue
directive is correct.
52-52
: Striped Background header is clear
Moving and renaming this section improves discoverability of the striped variant.
56-56
: Demo embed for Striped Background looks good
The<<< DEMO ./demo/ProgressStriped.vue
directive is correctly configured.
62-62
: Demo embed for Animated Background looks good
The<<< DEMO ./demo/ProgressAnimated.vue
directive is properly referenced.
64-66
: Animated info note is accurate
The note thatanimated
impliesstriped
is clear and helpful.
72-72
: Demo embed for Multiple Bars looks good
The<<< DEMO ./demo/ProgressMultipleBars.vue
directive correctly references the multi-bar demo.
* upstream/main: chore: release main (bootstrap-vue-next#2690) docs(BProgress): Parity pass (bootstrap-vue-next#2689) fix(BTableSimple): fixed and nobordercollapse to work fixes bootstrap-vue-next#2685 docs: fix incorrect references and missed script sections (bootstrap-vue-next#2686) docs: implement on this page expand/collapse with useScrollspy (bootstrap-vue-next#2679) chore: release main (bootstrap-vue-next#2683) feat(BTable): implement 'fixed' and 'noBorderCollapse' props (bootstrap-vue-next#2681) chore: release main (bootstrap-vue-next#2678) Update package.json fix(BFormSelect): prevent options with label from being treated as groups (bootstrap-vue-next#2666) fix: patch regression issue in bootstrap-vue-next#2665 (bootstrap-vue-next#2670) Update release-main.yaml chore: release main (bootstrap-vue-next#2660) chore: update depencies fix(BTabs): corrent classes on ssr (bootstrap-vue-next#2664) Changes to public composables (bootstrap-vue-next#2425) docs(BTable): parity pass (bootstrap-vue-next#2669)
commit 2a9e30b Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Thu May 15 18:24:07 2025 +0300 doc data commit 08c89fd Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Thu May 15 17:57:29 2025 +0300 feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place commit 90b578d Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Wed May 14 11:39:42 2025 +0300 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. commit dc85d94 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun May 11 09:53:25 2025 -0500 chore: release main (bootstrap-vue-next#2690) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 070cb8c Author: David W. Gray <dwgray67@hotmail.com> Date: Sun May 11 07:52:30 2025 -0700 docs(BProgress): Parity pass (bootstrap-vue-next#2689) commit c61f532 Author: Thierry Blind <tbl0605@gmail.com> Date: Sun May 11 16:52:14 2025 +0200 fix(BTableSimple): fixed and nobordercollapse to work fixes bootstrap-vue-next#2685 commit beae36f Author: David W. Gray <dwgray67@hotmail.com> Date: Sun May 11 07:43:58 2025 -0700 docs: fix incorrect references and missed script sections (bootstrap-vue-next#2686) commit 34432d9 Author: David W. Gray <dwgray67@hotmail.com> Date: Sun May 11 07:42:02 2025 -0700 docs: implement on this page expand/collapse with useScrollspy (bootstrap-vue-next#2679) commit ce869f0 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed May 7 11:16:08 2025 -0500 chore: release main (bootstrap-vue-next#2683) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 9486276 Author: Mohamed Nasri <51300752+mhn147@users.noreply.github.com> Date: Wed May 7 09:44:38 2025 -0600 feat(BTable): implement 'fixed' and 'noBorderCollapse' props (bootstrap-vue-next#2681) commit a4a9294 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon May 5 09:16:09 2025 -0500 chore: release main (bootstrap-vue-next#2678) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 0165e94 Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Mon May 5 16:24:04 2025 +0300 Update package.json commit c1645a9 Author: Rajitha <rajithaeye@gmail.com> Date: Wed Apr 30 23:49:23 2025 +0530 fix(BFormSelect): prevent options with label from being treated as groups (bootstrap-vue-next#2666) commit 59ddc39 Author: Thierry Blind <tbl0605@gmail.com> Date: Wed Apr 30 20:17:34 2025 +0200 fix: patch regression issue in bootstrap-vue-next#2665 (bootstrap-vue-next#2670) commit d82091b Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Wed Apr 30 06:01:10 2025 +0300 Update release-main.yaml commit 31cb4bf Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed Apr 30 04:51:31 2025 +0300 chore: release main (bootstrap-vue-next#2660) Co-Authored-By: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 6733770 Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Wed Apr 30 05:15:02 2025 +0300 chore: update depencies commit 2b37c18 Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Wed Apr 30 04:36:46 2025 +0300 fix(BTabs): corrent classes on ssr (bootstrap-vue-next#2664) fix(BTabs): corrent classes on ssr fix(BTabs): fix another recursion error commit 99718eb Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Wed Apr 30 04:20:00 2025 +0300 Changes to public composables (bootstrap-vue-next#2425) feat(BAlert)!: make act like toast, useShowHide. feat(useShowHide): create triggerRegistry for adding external triggers (like in vBToggle) fix: type popoverController fix(useShowHide): focustrap off at the begining of leave, pass down the trigger to other hide emits. fix(vBToggle): keep track of targets fix(BPopover)!: change prop content to body to align with other components fix(BTooltip)!: change prop content to body to align with other components feat(usePopoverController): allow more options fix(vBToggle): find late components, ie. inside ClientOnly fix(useModalController)!: move props to main level, add slots feat(usePopoverController): add slots feat(useToastController)!: remove props obj, the parameters are flat now. Add slots, rename pos -> position feat(useShowHide): show returns a promise, resolve on show or hide. feat(useToggle): toggle any show/hide component feat!: controller composables functions return promise, with chainable functions feat(useModalController): add support for using syntax in ts feat(BModal): add okClass and cancelClass to add classes to the buttons. feat(useModalController)!: change of api, check the docs fix: inline functional style to show toast,modal and dropdown feat(useToggle): add trigger to promise resolve on hide. fix(BCarousel): fix v-for updates commit 340edfd Author: David W. Gray <dwgray67@hotmail.com> Date: Mon Apr 28 18:39:44 2025 -0700 docs(BTable): parity pass (bootstrap-vue-next#2669) commit 4dd6c89 Author: Jukka Raimovaara <roska@mentalhouse.fi> Date: Mon Apr 28 22:46:31 2025 +0300 fix(BDropdown): don't calulcate the position when dropdown is not shown.
Describe the PR
BProgress
andBProgressBar
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:
CHANGELOG
is 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
New Features
Documentation