feat: make dropdown component public

build-tools/utils/custom-css-properties.js

@@ -51,6 +51,10 @@ const customCssPropertiesList = [
   // Dropdown Custom Properties
   'dropdownDefaultMaxWidth',
   'dropdownDefaultMinWidth',
+  // Dropdown Style API
+  'dropdownContentBorderColor',
+  'dropdownContentBorderWidth',
+  'dropdownContentBorderRadius',
   // Modal Custom Properties
   'modalCustomWidth',
   'modalCustomHeight',

build-tools/utils/pluralize.js

@@ -28,6 +28,7 @@ const pluralizationMap = {
   DatePicker: 'DatePickers',
   DateRangePicker: 'DateRangePickers',
   Drawer: 'Drawers',
+  Dropdown: 'Dropdowns',
   ErrorBoundary: 'ErrorBoundaries',
   ExpandableSection: 'ExpandableSections',
   FileDropzone: 'FileDropzones',

pages/calendar/simple.page.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import Calendar from '~components/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import i18nStrings from './i18n-strings';
 

pages/date-range-picker/month-calendar-permutations.page.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import Box from '~components/box';
 import Calendar, { DateRangePickerCalendarProps } from '~components/date-range-picker/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';

pages/date-range-picker/year-calendar-permutations.page.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import Box from '~components/box';
 import Calendar, { DateRangePickerCalendarProps } from '~components/date-range-picker/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';

pages/dropdown/common.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown';
 import Modal from '~components/modal';
 
 export function SampleDropdown({ id, children }: { id: string; children: React.ReactNode }) {

pages/dropdown/fixed-container.page.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useState } from 'react';
 
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ScreenshotArea from '../utils/screenshot-area';
 import ListContent from './list-content';

pages/dropdown/focus-trap.page.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import { useState } from 'react';
 
 import { Box, Button, SpaceBetween } from '~components';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import AppContext, { AppContextType } from '../app/app-context';
 

pages/dropdown/interior-fitting.page.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/interior-stretch-height.page.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/interior-with-wrapping.page.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/list-with-sticky-item.page.tsx

@@ -4,7 +4,7 @@ import React, { useContext, useRef, useState } from 'react';
 
 import Box from '~components/box';
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown';
 import { DropdownOption } from '~components/internal/components/option/interfaces';
 import PlainList from '~components/select/parts/plain-list';
 import VirtualList from '~components/select/parts/virtual-list';

pages/dropdown/min-width.page.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/positioning.page.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/prefer-center.page.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 

pages/dropdown/simple.page.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown';
 
 import ListContent from './list-content';
 

pages/dropdown/style-permutations.page.tsx

@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Button from '~components/button';
+import Dropdown from '~components/dropdown';
+import SpaceBetween from '~components/space-between';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import ListContent from './list-content';
+
+export default function DropdownStylePermutations() {
+  const [open1, setOpen1] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  return (
+    <ScreenshotArea>
+      <h1>Dropdown Style Permutations</h1>
+      <SpaceBetween direction="vertical" size="xl">
+        <section>
+          <h2>Custom background, no border</h2>
+          <Dropdown
+            trigger={<Button onClick={() => setOpen1(!open1)}>Open dropdown</Button>}
+            open={open1}
+            onOutsideClick={() => setOpen1(false)}
+            minWidth={400}
+            content={<ListContent n={5} />}
+            style={{
+              dropdown: {
+                background: 'light-dark(#edf4ff, #001a66)',
+                borderWidth: '0px',
+              },
+            }}
+          />
+        </section>
+
+        <section>
+          <h2>Custom background with styled border</h2>
+          <Dropdown
+            trigger={<Button onClick={() => setOpen2(!open2)}>Open dropdown</Button>}
+            open={open2}
+            onOutsideClick={() => setOpen2(false)}
+            minWidth={400}
+            content={<ListContent n={5} />}
+            style={{
+              dropdown: {
+                background: 'light-dark(#edfbff, #005566)',
+                borderColor: 'light-dark(#408080, #66ccdd)',
+                borderRadius: '0px',
+                borderWidth: '2px',
+              },
+            }}
+          />
+        </section>
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+}

pages/options-list/simple.page.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useCallback, useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown';
 import OptionsList from '~components/internal/components/options-list';
 
 interface ExtendedWindow extends Window {