#29 dropdown

src/dropdown/DropdownButton.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { css } from '@emotion/core';
+import { classNames } from '../utils/classNames';
+import { mergeProps } from '@react-aria/utils';
+import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { FocusableRef } from '../types';
+import { useFocusableRef } from '../utils/useDOMRef';
+import theme from '../theme';
+import { Text } from '../content';
+import { Icon, ArrowIosDownwardOutline } from '../icon';
+
+interface DropdownButtonProps {
+  /** Whether the button is disabled. */
+  isDisabled?: boolean;
+  /** The content to display in the button. */
+  children?: ReactNode;
+  style?: CSSProperties;
+}
+
+/**
+ * A button that displays
+ * @param props
+ * @param ref
+ * @returns
+ */
+function DropdownButton(
+  props: DropdownButtonProps,
+  ref: FocusableRef<HTMLButtonElement>
+) {
+  let domRef = useFocusableRef(ref);
+  const { isDisabled, children, style, ...otherProps } = props;
+  const { buttonProps, isPressed } = useButton(props, domRef);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+
+  return (
+    <button
+      {...mergeProps(buttonProps, hoverProps, otherProps)}
+      ref={domRef}
+      className={classNames('ac-dropdown-button', {
+        'is-active': isPressed,
+        'is-disabled': isDisabled,
+        'is-hovered': isHovered,
+      })}
+      style={style}
+      css={css`
+        background-color: ${theme.colors.gray500};
+        border: none;
+        border-radius: 4px;
+        color: ${theme.textColors.white90};
+        display: flex;
+        align-items: center;
+        padding: 0;
+        .ac-dropdown-button__text {
+          margin: ${theme.spacing.margin8}px ${theme.spacing.margin16}px;
+          display: inline-block;
+        }
+        .ac-icon-wrap {
+          margin-right: ${theme.spacing.margin8}px;
+        }
+      `}
+    >
+      <Text className="ac-dropdown-button__text" textSize="medium">
+        {children}
+      </Text>
+      <Icon svg={<ArrowIosDownwardOutline />} />
+    </button>
+  );
+}
+
+let _DropdownButton = React.forwardRef(DropdownButton);
+export { _DropdownButton as DropdownButton };

src/dropdown/DropdownMenu.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+
+interface DropdownMenuProps {
+  children: ReactNode;
+  /**
+   * whether or not there is inner padding on the dropdown
+   * @default true
+   */
+  isPadded: boolean;
+}
+
+export function DropdownMenu({ children, isPadded = true }: DropdownMenuProps) {
+  return (
+    <div
+      css={css`
+        background-color: ${theme.colors.gray500};
+        border-radius: 4px;
+        color: ${theme.textColors.white90};
+        padding: ${isPadded ? theme.spacing.padding8 : 0}px;
+      `}
+    >
+      {children}
+    </div>
+  );
+}

src/dropdown/index.tsx

@@ -0,0 +1,8 @@
+import {
+  PopoverTrigger as DropdownTrigger,
+  PopoverTriggerProps as DropdownTriggerProps,
+} from '../popover';
+export * from './DropdownButton';
+export * from './DropdownMenu';
+
+export { DropdownTrigger, DropdownTriggerProps };

src/theme.ts

@@ -16,7 +16,6 @@ const grayColors = {
   gray500: '#2D353E',
   gray400: '#39424D',
   gray200: '#646A70', // disabled text
-  // 2D3845
 };
 
 const arizeColors = {

stories/Dropdown.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { css } from '@emotion/core';
+import {
+  DropdownTrigger,
+  DropdownTriggerProps,
+  DropdownButton,
+  DropdownMenu,
+} from '../src/dropdown';
+import { Provider } from '../src';
+import { Meta, Story } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+
+const meta: Meta = {
+  title: 'DropdownTrigger',
+  component: DropdownTrigger,
+  decorators: [withDesign],
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+        default: 'Label',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=1238%3A2417',
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story<DropdownTriggerProps> = args => (
+  <Provider>
+    <DropdownTrigger {...args}>
+      <DropdownButton>Button here</DropdownButton>
+      <DropdownMenu
+        css={css`
+          color: white;
+        `}
+      >
+        menu goes here
+      </DropdownMenu>
+    </DropdownTrigger>
+  </Provider>
+);
+
+export const Default = Template.bind({});