From 7fd807152e6e2bfe975f845322bb5491b2bc5188 Mon Sep 17 00:00:00 2001 From: Matt Glissmann Date: Mon, 16 Dec 2024 15:08:40 -0700 Subject: [PATCH 1/9] Resolved console error regarding defaultProps deprecation --- sandbox/grommet-app/src/components/ContentPane/index.jsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/sandbox/grommet-app/src/components/ContentPane/index.jsx b/sandbox/grommet-app/src/components/ContentPane/index.jsx index f423c15eb..21824ba79 100644 --- a/sandbox/grommet-app/src/components/ContentPane/index.jsx +++ b/sandbox/grommet-app/src/components/ContentPane/index.jsx @@ -55,10 +55,4 @@ ContentPane.propTypes = { ]), }; -ContentPane.defaultProps = { - actions: undefined, - contain: undefined, - skeleton: undefined, -}; - export default ContentPane; From 2359d4b06194f56feef7e90725e00d048d34a800 Mon Sep 17 00:00:00 2001 From: Matt Glissmann Date: Mon, 16 Dec 2024 15:24:00 -0700 Subject: [PATCH 2/9] Moved Compare, ModeContext, and StyleInProgress to local components --- .../sticker-sheet/components/Compare.jsx | 69 +++++++++++++++++ .../sticker-sheet/components/ModeContext.jsx | 3 + .../components/StyleInProgress.jsx | 9 +++ .../pages/sticker-sheet/components/index.js | 3 + .../src/pages/sticker-sheet/index.jsx | 77 +------------------ 5 files changed, 85 insertions(+), 76 deletions(-) create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/components/index.js diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx new file mode 100644 index 000000000..e6bfe0ffb --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx @@ -0,0 +1,69 @@ +import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; +import { Box, Grommet, Stack, ThemeContext } from 'grommet'; +import { hpe } from 'grommet-theme-hpe'; +import { current as hpeCurrent } from '../../../themes/theme'; +import { ModeContext } from './ModeContext'; + +export const Compare = ({ children, ...rest }) => { + const { mode, direction } = React.useContext(ModeContext); + const theme = useContext(ThemeContext); + + if (direction === 'row') { + return ( + + + {children} + + + {children} + + + ); + } + + return ( + + + + {children} + + + + + + {children} + + + + ); +}; + +Compare.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array, + PropTypes.element, + ]), +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx new file mode 100644 index 000000000..6f5f8014d --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const ModeContext = React.createContext({}); diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx new file mode 100644 index 000000000..1fb647dd5 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx @@ -0,0 +1,9 @@ +import { Notification } from 'grommet'; + +export const StyleInProgress = () => ( + +); diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js new file mode 100644 index 000000000..783c170e4 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js @@ -0,0 +1,3 @@ +export * from './Compare'; +export * from './ModeContext'; +export * from './StyleInProgress'; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx index f98f2d451..7f7cedc05 100644 --- a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx +++ b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx @@ -1,6 +1,5 @@ /* eslint-disable react/jsx-key */ import React, { useContext, useMemo } from 'react'; -import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Anchor, @@ -16,7 +15,6 @@ import { PageContent, PageHeader, Text, - Stack, ThemeContext, Paragraph, Accordion, @@ -47,14 +45,7 @@ import { User, Table, List, MapLocation, Previous } from 'grommet-icons'; import { hpe } from 'grommet-theme-hpe'; import { current as hpeCurrent } from '../../themes/theme'; import ContentPane from '../../components/ContentPane'; - -const StyleInProgress = () => ( - -); +import { Compare, ModeContext, StyleInProgress } from './components'; const textSizes = [ 'xsmall', @@ -73,71 +64,6 @@ const kinds = ['default', 'toolbar', 'secondary', 'primary']; const states = ['enabled', 'active', 'disabled']; const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge']; -const ModeContext = React.createContext({}); - -const Compare = ({ children, ...rest }) => { - const { mode, direction } = React.useContext(ModeContext); - const theme = useContext(ThemeContext); - - if (direction === 'row') { - return ( - - - {children} - - - {children} - - - ); - } - - return ( - - - - {children} - - - - - - {children} - - - - ); -}; - -Compare.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array, - PropTypes.element, - ]), -}; - const StickerSheet = () => { const [mode, setMode] = React.useState('Compare diffs'); const [direction, setDirection] = React.useState('row'); @@ -165,7 +91,6 @@ const StickerSheet = () => { } /> } actions={ - // eslint-disable-next-line max-len Date: Mon, 16 Dec 2024 16:03:04 -0700 Subject: [PATCH 3/9] Moved Type components --- .../sticker-sheet/content/Type/Anchors.jsx | 24 +++++++ .../sticker-sheet/content/Type/Headings.jsx | 33 ++++++++++ .../sticker-sheet/content/Type/Paragraphs.jsx | 22 +++++++ .../sticker-sheet/content/Type/Texts.jsx | 24 +++++++ .../pages/sticker-sheet/content/Type/index.js | 4 ++ .../src/pages/sticker-sheet/content/index.js | 1 + .../src/pages/sticker-sheet/index.jsx | 65 ++----------------- 7 files changed, 113 insertions(+), 60 deletions(-) create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/index.js diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx new file mode 100644 index 000000000..346345847 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx @@ -0,0 +1,24 @@ +import PropTypes from 'prop-types'; +import { Anchor, Box } from 'grommet'; +import ContentPane from '../../../../components/ContentPane'; +import { Compare } from '../../components'; + +export const Anchors = ({ textSizes }) => { + return ( + + + {textSizes.map(size => ( + + + Anchor {size} + + + ))} + + + ); +}; + +Anchors.propTypes = { + textSizes: PropTypes.arrayOf(PropTypes.string).isRequired, +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx new file mode 100644 index 000000000..952f0e834 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx @@ -0,0 +1,33 @@ +import { Box, Heading } from 'grommet'; +import ContentPane from '../../../../components/ContentPane'; +import { Compare } from '../../components'; + +const HEADING_LEVELS = [1, 2, 3, 4, 5, 6]; + +export const Headings = () => { + return ( + + + {HEADING_LEVELS.map(level => ( + + {/* Heading sizes are not relevant to product teams because our guidance + discourages use of them. */} + {/* {['small', 'medium', 'large', 'xlarge'].map(size => ( */} + + + Heading {level} + + + {/* ))} */} + + ))} + + + ); +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx new file mode 100644 index 000000000..7ff539bee --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx @@ -0,0 +1,22 @@ +import { Box, Paragraph } from 'grommet'; +import ContentPane from '../../../../components/ContentPane'; +import { Compare } from '../../components'; + +const PARAGRAPH_SIZES = ['small', 'medium', 'large', 'xlarge', 'xxlarge']; + +export const Paragraphs = () => { + return ( + + + {PARAGRAPH_SIZES.map(size => ( + + + Paragraph {size} with some extra text so we can see how it is when + it wraps + + + ))} + + + ); +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx new file mode 100644 index 000000000..f59973714 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx @@ -0,0 +1,24 @@ +import PropTypes from 'prop-types'; +import { Box, Text } from 'grommet'; +import ContentPane from '../../../../components/ContentPane'; +import { Compare } from '../../components/Compare'; + +export const Texts = ({ textSizes }) => { + return ( + + + {textSizes.map(size => ( + + + Text {size} + + + ))} + + + ); +}; + +Texts.propTypes = { + textSizes: PropTypes.arrayOf(PropTypes.string).isRequired, +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js new file mode 100644 index 000000000..5fae61b9e --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js @@ -0,0 +1,4 @@ +export * from './Anchors'; +export * from './Headings'; +export * from './Paragraphs'; +export * from './Texts'; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js new file mode 100644 index 000000000..c47d073f1 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js @@ -0,0 +1 @@ +export * from './Type'; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx index 7f7cedc05..e9c798a7c 100644 --- a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx +++ b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx @@ -10,13 +10,10 @@ import { Menu, Grommet, Page, - Heading, Tab, PageContent, PageHeader, - Text, ThemeContext, - Paragraph, Accordion, AccordionPanel, Notification, @@ -46,6 +43,7 @@ import { hpe } from 'grommet-theme-hpe'; import { current as hpeCurrent } from '../../themes/theme'; import ContentPane from '../../components/ContentPane'; import { Compare, ModeContext, StyleInProgress } from './components'; +import { Anchors, Headings, Paragraphs, Texts } from './content'; const textSizes = [ 'xsmall', @@ -119,63 +117,10 @@ const StickerSheet = () => { } width="100%" /> - - - {textSizes.map(size => ( - - - Anchor {size} - - - ))} - - - - - {textSizes.map(size => ( - - - Text {size} - - - ))} - - - - - {['small', 'medium', 'large', 'xlarge', 'xxlarge'].map(size => ( - - - Paragraph {size} with some extra text so we can see how it - is when it wraps - - - ))} - - - - - {[1, 2, 3, 4, 5, 6].map(level => ( - - {/* Heading sizes are not relevant to product teams because our guidance - discourages use of them. */} - {/* {['small', 'medium', 'large', 'xlarge'].map(size => ( */} - - - Heading {level} - - - {/* ))} */} - - ))} - - + + + + {kinds.map(kind => From 6c4670e1d3dff1fab9e04b045c5776d752c27de6 Mon Sep 17 00:00:00 2001 From: Matt Glissmann Date: Mon, 16 Dec 2024 16:26:35 -0700 Subject: [PATCH 4/9] Moved Controls components --- .../content/Controls/Accordions.jsx | 16 ++ .../content/Controls/Buttons.jsx | 46 ++++++ .../sticker-sheet/content/Controls/Menus.jsx | 29 ++++ .../content/Controls/Paginations.jsx | 16 ++ .../sticker-sheet/content/Controls/Tabs.jsx | 20 +++ .../content/Controls/ToggleGroups.jsx | 36 +++++ .../sticker-sheet/content/Controls/index.js | 6 + .../src/pages/sticker-sheet/content/index.js | 1 + .../src/pages/sticker-sheet/index.jsx | 138 +++--------------- 9 files changed, 190 insertions(+), 118 deletions(-) create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Menus.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Paginations.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Tabs.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/ToggleGroups.jsx create mode 100644 sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/index.js diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx new file mode 100644 index 000000000..26650fe89 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx @@ -0,0 +1,16 @@ +import { Accordion, AccordionPanel } from 'grommet'; +import { Compare } from '../../components'; +import ContentPane from '../../../../components/ContentPane'; + +export const Accordions = () => { + return ( + + + + hi + hi + + + + ); +}; diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx new file mode 100644 index 000000000..df2bf50c4 --- /dev/null +++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx @@ -0,0 +1,46 @@ +import { Box, Button } from 'grommet'; +import { User } from 'grommet-icons'; +import ContentPane from '../../../../components/ContentPane'; +import { Compare } from '../../components/Compare'; + +const kinds = ['default', 'toolbar', 'secondary', 'primary']; +const states = ['enabled', 'active', 'disabled']; +const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge']; + +export const Buttons = () => { + return ( + + + {kinds.map(kind => + sizes.map(size => + states.map(state => ( + +