Skip to content

Commit bc20b47

Browse files
lindapaistelindapaiste
authored
Merge branch 'develop' into issue-#2923 
2 parents 1693492 + 2b99345 commit bc20b47

File tree

90 files changed

+3655
-2665
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+3655
-2665
lines changed

‎.storybook/decorator-theme.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { upperFirst } from 'lodash';
2+
import React from 'react';
3+
import styled, { ThemeProvider } from 'styled-components';
4+
import theme, { prop } from '../client/theme';
5+
6+
const PreviewArea = styled.div`
7+
background: ${prop('backgroundColor')};
8+
flex-grow: 1;
9+
padding: 2rem;
10+
& > h4 {
11+
margin-top: 0;
12+
color: ${prop('primaryTextColor')};
13+
}
14+
`;
15+
16+
const themeKeys = Object.keys(theme);
17+
18+
export const withThemeProvider = (Story, context) => {
19+
const setting = context.globals.theme;
20+
if (setting === 'all') {
21+
return (
22+
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
23+
{Object.keys(theme).map((themeName) => (
24+
<ThemeProvider theme={theme[themeName]} key={themeName}>
25+
<PreviewArea className={themeName}>
26+
<h4>{upperFirst(themeName)}</h4>
27+
<Story />
28+
</PreviewArea>
29+
</ThemeProvider>
30+
))}
31+
</div>
32+
);
33+
} else {
34+
const themeName = setting;
35+
return (
36+
<ThemeProvider theme={theme[themeName]}>
37+
<PreviewArea className={themeName}>
38+
<Story />
39+
</PreviewArea>
40+
</ThemeProvider>
41+
);
42+
}
43+
};
44+
45+
export const themeToolbarItem = {
46+
description: 'Global theme for components',
47+
defaultValue: 'all',
48+
toolbar: {
49+
title: 'Theme',
50+
icon: 'mirror',
51+
items: [...themeKeys, 'all']
52+
}
53+
};

‎.storybook/preview.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import { Provider } from 'react-redux';
33
import { MemoryRouter } from 'react-router';
44

5-
import ThemeProvider from '../client/modules/App/components/ThemeProvider';
65
import configureStore from '../client/store';
76
import '../client/i18n-test';
87
import '../client/styles/storybook.css'
8+
import { withThemeProvider, themeToolbarItem } from './decorator-theme';
99

1010
const initialState = window.__INITIAL_STATE__;
1111

@@ -21,5 +21,9 @@ export const decorators = [
2121
</MemoryRouter>
2222
</Provider>
2323
),
24-
]
24+
withThemeProvider
25+
];
2526

27+
export const globalTypes = {
28+
theme: themeToolbarItem
29+
};

‎README.md

+2-4
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
2929

3030
### How Do I Know My Issue or Pull Request is Getting Reviewed?
3131

32-
To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8).
32+
To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8).
3333

3434
Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
3535

@@ -38,9 +38,7 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
3838

3939
We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards:
4040

41-
2.9.3 PATCH Release: By November 17, 2023
42-
43-
2.10.0 MINOR Release: By December 15, 2023
41+
2.11.0 MINOR Release: By January 16, 2023
4442

4543
[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/).
4644

‎client/common/Button.jsx

