From 520a056c1334a44672a0bcd2bcc329c78d8ce19c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 14 Dec 2021 15:25:54 -0500 Subject: [PATCH 01/17] adds Select component and stories --- src/Select.tsx | 47 ++++++++++++++ src/_TextInputWrapper.tsx | 2 +- src/index.ts | 1 + src/stories/Select.stories.tsx | 110 +++++++++++++++++++++++++++++++++ 4 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/Select.tsx create mode 100644 src/stories/Select.stories.tsx diff --git a/src/Select.tsx b/src/Select.tsx new file mode 100644 index 00000000000..d2df23cc614 --- /dev/null +++ b/src/Select.tsx @@ -0,0 +1,47 @@ +import React, {RefObject} from 'react' +import styled from 'styled-components' +import {get} from './constants' +import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' + +export type SelectProps = Omit, 'multiple' | 'size'> & + Omit + +const StyledSelect = styled(TextInputWrapper)` + appearance: none; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=); + background-repeat: no-repeat; + background-position: right 4px center; + background-size: 16px; + padding-right: 20px; + cursor: pointer; + + /* colors the select input's placeholder text */ + &:invalid { + color: ${get('colors.fg.subtle')}; + } +` + +const Select: React.FC = ({as: _as, ref, children, placeholder, required, ...rest}) => ( + } + required={required || Boolean(placeholder)} + {...rest} + > + {placeholder ? ( + + ) : null} + {children} + +) + +const Option: React.FC & {value: string}> = props =>