Skip to content

Commit

Permalink
Feat/dropdown patterns (#1125)
Browse files Browse the repository at this point in the history 
* fix(dropdown): match figma spacing

* feat(dropdown): refactor into atomic parts

* feat(dropdown): custom stories showing pattern using refactor

* feat(dropdown): pr changes

* feat(actionmenu): remove focus on mount

BREAKING CHANGE: remove focus on mount from actionmenu

* docs(site): update actionmenu and dropdown
  • Loading branch information
@EdwardIrby
EdwardIrby committed Sep 9, 2020
1 parent 7d506e2 commit f2c348c
Show file tree
Hide file tree
Showing 27 changed files with 1,950 additions and 997 deletions.
347 changes: 172 additions & 175 deletions packages/actionmenu/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Blur onMount example 1`] = `
<div
data-css-12kxz7c=""
>
<ul
data-css-rls1dj=""
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menu"
>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
One item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
Two item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
Three item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
</ul>
</div>
`;

exports[`Storyshots customized styles item style 1`] = `
<div
data-css-12kxz7c=""
Expand Down Expand Up @@ -795,6 +700,101 @@ exports[`Storyshots dividers sandwich 1`] = `
</div>
`;

exports[`Storyshots focus onMount example 1`] = `
<div
data-css-12kxz7c=""
>
<ul
data-css-rls1dj=""
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menu"
>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
One item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
Two item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<div
data-css-fxdh11=""
>
Three item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
</ul>
</div>
`;

exports[`Storyshots link a w/ href 1`] = `
<div
data-css-12kxz7c=""
Expand Down Expand Up @@ -5152,102 +5152,99 @@ exports[`Storyshots with Position BelowRight 1`] = `
}
}
>
<div
<ul
data-css-rls1dj=""
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menu"
style={
Object {
"position": "absolute",
}
}
>
<ul
data-css-rls1dj=""
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menu"
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
<div
data-css-fxdh11=""
>
<div
data-css-fxdh11=""
>
One item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
One item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
<div
data-css-fxdh11=""
>
<div
data-css-fxdh11=""
>
Two item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
Two item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
role="menu"
/>
</li>
<li
data-css-1vvjdfo=""
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
role="none"
tabIndex="-1"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
>
<a
aria-haspopup={false}
data-css-1v7ok0h=""
onClick={[Function]}
role="menuitem"
<div
data-css-fxdh11=""
>
<div
data-css-fxdh11=""
>
Three item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
</ul>
</div>
Three item
</div>
</a>
<ul
aria-expanded={false}
data-css-kfdt74=""
onKeyDown={[Function]}
role="menu"
/>
</li>
</ul>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit f2c348c

Please sign in to comment.