From b9644312176d947155b75cf06e52cda6d85e493c Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 06:19:11 -0500 Subject: [PATCH 01/10] use reakit overlay --- .../src/app/components/Overlay/Overlay.tsx | 81 ++++++++----------- 1 file changed, 33 insertions(+), 48 deletions(-) diff --git a/packages/app/src/app/components/Overlay/Overlay.tsx b/packages/app/src/app/components/Overlay/Overlay.tsx index 279c16e5c40..a216e023346 100644 --- a/packages/app/src/app/components/Overlay/Overlay.tsx +++ b/packages/app/src/app/components/Overlay/Overlay.tsx @@ -1,6 +1,7 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { useTransition, animated, config } from 'react-spring'; import track from '@codesandbox/common/lib/utils/analytics'; +import { usePopoverState, Popover, PopoverDisclosure } from 'reakit/Popover'; import { Container } from './elements'; interface IOverlayProps { @@ -8,7 +9,7 @@ interface IOverlayProps { isOpen?: boolean; onOpen?: () => void; onClose?: () => void; - children: (handleOpen: () => void) => React.ReactNode; + children: (any) => React.ReactNode; content: React.ComponentType; noHeightAnimation?: boolean; } @@ -22,47 +23,27 @@ export const Overlay: React.FC = ({ content: Content, noHeightAnimation = true, }) => { - const [open, setOpen] = useState(isOpen === undefined ? false : isOpen); const isControlled = isOpen !== undefined; - const openState = isControlled ? isOpen : open; - - useEffect(() => { - const handleClick = (e: MouseEvent) => { - if (!e.defaultPrevented && openState) { - if (event) { - track(`Closed ${event}`); - } - if (isControlled) { - if (onClose) { - onClose(); - } - } else { - setOpen(false); - } - } - }; - - document.addEventListener('mousedown', handleClick); - - return () => { - document.removeEventListener('mousedown', handleClick); - }; - }, [isOpen, onClose, event, openState, isControlled]); + const popover = usePopoverState({ + visible: isControlled ? isOpen : undefined, + placement: 'bottom-end', + }); - const handleOpen = () => { - if (event) { + React.useEffect(() => { + if (popover.visible) { track(`Opened ${event}`); - } - if (isControlled) { - if (onOpen) { + if (isControlled) { onOpen(); } } else { - setOpen(true); + track(`Closed ${event}`); + if (isControlled) { + onClose(); + } } - }; + }, [event, isControlled, onClose, onOpen, popover.visible]); - const transitions = useTransition(openState, null, { + const transitions = useTransition(popover.visible, null, { config: config.default, from: { ...(noHeightAnimation ? {} : { height: 0 }), @@ -79,19 +60,23 @@ export const Overlay: React.FC = ({ }); return ( - e.preventDefault()}> - {children(handleOpen)} - {transitions.map(({ item, props }, i) => - item ? ( - // eslint-disable-next-line - - - - ) : ( - // eslint-disable-next-line - - ) - )} + + + {props => children(props)} + + + {transitions.map(({ item, props }, i) => + item ? ( + // eslint-disable-next-line + + + + ) : ( + // eslint-disable-next-line + + ) + )} + ); }; From 2955f4543ac9998bea1b4635666936bc383ac7ab Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 06:19:38 -0500 Subject: [PATCH 02/10] drop button styles --- .../Content/Sandboxes/Filters/FilterOptions/elements.ts | 4 +++- .../Content/Sandboxes/Filters/SortOptions/elements.js | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts index f0c1e5edc8f..782b024179c 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts @@ -20,7 +20,9 @@ export const Container = styled.div<{ hideFilters: boolean }>` export const TemplatesName = styled.span` transition: 0.3s ease color; color: rgba(255, 255, 255, 0.8); - + appearance: none !important; + background: none; + border: none; cursor: pointer; &:hover { diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js index 78c20925bf3..557d338e714 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js @@ -12,6 +12,9 @@ export const OptionContainer = styled.a` text-decoration: none; cursor: pointer; font-weight: 600; + appearance: none; + background: none; + border: none; &:last-child { margin-bottom: 0; @@ -69,7 +72,9 @@ export const OverlayContainer = styled.div` export const OrderName = styled.span` transition: 0.3s ease color; color: rgba(255, 255, 255, 0.8); - + appearance: none !important; + background: none; + border: none; cursor: pointer; &:hover { From ace90f301d5469846cbd45ed8e5d88fa35a06dd9 Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 06:20:10 -0500 Subject: [PATCH 03/10] update document usage --- .../Content/Sandboxes/Filters/FilterOptions/index.tsx | 4 ++-- .../Content/Sandboxes/Filters/SortOptions/Option.js | 7 ++++++- .../Content/Sandboxes/Filters/SortOptions/index.js | 4 ++-- packages/app/src/app/pages/common/Navigation/index.tsx | 4 ++-- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx index 3bb808a2d43..728ee9d9aaa 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx @@ -85,10 +85,10 @@ const FilterOptionsComponent = ({ return ( - {open => ( + {buttonProps => ( Showing{' '} - {templateMessage} + {templateMessage} )} diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js index e263e7e12de..a2c6360959d 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js @@ -5,7 +5,12 @@ import { IconContainer, OptionContainer } from './elements'; export default ({ name, field, currentField, setField }) => { const selected = field === currentField; return ( - setField(field)} selected={selected}> + setField(field)} + selected={selected} + aria-selected={selected} + > {selected && } {name} ); diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js index 284a647f635..dd8c55f2f3d 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js @@ -63,10 +63,10 @@ class SortOptionsComponent extends React.Component { return ( - {open => ( + {buttonProps => ( Sort by{' '} - {FIELD_TO_NAME[field]} + {FIELD_TO_NAME[field]} - {open => ( + {buttonProps => ( {({ store }) => ( 0 ? 'Show Notifications' From 0ad250b5c1a4f1fe75879b445ecfaff8fe8c6efe Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 07:06:20 -0500 Subject: [PATCH 04/10] use menu and migrate to ts --- packages/app/package.json | 2 +- .../src/app/components/Overlay/Overlay.tsx | 2 +- .../Filters/FilterOptions/Option.tsx | 2 + .../Sandboxes/Filters/FilterOptions/index.tsx | 117 ++++++++++-------- .../SortOptions/{Option.js => Option.tsx} | 3 +- .../SortOptions/{elements.js => elements.tsx} | 4 +- .../Sandboxes/Filters/SortOptions/index.js | 87 ------------- .../Sandboxes/Filters/SortOptions/index.tsx | 96 ++++++++++++++ .../vscode-textmate/package-lock.json | 11 +- yarn.lock | 38 +++--- 10 files changed, 197 insertions(+), 165 deletions(-) rename packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/{Option.js => Option.tsx} (81%) rename packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/{elements.js => elements.tsx} (93%) delete mode 100644 packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js create mode 100644 packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx diff --git a/packages/app/package.json b/packages/app/package.json index 4594332f634..d1b9add5702 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -193,7 +193,7 @@ "react-tagsinput": "^3.19.0", "react-use": "^9.7.2", "react-virtualized": "^9.19.1", - "reakit": "^1.0.0-beta.4", + "reakit": "^1.0.0-beta.8", "rebound": "^0.1.0", "resize-observer-polyfill": "^1.5.1", "sha1": "^1.1.1", diff --git a/packages/app/src/app/components/Overlay/Overlay.tsx b/packages/app/src/app/components/Overlay/Overlay.tsx index a216e023346..87c0d070f21 100644 --- a/packages/app/src/app/components/Overlay/Overlay.tsx +++ b/packages/app/src/app/components/Overlay/Overlay.tsx @@ -9,7 +9,7 @@ interface IOverlayProps { isOpen?: boolean; onOpen?: () => void; onClose?: () => void; - children: (any) => React.ReactNode; + children: (props: any) => React.ReactNode; content: React.ComponentType; noHeightAnimation?: boolean; } diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx index f8129833f6a..d00d13cd5e4 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx @@ -18,10 +18,12 @@ export const Option = ({ niceName, selected, toggleTemplate, + ...props }: Props) => { const checkBoxName = `${id}-checkbox`; return ( { e.preventDefault(); diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx index 728ee9d9aaa..c1448e5f157 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { orderBy } from 'lodash-es'; import { inject, observer } from 'app/componentConnectors'; -import { Overlay as OverlayComponent } from 'app/components/Overlay'; +import { useMenuState, Menu, MenuItem, MenuDisclosure } from 'reakit/Menu'; + import { Container, TemplatesName, OverlayContainer } from './elements'; import { Option } from './Option'; import { ITemplate } from '../../types'; @@ -19,6 +20,9 @@ const FilterOptionsComponent = ({ store, signals, }: Props) => { + const menu = useMenuState({ + placement: 'bottom-end', + }); const toggleTemplate = (name: string, select: boolean) => select ? signals.dashboard.blacklistedTemplateRemoved({ @@ -32,48 +36,6 @@ const FilterOptionsComponent = ({ store.dashboard.isTemplateSelected(t.id) ); - const Overlay = () => ( - - {possibleTemplates.length > 0 ? ( - <> - {orderBy(possibleTemplates, 'niceName').map(template => { - const selected = store.dashboard.isTemplateSelected(template.id); - - return ( - - ); - const { blacklistedTemplates } = store.dashboard.filters; const templateCount = possibleTemplates.length - blacklistedTemplates.length; const templateMessage = @@ -84,14 +46,67 @@ const FilterOptionsComponent = ({ }`; return ( - - {buttonProps => ( - - Showing{' '} - {templateMessage} - - )} - + <> + + {disclosureProps => ( + + Showing{' '} + + {templateMessage} + + + )} + + + + {possibleTemplates.length > 0 ? ( + <> + {orderBy(possibleTemplates, 'niceName').map(template => { + const selected = store.dashboard.isTemplateSelected( + template.id + ); + + return ( + + ); + })} + + { + if (!allSelected) { + signals.dashboard.blacklistedTemplatesCleared(); + } else { + signals.dashboard.blacklistedTemplatesChanged({ + templates: possibleTemplates.map(t => t.id) || [], + }); + } + }} + selected={allSelected} + color="#374140" + id="all" + style={{ marginTop: '1rem' }} + niceName="Select All" + /> + + ) : ( + + No environments found + + )} + + + ); }; diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx similarity index 81% rename from packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js rename to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx index a2c6360959d..a76db6edb87 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Check from 'react-icons/lib/md/check'; import { IconContainer, OptionContainer } from './elements'; -export default ({ name, field, currentField, setField }) => { +export const Option = ({ name, field, currentField, setField, ...props }) => { const selected = field === currentField; return ( { onClick={() => setField(field)} selected={selected} aria-selected={selected} + {...props} > {selected && } {name} diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.tsx similarity index 93% rename from packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js rename to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.tsx index 557d338e714..ba8d499f9de 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.tsx @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components'; import ArrowDown from 'react-icons/lib/md/arrow-downward'; -export const OptionContainer = styled.a` +export const OptionContainer = styled.a<{ selected: boolean }>` transition: 0.3s ease color; display: flex; vertical-align: middle; @@ -36,7 +36,7 @@ export const IconContainer = styled.div` margin-right: 0.5rem; `; -export const Container = styled.div` +export const Container = styled.div<{ hideOrder: boolean }>` transition: 0.3s ease opacity; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js deleted file mode 100644 index dd8c55f2f3d..00000000000 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import { inject, observer } from 'app/componentConnectors'; -import { Overlay as OverlayComponent } from 'app/components/Overlay'; -import Option from './Option'; -import { Container, Arrow, OrderName, OverlayContainer } from './elements'; - -const FIELD_TO_NAME = { - updatedAt: 'Last Modified', - insertedAt: 'Last Created', - title: 'Name', -}; - -class SortOptionsComponent extends React.Component { - toggleSort = e => { - e.preventDefault(); - const { orderBy } = this.props.store.dashboard; - const { orderByChanged } = this.props.signals.dashboard; - orderByChanged({ - orderBy: { - order: orderBy.order === 'asc' ? 'desc' : 'asc', - field: orderBy.field, - }, - }); - }; - - setField = (field: string) => { - const { orderBy } = this.props.store.dashboard; - const { orderByChanged } = this.props.signals.dashboard; - orderByChanged({ - orderBy: { - order: orderBy.order, - field, - }, - }); - }; - - render() { - const { field, order } = this.props.store.dashboard.orderBy; - const { hideOrder } = this.props; - - const Overlay = () => ( - - - ); - - return ( - - {buttonProps => ( - - Sort by{' '} - {FIELD_TO_NAME[field]} - - - )} - - ); - } -} - -export const SortOptions = inject('store', 'signals')( - observer(SortOptionsComponent) -); diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx new file mode 100644 index 00000000000..d6307dcfc1a --- /dev/null +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import { useOvermind } from 'app/overmind'; +import { useMenuState, Menu, MenuItem, MenuDisclosure } from 'reakit/Menu'; +import { Option } from './Option'; +import { Container, Arrow, OrderName, OverlayContainer } from './elements'; + +const FIELD_TO_NAME = { + updatedAt: 'Last Modified', + insertedAt: 'Last Created', + title: 'Name', +}; + +export const SortOptions: React.FC<{ hideOrder: boolean }> = ({ + hideOrder, +}) => { + const { + state: { + dashboard: { + orderBy: { field, order }, + }, + }, + actions: { + dashboard: { orderByChanged }, + }, + } = useOvermind(); + const menu = useMenuState(); + + const toggleSort = e => { + e.preventDefault(); + + orderByChanged({ + orderBy: { + order: order === 'asc' ? 'desc' : 'asc', + field, + }, + }); + }; + + const setField = (fieldToSet: string) => { + orderByChanged({ + orderBy: { + order, + field: fieldToSet, + }, + }); + }; + + return ( + <> + + {buttonProps => ( + + Sort by{' '} + {FIELD_TO_NAME[field]} + + + )} + + + + + + + + + + ); +}; diff --git a/standalone-packages/vscode-textmate/package-lock.json b/standalone-packages/vscode-textmate/package-lock.json index 6d8e3f0d114..587f2306d91 100644 --- a/standalone-packages/vscode-textmate/package-lock.json +++ b/standalone-packages/vscode-textmate/package-lock.json @@ -57,6 +57,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -1287,7 +1288,8 @@ "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true + "dev": true, + "optional": true }, "is-builtin-module": { "version": "1.0.0", @@ -1511,6 +1513,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -1714,7 +1717,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "loose-envify": { "version": "1.3.1", @@ -2433,7 +2437,8 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", - "dev": true + "dev": true, + "optional": true }, "repeating": { "version": "2.0.1", diff --git a/yarn.lock b/yarn.lock index 476bbf3a3aa..ae408dedbf2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6742,10 +6742,10 @@ body-parser@1.19.0: raw-body "2.4.0" type-is "~1.6.17" -body-scroll-lock@^2.6.1: - version "2.6.3" - resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.3.tgz#2b9311ef3120696d8ad5c30503f684803ade1606" - integrity sha512-yQ2VWJasZSWMawwi4bLJ9akbMRTpnS2tZWDEFuOiihwCdl+qNovuUwisnBKIdMk+99wG9FlqW6uZ9+GjKn8ARA== +body-scroll-lock@^2.6.4: + version "2.6.4" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94" + integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw== bonjour@^3.5.0: version "3.5.0" @@ -21888,25 +21888,25 @@ readdirp@^2.0.0, readdirp@^2.2.1: micromatch "^3.1.10" readable-stream "^2.0.2" -reakit-system@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.6.2.tgz#beff67eb645c07d7196579eae9db3cfc49f6eae8" - integrity sha512-qlWb/n+SmQwIR+SdmbTt94xnNA5kE2utTXuaaGDDVojL1LYKcKzcnl5Jxo2qJyXmyfgxglxuBF7ofDj/QoZGZg== +reakit-system@^0.6.5: + version "0.6.5" + resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.6.5.tgz#d14d46fe380f6ca452e94f1bdf59fd1840846c37" + integrity sha512-KcCI8NA/HZTUkO3nmOv8bfR8XKzahydeK1gjlcYpXxf/AAvjb2wLoiXDXN05tMJsZq9euj+BB6vrpuvpS82qtA== -reakit-utils@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.6.2.tgz#ac8143a349ce53e1eb6e0d408d6cd97d22b0ef2c" - integrity sha512-sEVOBN6ykA/FcDtc0hXxB4UiqP4Vns4n7tbcmPd9Qu1Ih61BeJV8DbRZyeOqqZzjL/lPOdiBr2jtakPtfSJDDw== +reakit-utils@^0.6.5: + version "0.6.5" + resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.6.5.tgz#fd71ce80ac278f3da5c73cb1fc8233b52079438e" + integrity sha512-EJz8A3reLagPuVXRXBd6wZ32J4EtoKnWLcu0bnJuJ0TruIV00GPRLNJCCCYJBnkXiE9rPr+OijX4U57wZIzULQ== -reakit@^1.0.0-beta.4: - version "1.0.0-beta.4" - resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.0.0-beta.4.tgz#08c65c4d97ed5244d2f521c73808578280c0fe16" - integrity sha512-IfnL6/DGlg8L1DAOqlySW9xsqKEM8Fr4Xvoti8O4NwEG72519PAhvJiSAWfbFEAOJzNXEDoA4UIC3buAcyRpJw== +reakit@^1.0.0-beta.8: + version "1.0.0-beta.8" + resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.0.0-beta.8.tgz#c00974be4c7cb37e0b934e1278a4fe4d62e991df" + integrity sha512-ePfumMrM75+OgCT96dHuC05SknEIF0PwdvzDFK7V9gvHpLCR5nn4WqyO8A+kLVAe9SHOQMVH0MPv7kMV90kyyg== dependencies: - body-scroll-lock "^2.6.1" + body-scroll-lock "^2.6.4" popper.js "^1.15.0" - reakit-system "^0.6.2" - reakit-utils "^0.6.2" + reakit-system "^0.6.5" + reakit-utils "^0.6.5" realpath-native@^1.1.0: version "1.1.0" From 366294d41e97d550c268b4360808f51c415ada39 Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 07:20:38 -0500 Subject: [PATCH 05/10] add focus menuitems --- .../Filters/FilterOptions/Option.tsx | 54 ++++++++----------- .../Sandboxes/Filters/SortOptions/Option.tsx | 40 ++++++++------ .../Sandboxes/Filters/SortOptions/index.tsx | 1 + 3 files changed, 49 insertions(+), 46 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx index d00d13cd5e4..8fcab655d27 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx @@ -11,34 +11,26 @@ interface Props { toggleTemplate: (name: string, selected: boolean) => void; } -export const Option = ({ - color, - id, - style, - niceName, - selected, - toggleTemplate, - ...props -}: Props) => { - const checkBoxName = `${id}-checkbox`; - return ( - { - e.preventDefault(); - toggleTemplate(id, !selected); - }} - onMouseDown={e => { - e.preventDefault(); - }} - style={style} - > - - - {niceName} - - ); -}; +export const Option = React.forwardRef( + ({ color, id, style, niceName, selected, toggleTemplate, ...props }, ref) => { + const checkBoxName = `${id}-checkbox`; + return ( + { + e.preventDefault(); + toggleTemplate(id, !selected); + }} + style={style} + > + + + {niceName} + + ); + } +); diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx index a76db6edb87..300c83c3c08 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx @@ -1,18 +1,28 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import Check from 'react-icons/lib/md/check'; import { IconContainer, OptionContainer } from './elements'; -export const Option = ({ name, field, currentField, setField, ...props }) => { - const selected = field === currentField; - return ( - setField(field)} - selected={selected} - aria-selected={selected} - {...props} - > - {selected && } {name} - - ); -}; +interface Props { + name: string; + field: string; + currentField: string; + setField: (fieldToSet: string) => void; +} + +export const Option = forwardRef( + ({ name, field, currentField, setField, ...props }, ref) => { + const selected = field === currentField; + return ( + setField(field)} + selected={selected} + aria-selected={selected} + > + {selected && } {name} + + ); + } +); diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx index d6307dcfc1a..259faa88df1 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx @@ -53,6 +53,7 @@ export const SortOptions: React.FC<{ hideOrder: boolean }> = ({ Sort by{' '} {FIELD_TO_NAME[field]} Date: Fri, 4 Oct 2019 07:50:09 -0500 Subject: [PATCH 06/10] fix list elements --- .../Sandboxes/Filters/FilterOptions/Option.tsx | 18 +++++++++++++----- .../Filters/FilterOptions/elements.ts | 3 ++- .../Sandboxes/Filters/FilterOptions/index.tsx | 9 ++++++--- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx index 8fcab655d27..38b79cc199f 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx @@ -16,6 +16,7 @@ export const Option = React.forwardRef( const checkBoxName = `${id}-checkbox`; return ( ( toggleTemplate(id, !selected); }} style={style} + aria-label={`${checkBoxName} ${selected ? 'selected' : ''}`} > - - - {niceName} + + + {niceName} + ); } diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts index 782b024179c..66cb2ad73e4 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts @@ -48,12 +48,13 @@ export const OverlayContainer = styled.div` background-color: ${props => props.theme.background}; `; -export const OptionName = styled.span` +export const OptionName = styled.label` font-weight: 600; cursor: pointer; `; export const Option = styled.div<{ selected: boolean }>` + list-style: none; transition: 0.3s ease color; cursor: pointer; color: ${props => diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx index c1448e5f157..f49dc7da6c6 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx @@ -50,15 +50,18 @@ const FilterOptionsComponent = ({ {disclosureProps => ( - Showing{' '} - + Showing + {templateMessage} )} - + {possibleTemplates.length > 0 ? ( <> {orderBy(possibleTemplates, 'niceName').map(template => { From 9094a13eb0f6bc18b8329746df6cc2d1f56a6b58 Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 07:54:28 -0500 Subject: [PATCH 07/10] fix typos --- .../Sandboxes/Filters/FilterOptions/index.tsx | 2 +- .../Sandboxes/Filters/SortOptions/Option.tsx | 4 ++-- .../Sandboxes/Filters/SortOptions/index.tsx | 15 +++++++++++---- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx index f49dc7da6c6..787dda61e17 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx @@ -53,7 +53,7 @@ const FilterOptionsComponent = ({ Showing {templateMessage} diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx index 300c83c3c08..f6c138d6eb5 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx @@ -14,12 +14,12 @@ export const Option = forwardRef( const selected = field === currentField; return ( setField(field)} selected={selected} - aria-selected={selected} + aria-label={`${name} ${selected ? 'selected' : ''}`} > {selected && } {name} diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx index 259faa88df1..3c1940e0a1f 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx @@ -50,10 +50,17 @@ export const SortOptions: React.FC<{ hideOrder: boolean }> = ({ {buttonProps => ( - Sort by{' '} - {FIELD_TO_NAME[field]} + Sort by + + {FIELD_TO_NAME[field]}{' '} + = ({ )} - + Date: Fri, 4 Oct 2019 07:58:01 -0500 Subject: [PATCH 08/10] new sandbox haspopup --- .../Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx | 2 +- packages/app/src/app/pages/common/Navigation/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx index f6c138d6eb5..ea01308e17d 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx @@ -14,7 +14,7 @@ export const Option = forwardRef( const selected = field === currentField; return ( setField(field)} diff --git a/packages/app/src/app/pages/common/Navigation/index.tsx b/packages/app/src/app/pages/common/Navigation/index.tsx index 348b2f9255e..43cc85a9e8d 100644 --- a/packages/app/src/app/pages/common/Navigation/index.tsx +++ b/packages/app/src/app/pages/common/Navigation/index.tsx @@ -146,6 +146,7 @@ export const Navigation = inject('store', 'signals')( modal: 'newSandbox', }) } + aria-haspopup="true" aria-label="New Sandbox" > From d3ce83c12dc76c21fef2a04876bda6905bc1061c Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Fri, 4 Oct 2019 08:01:42 -0500 Subject: [PATCH 09/10] add disclosure type --- packages/app/src/app/components/Overlay/Overlay.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/components/Overlay/Overlay.tsx b/packages/app/src/app/components/Overlay/Overlay.tsx index 87c0d070f21..484ee6d8c3a 100644 --- a/packages/app/src/app/components/Overlay/Overlay.tsx +++ b/packages/app/src/app/components/Overlay/Overlay.tsx @@ -1,7 +1,12 @@ import React from 'react'; import { useTransition, animated, config } from 'react-spring'; import track from '@codesandbox/common/lib/utils/analytics'; -import { usePopoverState, Popover, PopoverDisclosure } from 'reakit/Popover'; +import { + usePopoverState, + Popover, + PopoverDisclosure, + PopoverDisclosureHTMLProps, +} from 'reakit/Popover'; import { Container } from './elements'; interface IOverlayProps { @@ -9,7 +14,7 @@ interface IOverlayProps { isOpen?: boolean; onOpen?: () => void; onClose?: () => void; - children: (props: any) => React.ReactNode; + children: (props: PopoverDisclosureHTMLProps) => React.ReactNode; content: React.ComponentType; noHeightAnimation?: boolean; } From 08f8ea45e3f3d4805d9e7095fa4f36469de798b8 Mon Sep 17 00:00:00 2001 From: Yeison Daza Date: Mon, 7 Oct 2019 15:46:06 -0500 Subject: [PATCH 10/10] fix typecheck --- .../Sandboxes/Filters/FilterOptions/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx index 7abcc308f28..1df2a909aac 100644 --- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx @@ -32,7 +32,7 @@ const FilterOptionsComponent: React.FC = ({ }, }, } = useOvermind(); - + const toggleTemplate = (name: string, select: boolean) => select ? blacklistedTemplateRemoved({ @@ -44,7 +44,7 @@ const FilterOptionsComponent: React.FC = ({ const allSelected = possibleTemplates.every(t => isTemplateSelected(t.id)); - const { blacklistedTemplates } = store.dashboard.filters; + const { blacklistedTemplates } = filters; const templateCount = possibleTemplates.length - blacklistedTemplates.length; const templateMessage = @@ -74,9 +74,7 @@ const FilterOptionsComponent: React.FC = ({ {possibleTemplates.length > 0 ? ( <> {orderBy(possibleTemplates, 'niceName').map(template => { - const selected = store.dashboard.isTemplateSelected( - template.id - ); + const selected = isTemplateSelected(template.id); return ( = ({ {...menu} toggleTemplate={() => { if (!allSelected) { - signals.dashboard.blacklistedTemplatesCleared(); + blacklistedTemplatesCleared(); } else { - signals.dashboard.blacklistedTemplatesChanged({ + blacklistedTemplatesChanged({ templates: possibleTemplates.map(t => t.id) || [], }); }