fix(Dropdown): Adjust disabled opacity

Royal-Navy · Jul 13, 2022 · 1c00d88 · 1c00d88
1 parent 32ff6cf
commit 1c00d88
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx
@@ -36,19 +36,28 @@ const StyledWrapper = styled.div`
   height: 15rem;
 `
 
-export const Default: ComponentStory<typeof Dropdown> = (props) => {
+const Template: ComponentStory<typeof Dropdown> = (props) => {
   return (
     <StyledWrapper>
       <Dropdown {...props} />
     </StyledWrapper>
   )
 }
 
+export const Default = Template.bind({})
 Default.args = {
   options,
   label: 'Example label',
 }
 
+export const Open = Template.bind({})
+Open.storyName = 'Open'
+Open.args = {
+  options,
+  initialIsOpen: true,
+  label: 'Example label',
+}
+
 const iconOptions = options.map((option) => ({
   ...option,
   icon: <IconAnchor />,

diff --git a/packages/react-component-library/src/components/Dropdown/Dropdown.tsx b/packages/react-component-library/src/components/Dropdown/Dropdown.tsx
@@ -12,6 +12,10 @@ import { DropdownPlaceholder } from './DropdownPlaceholder'
 const { color, shadow, spacing } = selectors
 
 export interface DropdownProps {
+  /**
+   * Toggles whether the list is open on first render.
+   */
+  initialIsOpen?: boolean
   /**
    * Handler called when an option is clicked.
    */
@@ -138,6 +142,7 @@ const StyledSelect = styled(Select)`
 `
 
 export const Dropdown: React.FC<DropdownProps> = ({
+  initialIsOpen,
   onSelect,
   options,
   label,
@@ -154,6 +159,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
       classNamePrefix="rn-dropdown"
       components={{ DropdownIndicator, Placeholder: DropdownPlaceholder }}
       controlShouldRenderValue={false}
+      defaultMenuIsOpen={initialIsOpen}
       formatOptionLabel={DropdownLabel}
       isSearchable={false}
       options={options}

diff --git a/packages/react-component-library/src/components/Dropdown/partials/StyledLabel.tsx b/packages/react-component-library/src/components/Dropdown/partials/StyledLabel.tsx
@@ -13,6 +13,7 @@ export const StyledLabel = styled.div<StyledLabelProps>`
   ${({ isDisabled }) =>
     isDisabled &&
     css`
-      opacity: 0.25;
+      cursor: not-allowed;
+      opacity: 0.7;
     `}
 `