Skip to content

Wildcard: `<Modal />`

Administrator requested to merge tr/wildcard-modal into main

Created by: umpox

Closes https://github.com/sourcegraph/sourcegraph/issues/27697

Description

Implements a simple styled wrapper around our @reach/dialog Modal implementations. These are used extensively across the webapp so this component will help align our styles and ensure code is not repeated.

image

Reasoning for renaming Dialog to Modal:

  1. Modal is a more descriptive name for what this actually is. Dialog is how it can be used.
  2. The vast majority of our files that wrap Dialog are actually named as Modal. See here
  3. IMO there is a clearer distinction between Popover and Modal rather than Popover and Dialog. The latter confused me as Popovers can appear quite similar to a typical dialog

Migration

The code migration will be done as part of https://github.com/sourcegraph/sourcegraph/issues/27698

It should look something like this:

  1. Move all @reach/dialog imports to Wildcard imports. Update props and remove any unnecessary styles.
  2. Move all reactstrap Modal imports to Wildcard imports and update as necessary
  3. Migrate all usage of modal-body | modal-X classes to Modal Wildcard component.
  4. Remove Bootstrap import for modal styles

Merge request reports