Get rid of Bootstrap style imports

[valerybugakov]

Problem statement

We depend on Bootstrap styles in our global styles a lot. But we don't plan to move forward with Bootstrap because we're working on the Wildcard design system. To ease the transition to our styles and gain more control over visual changes, we want to move Bootstrap styles that we need into our codebase and eventually drop Bootstrap dependency.

Success criteria

1. All bootstrap CSS rules that we need are moved into our codebase.
2. The bootstrap package is removed from the monorepo dependencies.

Linked issues

• Bootstrap removal
  • Get rid of Bootstrap style imports global-styles/list-group.scss #29252
  • Get rid of Bootstrap style imports client/branded/src/global-styles/nav.scss #29253
  • remove Bootstrap style import @import 'bootstrap/scss/progress #29355
  • remove Bootstrap style import @import 'bootstrap/scss/button-group' #29356
  • remove bootstrap style import @import 'bootstrap/scss/forms #30279
  • remove bootstrap style import @import 'bootstrap/scss/custom-forms #30280
  • remove bootstrap style import @import 'bootstrap/scss/input-group' #30281
  • remove bootstrap style import @import 'bootstrap/scss/tables #31574
  • Migrate from the reactstrap Form component to Form from the branded package #32438
  • Drop ListGroupItem and ListGroupItem reactstrap imports #32439
  • extract bootstrap style import @import 'bootstrap/scss/grid #32458
  • Pull reactstrap Tooltip implementation into the codebase #32819
  • reactstrap Dropdown migration to Wildcard components #32820
  • Extract bootstrap style import @import 'bootstrap/scss/popover' #37324
  • Extract bootstrap style import @import 'bootstrap/scss/type' #37325
  • Extract bootstrap style import @import 'bootstrap/scss/buttons' #37914
  • Extract bootstrap style import @import 'bootstrap/scss/reboot.scss' #40293
  • Extract bootstrap style import @import 'bootstrap/scss/variables' #40294
  • Extract bootstrap style import @import 'bootstrap/scss/function', @import 'bootstrap/scss/mixins' #40295
  • Extract bootstrap style import @import 'bootstrap/scss/utilities' #40296
• Post removal clean up
  • Update documentation to reflect bootstrap removal #41397
  • Remove redundant bootstrap SCSS variables  #41398
  • Replace SCSS mixins with PostCSS functions  #41399

Implementation details

Let's start with these SCSS files and create a separate PR for each one:

1. client/branded/src/global-styles/list-group.scss
2. client/branded/src/global-styles/nav.scss

Notes:

1. We want to migrate away from SCSS variables to CSS variables when we bring Bootstrap styles to our codebase.
   • Some Bootstrap SCSS variables redefined on our side are located here: client/branded/src/global-styles/index.scss. Keep that in mind while migrating to CSS variables.
2. We don't need to bring all styles defined in the imported Bootstrap package. Check what styles do we use in the codebase first.

Time estimate

• Pull requests with ~450 lines changed should take 6 hours at maximum. Ping the reviewer in the spec pull request if time-consuming changes are required.
• Split the work into multiple pull requests if the total diff is bigger than 450 lines of code.

/cc @taylorsperry @muratsu

[gitstart-app]

Here is the GitStart Ticket for this issue: https://app.gitstart.com/clients/sourcegraph/tickets/SG-29200

[valerybugakov]

@gitstart-sourcegraph, let's also remove the following imports and copy CSS rules that we need to our CSS files:

1. @import 'bootstrap/scss/progress';
2. @import 'bootstrap/scss/button-group';

Feel free to create a separate issue for each import.

[gitstart-sourcegraph]

Hi @valerybugakov here are some bootstrap imports on codebase we could work on as part of this issue, kindly take a look.

• Button @import 'bootstrap/scss/buttons'
• Forms @import 'bootstrap/scss/forms'
• Custom Forms @import 'bootstrap/scss/custom-forms
• Input Group @import 'bootstrap/scss/input-group'
• Dropdown @import 'bootstrap/scss/dropdown'
• Popover @import 'bootstrap/scss/popover'

[valerybugakov]

• Button @import 'bootstrap/scss/buttons' — web: codemod <Element className="btn" />occurrences #30096
• Forms @import 'bootstrap/scss/forms'
• Custom Forms @import 'bootstrap/scss/custom-forms
• Input Group @import 'bootstrap/scss/input-group'
• Dropdown @import 'bootstrap/scss/dropdown' — Wildcard V2: <Popover /> Manual migration #27695
• Popover @import 'bootstrap/scss/popover' — Wildcard V2: <Popover /> Manual migration #27695

@gitstart-sourcegraph, let's create issues and spec PRs for selected items from the list above.

[gitstart-sourcegraph]

As discussed with @valerybugakov
would proceed with extraction of @import 'bootstrap/scss/tables'

[valerybugakov]

@gitstart-sourcegraph, let's also extract @import 'bootstrap/scss/grid. The file is pretty small: ETA 2-3h.

[valerybugakov]

@gitstart-sourcegraph, created an issue to unblock bootstrap removal from the VSCode package. Let me know if you have questions!

[valerybugakov]

@gitstart-sourcegraph, after addressing feedback here, could you take a look at importing the remaining Bootstrap imports into our codebase? We want to bring utility classes and mixins used by our codebase. Please drop classes and mixins if they are not used anywhere.

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/utilities';

Let's split this work into multiple PRs – one PR per import removed.