Remove btn-grouped class from button.scss

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Implementation Guide: (from epic) The reason we need to remove buttons.scss is that these classes are available globally and can interact with design tokens and the Pajamas Design System in unpredictable ways. In some cases classes like "btn" are overwriting old bootstrap util classes and styling them the "GitLab" way, this is a deprecated way of working and we should now use Pajama compliant components instead.

There are 4 main strategies for removals, these are in order of preference:

  1. If it is possible to migrate the non-pajama compliant components that use the class in question so that there are no more references to the class, then we should do so and completely remove the class. An example of this is !160890 (diffs) A further example of replacing a deprecated class with the Pajamas compliant option is !161198 (diffs)
  2. If the class can be replaced with Tailwind util classes easily, that is if the class affects only a few CSS attributes, then we should abandon the use of the shared class in favour of multiple tailwind util classes. For example, in !167649 (merged)
  3. If the class is only being used in 1 or 2 places, it is better to move the rules into that specific place so that the code only affects that specific component. This ensures that there will be no future usage of the shared class, and it also quarantines the styling to only affect the components that rely on it.
  4. For classes that are widely used and complex:
    1. First we should do an analysis of every CSS attribute set in the class to ensure that the attribute in question is overridden by the equivalent GitLab-UI class. An example of this can be found in !163027 (merged) . This is a very important step that is designed to avoid situation like the regression that this MR caused: link to the regression: !167831 (comment 2144824130)
    2. If we can be sure that every time this class is used it also has the GitLab-UI class that provides the styling we are going to remove, then it is ok to remove it, as was done in !163027 (merged)
    3. If from the previous step there is a rule that does not have a GitLab-UI class equivalent, like for example the .btn svg rule in !167831 (comment 2144824130), then it is recommended to do some research on it's use. One suggestion for this kind of research comes from @leipert who suggested we can add a custom CSS attribute to the class that has no effect but can be tracked using sentry to observe any instances of it's use. With these finding we can use this same process starting from the first step to ensure that these elements will have the styling they require.
    4. The finally it is worth considering keeping the class and renaming it so that is clear that the class is deprecated and quarantined. For example, we could rename btn to deprecated-quarantined-btn. for example #474646 (closed)

This strategy was developed in part by following the conversation on this MR: !167649 (comment 2137005168)

Edited by 🤖 GitLab Bot 🤖