Support picker with custom item rendering (#47)

* Support picker with custom dropdown * Absolutely position checkboxes * v0.3.4
Arize-ai · Feb 24, 2022 · d1896fc · d1896fc
1 parent 8594223
commit d1896fc
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.3",
+  "version": "0.3.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/listbox/ListBoxOption.tsx b/src/listbox/ListBoxOption.tsx
@@ -99,9 +99,15 @@ export function ListBoxOption<T>(props: OptionProps<T>) {
           css={css`
             display: flex;
             justify-content: space-between;
-            align-items: center;
+            align-items: flex-start;
             color: ${theme.textColors.white90};
             padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
+            position: relative;
+            & > .ac-icon-wrap {
+              position: absolute;
+              top: ${theme.spacing.padding8}px;
+              right: ${theme.spacing.padding8}px;
+            }
           `}
         >
           {contents}

diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx
@@ -145,7 +145,9 @@ function Picker<T extends object>(
     </Popover>
   );
 
-  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
+  let contents = state.selectedItem
+    ? state.selectedItem.textValue || state.selectedItem.rendered
+    : placeholder;
   if (typeof contents === 'string') {
     contents = (
       <Text
@@ -160,7 +162,7 @@ function Picker<T extends object>(
 
   return (
     <div
-      className={classNames('ac-dropdown', {
+      className={classNames('ac-dropdown ac-dropdown--picker', {
         'is-disabled': isDisabled,
       })}
       ref={domRef}

diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Item, Picker, PickerProps, Text } from '../src';
 import { Provider } from '../src';
+import { css } from '@emotion/core';
+
+const itemWithDescriptionCSS = css`
+  display: flex;
+  flex-direction: column;
+`;
 
 const meta: Meta = {
   title: 'Picker',
@@ -81,3 +87,78 @@ const WithAddon: Story<PickerProps<string>> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const withAddon = WithAddon.bind({});
+
+const Gallery: Story<void> = () => {
+  const [frequency, setFrequency] = React.useState<string>('rarely');
+  return (
+    <Provider>
+      <div
+        css={css`
+          & > * + * {
+            margin-top: 16px;
+          }
+        `}
+      >
+        <Picker
+          addonBefore={'Frequency'}
+          selectedKey={frequency}
+          onSelectionChange={selected => setFrequency(selected as string)}
+        >
+          <Item key="rarely">Rarely</Item>
+          <Item key="sometimes">Sometimes</Item>
+          <Item key="always">Always</Item>
+        </Picker>
+        <Picker
+          selectedKey={frequency}
+          onSelectionChange={selected => setFrequency(selected as string)}
+        >
+          <Item key="rarely">Rarely</Item>
+          <Item key="sometimes">Sometimes</Item>
+          <Item key="always">Always</Item>
+        </Picker>
+        <div
+          css={css`
+            .ac-dropdown--picker,
+            .ac-dropdown--picker .ac-dropdown-button {
+              width: 250px;
+            }
+          `}
+        >
+          <Picker
+            selectedKey={frequency}
+            onSelectionChange={selected => setFrequency(selected as string)}
+          >
+            <Item key="rarely" textValue="Rarely">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Rarely</Text>
+                <Text color="white70" textSize="small">
+                  Only run on occasion
+                </Text>
+              </div>
+            </Item>
+            <Item key="sometimes" textValue="Sometimes">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Sometimes</Text>
+                <Text color="white70" textSize="small">
+                  Run once a day so that things are synchronized on the daily
+                </Text>
+              </div>
+            </Item>
+            <Item key="always" textValue="Always">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Always</Text>
+                <Text color="white70" textSize="small">
+                  Run continuously so that everything stays up to date
+                </Text>
+              </div>
+            </Item>
+          </Picker>
+        </div>
+      </div>
+    </Provider>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const gallery = Gallery.bind({});