Skip to content
This repository has been archived by the owner on Oct 6, 2020. It is now read-only.

Commit

Permalink
fix(Dropdown): Configure <Dropdown.Trigger/> style (#33)
Browse files Browse the repository at this point in the history
  • Loading branch information
cehsu authored and kylealwyn committed Mar 22, 2019
1 parent f518a08 commit a0dce63
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 7 deletions.
9 changes: 5 additions & 4 deletions src/Dropdown/Dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ export const PLACEMENT_TRANSITION_ORIGINS = {

const ARROW_KEYS = ['ArrowUp', 'ArrowDown'];

const TriggerWrapper = createComponent({
const Trigger = createComponent({
name: 'DropdownTrigger',
style: css`
display: inline-block;
align-self: flex-start;
display: inline-block;
outline: none;
`,
});
Expand All @@ -47,6 +47,7 @@ export default function Dropdown({
render,
children,
portalNode,
styles = {},
...menuProps
}) {
const popperRef = useRef();
Expand Down Expand Up @@ -114,7 +115,7 @@ export default function Dropdown({
<Manager>
<Reference>
{({ ref: triggerRef }) => (
<TriggerWrapper ref={triggerRef} tabIndex={-1}>
<Trigger style={styles.Trigger} ref={triggerRef} tabIndex={-1}>
{React.cloneElement(trigger, {
role: trigger.role || 'button',
tabIndex: trigger.tabIndex || 0,
Expand All @@ -127,7 +128,7 @@ export default function Dropdown({
...(trigger.style || {}),
},
})}
</TriggerWrapper>
</Trigger>
)}
</Reference>

Expand Down
23 changes: 22 additions & 1 deletion src/Dropdown/Dropdown.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useState } from 'react';
import { Playground, PropsTable } from 'docz';
import Dropdown, { PLACEMENT_TRANSITION_ORIGINS } from './Dropdown';
import Icon from '../Icon';
import Flex from '../Flex';
import RadioGroup from '../Form/RadioGroup';
import Button from '../Button';

Expand All @@ -17,7 +18,7 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos
## Props
<PropsTable of={Dropdown} />

## Example
## Examples

<Playground>
{() => {
Expand Down Expand Up @@ -92,6 +93,26 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos
<Dropdown.Footer>Footer</Dropdown.Footer>
</Dropdown>
</div>

<Flex flex={1}>
<Dropdown
width={250}
placement="top"
styles={{ Trigger: { display: 'flex', flex: 1 } }}
trigger={(<Flex flex={1} justifyContent="space-between">
<Button style={{ width: `100%`}}>Open Flex Dropdown</Button>
</Flex>)}>
<Dropdown.Header title="Dropdown" />

<Dropdown.Body>
<Dropdown.SectionTitle>Section One</Dropdown.SectionTitle>
<Dropdown.Item>Item One</Dropdown.Item>
<Dropdown.Item>Item Two</Dropdown.Item>
</Dropdown.Body>

<Dropdown.Footer>Footer</Dropdown.Footer>
</Dropdown>
</Flex>
</Button.Group>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions src/Dropdown/__snapshots__/Dropdown.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
exports[`<Dropdown /> only renders trigger on mount 1`] = `
<DocumentFragment>
.c0 {
display: inline-block;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
display: inline-block;
outline: none;
}
Expand Down Expand Up @@ -67,10 +67,10 @@ exports[`<Dropdown /> only renders trigger on mount 1`] = `
exports[`<Dropdown /> opens menu with focus when trigger is clicked 1`] = `
<DocumentFragment>
.c0 {
display: inline-block;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
display: inline-block;
outline: none;
}
Expand Down

0 comments on commit a0dce63

Please sign in to comment.