## Summary Refactor the `makeProp()` function calls and `PROP_TYPE_*` constants from the vendored BootstrapVue codebase, replacing them with standard Vue 2 prop syntax. This is part of the broader [Remove BootstrapVue](https://gitlab.com/groups/gitlab-org/-/work_items/15178) effort. The `makeProp()` helper generates prop definition objects like `{ type: String, default: 'foo' }`, but this abstraction is unnecessary since Vue 2 natively supports this syntax. Removing it simplifies the code and reduces the dependency on BootstrapVue internals. ## The motivation The goal of this work item is to make the migration just a tiny bit easier when starting with a component. Is it not necessary for a component migration that `makeProp` has been refactored before. This is one way of making a small improvement quickly without committing to fully migrate a component ### Prior art [!5800](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5800) already refactors `makeProp()` out of all **mixins**. This issue tracks the remaining work for **components** and **utils**. ### What `makeProp()` does ```js // makeProp(type, default, validator) produces: makeProp(PROP_TYPE_STRING, 'foo') // => { type: String, default: 'foo' } makeProp(PROP_TYPE_BOOLEAN, false) // => { type: Boolean, default: false } makeProp(PROP_TYPE_OBJECT, {}) // => { type: Object, default: () => ({}) } ``` Each `makeProp()` call should be replaced with its equivalent standard Vue 2 prop definition object, and the `PROP_TYPE_*` constant imports should be replaced with native JavaScript constructors (`String`, `Boolean`, `Number`, `Array`, `Object`, `Function`, etc.). ### Special cases (non-trivial) The following three files use `makeProp()` inside **reducer functions** that dynamically generate props based on breakpoints. These are significantly more complex to refactor and may require intermediate solutions or can be left as-is for now: 1. **`components/form-group/form-group.js`** - Uses `getBreakpointsUpCached().reduce(...)` to dynamically generate `contentCols`, `labelAlign`, and `labelCols` props per breakpoint. Also uses a lazy getter pattern for props. 2. **`components/layout/col.js`** - Uses `breakpoints.reduce(...)` to dynamically generate col, offset, and order props per breakpoint. Also uses a lazy getter pattern for props. 3. **`utils/model.js`** - The `makeModelMixin()` function uses `makeProp()` internally to generate model props dynamically. This is a utility consumed by multiple components. It may be worth leaving `makeProp()` in the codebase for these three files and only refactoring it where it's trivial, or finding intermediate solutions (e.g., inline helper functions local to those files). --- ## Batched rollout plan ### ✅ Batch 1: Mixins Done in here: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5800 ### ✅ Batch 2: Simple components (few props, no spread/merge complexity) https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5820 Straightforward files with a small number of `makeProp()` calls and no dynamic prop generation: - `components/form/form.js` (4 props) - `components/form/form-text.js` (4 props) - `components/layout/form-row.js` (1 prop) - `components/table/tr.js` (1 prop) - `components/table/tbody.js` (2 props) - `components/table/thead.js` (1 prop) - `components/table/tfoot.js` (1 prop) - `components/table/td.js` (5 props) - `components/button/button-close.js` (4 props) - `components/dropdown/dropdown-text.js` (3 props) ### ✅ Batch 3: Medium components (more props, but still straightforward) https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5821 Files with more props but still using simple `makeProp()` patterns: - `components/button/button.js` (~8 props + spread from linkProps) - `components/dropdown/dropdown-item.js` (~3 props + spread from linkProps) - `components/tabs/tab.js` (~11 props) - ~~`components/toast/toaster.js` (4 props)~~ was already migrated away from BVue ### ✅ Batch 4: Large components (many props) Components with a large number of `makeProp()` calls. These are still mechanically straightforward but require more careful review due to volume: - `components/dropdown/dropdown.js` (~20 props): https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5827 - `components/tabs/tabs.js` (~20 props across navProps and main props): https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5828 - `components/modal/modal.js` (~35 props): https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5829 - ~~`components/toast/toast.js` (roughly 15 props)~~ was already migrated away from BVue - `components/tooltip/tooltip.js` (multiple props): https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/5832 ### ✅ Batch 5: Table helper mixins used by components These are component-level helper mixins in the table directory: - `components/table/helpers/mixin-filtering.js` (5 props) ### ✅ Batch 6: Special cases (non-trivial, needs investigation) These require deeper analysis and potentially intermediate solutions: - `components/form-group/form-group.js` - Dynamic breakpoint-based prop generation via reducers + lazy getter - `components/layout/col.js` - Dynamic breakpoint-based prop generation via reducers + lazy getter - `utils/model.js` - `makeModelMixin()` dynamically creates props; used by multiple components **Options for Batch 6:** 1. Leave `makeProp()` in the codebase solely for these three files 2. Create a local inline helper in each file that replaces `makeProp()` with the same logic but without the import 3. Fully inline the prop definitions (hardest for the dynamic/reducer cases) ## Follow up issues - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items/3409+ - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items/3412+ - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items/3417+