Skip to content

Remove Bootstrap dependencies

Jump to bottom
Gbacc edited this page Jan 30, 2024 · 6 revisions

Overview

As we build more and more components with our own stylings, tokens and design system own components and guidelines, we want to get rid of bootstrap dependencies that are hard to maintain, outdated (using v2), and that follows other patterns in term of styling and usability.

What is actually used

  • @talend/bootstrap-theme that is used primarily fo styling (class and sass variables)
  • @talend/react-bootstrap that is a library of react components used in combination with bootstrap own components

Todo list

  • Remove @talend/react-bootstrap and @talend/bootstrap-theme from all apps
    • TMC
    • TDP ?
    • TDS ?
    • ...
  • Remove @talend/react-bootstrap from all packages on UI and UI-EE
    • react-containers
    • react-forms
    • react-faceted-search
    • react-components
      • remove dialog
      • remove tabs
      • remove overlay
      • remove buttons
    • ui-ee sharing
    • ui-ee datagrid
  • Remove @talend/bootstrap-theme from all packages on UI and UI-EE
    • react-containers
    • react-faceted-search
    • react-forms
    • react-components
    • ui-ee
    • remove it globally from repository, webpack build and storybooks

Roadmap and next big steps

1. We need to remove all usage of bootstrap in our own apps, either components or scss styles

There might be some edge cases where it's painful to remove part of an app that is using UI/UI-EE packages that still use bootstrap. Also imports to those packages may still be needed for everything to work well before we can totally remove them.

2. We want react-forms package to not depend on bootstrap anymore

As described before, there is some part of an app that still rely on bootstrap classes and styles because of react-form package that uses bootstrap form components from react-components. This is a lot of effort to migrate all ui-form definitions to use components from design system so here is what need to be done

  • Audit what is really used in react-form package and remove extra stuff
  • Attach design system form when possible instead of form from react components
  • Adapt styling (class and variable) to not use anything from @talend/bootstrap-theme
  • Impact changes in child apps to get rid of remaining bootstrap styles on forms

3. Remove usage of bootstrap in react-components package and remove duplicates with the design system

Some components are heavily using react bootstrap components to work like tabs or modal and now can be replaced with duplicates from design system

  • Popover : used by OverlayTrigger in react-components and should be removed to use Tooltip from design system
  • Nav, NavItem, Tab : used in TabBar component from react-components and should be removed to use design system Tab
  • Modal : used by Dialog from react-components and should be deleted to use design system Modal
  • Button, ButtonGroup : used by Actions from react-components and should be replaced with all clickable from design system
Clone this wiki locally