+5-59
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const displays = {
2121
const StyledButton = styled.button`
2222
&&& {
2323
font-weight: bold;
24-
display: flex;
24+
display: ${({ display }) =>
25+
display === displays.inline ? 'inline-flex' : 'flex'};
2526
justify-content: center;
2627
align-items: center;
2728
@@ -107,57 +108,6 @@ const StyledInlineButton = styled.button`
107108
}
108109
`;
109110

110-
const StyledIconButton = styled.button`
111-
&&& {
112-
display: flex;
113-
justify-content: center;
114-
align-items: center;
115-
116-
width: ${remSize(32)}px;
117-
height: ${remSize(32)}px;
118-
text-decoration: none;
119-
120-
color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
121-
background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
122-
cursor: pointer;
123-
border: 1px solid transparent;
124-
border-radius: 50%;
125-
padding: ${remSize(8)} ${remSize(25)};
126-
line-height: 1;
127-
128-
&:hover:not(:disabled) {
129-
color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
130-
background-color: ${({ kind }) =>
131-
prop(`Button.${kind}.hover.background`)};
132-
133-
svg * {
134-
fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
135-
}
136-
}
137-
138-
&:active:not(:disabled) {
139-
color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
140-
background-color: ${({ kind }) =>
141-
prop(`Button.${kind}.active.background`)};
142-
143-
svg * {
144-
fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
145-
}
146-
}
147-
148-
&:disabled {
149-
color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
150-
background-color: ${({ kind }) =>
151-
prop(`Button.${kind}.disabled.background`)};
152-
cursor: not-allowed;
153-
}
154-
155-
> * + * {
156-
margin-left: ${remSize(8)};
157-
}
158-
}
159-
`;
160-
161111
/**
162112
* A Button performs an primary action
163113
*/
@@ -184,12 +134,8 @@ const Button = ({
184134
);
185135
let StyledComponent = StyledButton;
186136

187-
if (display === displays.inline) {
188-
StyledComponent = StyledInlineButton;
189-
}
190-
191137
if (iconOnly) {
192-
StyledComponent = StyledIconButton;
138+
StyledComponent = StyledInlineButton;
193139
}
194140

195141
if (href) {
@@ -265,7 +211,7 @@ Button.propTypes = {
265211
/**
266212
* The display type of the button—inline or block
267213
*/
268-
display: PropTypes.string,
214+
display: PropTypes.oneOf(Object.values(displays)),
269215
/**
270216
* SVG icon to place after child content
271217
*/
@@ -286,7 +232,7 @@ Button.propTypes = {
286232
* Specifying an href will use an <a> to link to the URL
287233
*/
288234
href: PropTypes.string,
289-
/*
235+
/**
290236
* An ARIA Label used for accessibility
291237
*/
292238
'aria-label': PropTypes.string,

‎client/common/IconButton.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const IconButton = (props) => {
1919
return (
2020
<ButtonWrapper
2121
iconBefore={icon && <Icon />}
22+
iconOnly
2223
display={Button.displays.inline}
2324
focusable="false"
2425
{...otherProps}

‎client/common/RouterTab.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { NavLink } from 'react-router-dom';
4+
5+
/**
6+
* Wraps the react-router `NavLink` with dashboard-header__tab styling.
7+
*/
8+
const Tab = ({ children, to }) => (
9+
<li className="dashboard-header__tab">
10+
<NavLink
11+
className="dashboard-header__tab__title"
12+
activeClassName="dashboard-header__tab--selected"
13+
to={{ pathname: to, state: { skipSavingPath: true } }}
14+
>
15+
{children}
16+
</NavLink>
17+
</li>
18+
);
19+
20+
Tab.propTypes = {
21+
children: PropTypes.string.isRequired,
22+
to: PropTypes.string.isRequired
23+
};
24+
25+
export default Tab;

‎client/modules/IDE/hooks/useKeyDownHandlers.js renamed to ‎client/common/useKeyDownHandlers.js

File renamed without changes.

‎client/common/useModalClose.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { useEffect, useRef } from 'react';
2+
import useKeyDownHandlers from './useKeyDownHandlers';
3+
4+
/**
5+
* Common logic for Modal, Overlay, etc.
6+
*
7+
* Pass in the `onClose` handler.
8+
*
9+
* Can optionally pass in a ref, in case the `onClose` function needs to use the ref.
10+
*
11+
* Calls the provided `onClose` function on:
12+
* - Press Escape key.
13+
* - Click outside the element.
14+
*
15+
* Returns a ref to attach to the outermost element of the modal.
16+
*
17+
* @param {() => void} onClose
18+
* @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
19+
* @return {React.MutableRefObject<HTMLElement | null>}
20+
*/
21+
export default function useModalClose(onClose, passedRef) {
22+
const createdRef = useRef(null);
23+
const modalRef = passedRef || createdRef;
24+
25+
useEffect(() => {
26+
modalRef.current?.focus();
27+
28+
function handleClick(e) {
29+
// ignore clicks on the component itself
30+
if (modalRef.current && !modalRef.current.contains(e.target)) {
31+
onClose?.();
32+
}
33+
}
34+
35+
document.addEventListener('click', handleClick, false);
36+
37+
return () => {
38+
document.removeEventListener('click', handleClick, false);
39+
};
40+
}, [onClose, modalRef]);
41+
42+
useKeyDownHandlers({ escape: onClose });
43+
44+
return modalRef;
45+
}

‎client/components/Dropdown.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled from 'styled-components';
44
import { remSize, prop } from '../theme';
55
import IconButton from '../common/IconButton';
66

7-
const DropdownWrapper = styled.ul`
7+
export const DropdownWrapper = styled.ul`
88
background-color: ${prop('Modal.background')};
99
border: 1px solid ${prop('Modal.border')};
1010
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
@@ -52,6 +52,7 @@ const DropdownWrapper = styled.ul`
5252
& button span,
5353
& a {
5454
padding: ${remSize(8)} ${remSize(16)};
55+
font-size: ${remSize(12)};
5556
}
5657
5758
* {

‎client/components/Dropdown/DropdownMenu.jsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import PropTypes from 'prop-types';
2+
import React, { forwardRef, useCallback, useRef, useState } from 'react';
3+
import useModalClose from '../../common/useModalClose';
4+
import DownArrowIcon from '../../images/down-filled-triangle.svg';
5+
import { DropdownWrapper } from '../Dropdown';
6+
7+
// TODO: enable arrow keys to navigate options from list
8+
9+
const DropdownMenu = forwardRef(
10+
(
11+
{ children, anchor, 'aria-label': ariaLabel, align, className, classes },
12+
ref
13+
) => {
14+
// Note: need to use a ref instead of a state to avoid stale closures.
15+
const focusedRef = useRef(false);
16+
17+
const [isOpen, setIsOpen] = useState(false);
18+
19+
const close = useCallback(() => setIsOpen(false), [setIsOpen]);
20+
21+
const anchorRef = useModalClose(close, ref);
22+
23+
const toggle = useCallback(() => {
24+
setIsOpen((prevState) => !prevState);
25+
}, [setIsOpen]);
26+
27+
const handleFocus = () => {
28+
focusedRef.current = true;
29+
};
30+
31+
const handleBlur = () => {
32+
focusedRef.current = false;
33+
setTimeout(() => {
34+
if (!focusedRef.current) {
35+
close();
36+
}
37+
}, 200);
38+
};
39+
40+
return (
41+
<div ref={anchorRef} className={className}>
42+
<button
43+
className={classes.button}
44+
aria-label={ariaLabel}
45+
tabIndex="0"
46+
onClick={toggle}
47+
onBlur={handleBlur}
48+
onFocus={handleFocus}
49+
>
50+
{anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
51+
</button>
52+
{isOpen && (
53+
<DropdownWrapper
54+
className={classes.list}
55+
align={align}
56+
onMouseUp={() => {
57+
setTimeout(close, 0);
58+
}}
59+
onBlur={handleBlur}
60+
onFocus={handleFocus}
61+
>
62+
{children}
63+
</DropdownWrapper>
64+
)}
65+
</div>
66+
);
67+
}
68+
);
69+
70+
DropdownMenu.propTypes = {
71+
/**
72+
* Provide <MenuItem> elements as children to control the contents of the menu.
73+
*/
74+
children: PropTypes.node.isRequired,
75+
/**
76+
* Can optionally override the contents of the button which opens the menu.
77+
* Defaults to <DownArrowIcon>
78+
*/
79+
anchor: PropTypes.node,
80+
'aria-label': PropTypes.string.isRequired,
81+
align: PropTypes.oneOf(['left', 'right']),
82+
className: PropTypes.string,
83+
classes: PropTypes.shape({
84+
button: PropTypes.string,
85+
list: PropTypes.string
86+
})
87+
};
88+
89+
DropdownMenu.defaultProps = {
90+
anchor: null,
91+
align: 'right',
92+
className: '',
93+
classes: {}
94+
};
95+
96+
export default DropdownMenu;

0 commit comments

Comments
 (0)