feat(BaseDropdown): Adds "right-start" placement

This change allows a new placement option for dropdowns
so they can support "dropright" placements.

This option allows building UIs such as the pipeline
job groups.

src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -162,6 +162,27 @@ describe('base dropdown', () => {
         );
       });
 
+      it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
+        buildWrapper({ placement: 'right-start' });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'right-start',
+            strategy: 'absolute',
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+              }),
+            ],
+          }
+        );
+      });
+
       it("passes custom offset to Floating UI's middleware", async () => {
         const customOffset = { mainAxis: 10, crossAxis: 40 };
         buildWrapper({

src/utils/constants.js

@@ -146,6 +146,7 @@ export const dropdownVariantOptions = {
 };
 
 export const dropdownPlacements = {
+  'right-start': 'right-start',
   left: 'bottom-start',
   center: 'bottom',
   right: 'bottom-end',
@@ -159,6 +160,7 @@ const dropdownAnyCornerPlacement = [
 ];
 
 export const dropdownAllowedAutoPlacements = {
+  'right-start': ['right-start', 'right-end', 'left-start', 'left-end'],
   left: dropdownAnyCornerPlacement,
   center: [dropdownPlacements.center, 'top'],
   right: dropdownAnyCornerPlacement,