Remove Bootstrap dependencies - Talend/ui GitHub Wiki

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 it globally from repository and all packages
• 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.

• Remove variables ( see https://github.com/Talend/ui/blob/master/packages/theme/src/theme/_variables.scss )
• Remove classes like form-control / form-group / control-label when possible but it's hard to track all of them

2. 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