feat(website): add data visualization foundation page #2236
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 8fb94c8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
Status: Do Not Merge
|
✔️ Deploy Preview for paste-theme-designer ready! 🔨 Explore the source changes: 8fb94c8 🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-theme-designer/deploys/621ea03559cdfb0007cee2f8 😎 Browse the preview: https://deploy-preview-2236--paste-theme-designer.netlify.app |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 8fb94c8:
|
|
✔️ Deploy Preview for paste-docs ready! 🔨 Explore the source changes: 8fb94c8 🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-docs/deploys/621ea035a7f22b00074416ac 😎 Browse the preview: https://deploy-preview-2236--paste-docs.netlify.app |
|
Size Change: 0 B Total Size: 508 kB ℹ️ View Unchanged
|
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
|
Suggestion(blocking): For the library page I think we should try to replicate the Usage Guide section from a component page, for example https://deploy-preview-2236--paste-docs.netlify.app/components/menu#usage-guide We should include:
Menu is a really good example. The components examples you have on both pages are fine but they don't actually show the consumer how you are importing the package, how to use the hook and how to pass that data to a chart from highcharts. For example: const LineChartExample = () => {
const themedLineChartOptions = usePasteHighchartsTheme(LineChartOptions);
return <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />;
};
render(<LineChartExample />);Doesn't really tell me much, and as a consumer I should likely not have to head to GitHub to look at the code. Where as this: import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/core/menu';
import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
const PreferencesMenu = () => {
const menu = useMenuState();
return (
<>
<MenuButton {...menu} variant="primary">
Preferences <ChevronDownIcon decorative />
</MenuButton>
<Menu {...menu} aria-label="Preferences">
<MenuItem {...menu}>Settings</MenuItem>
<MenuItem {...menu} disabled>
Extensions
</MenuItem>
<MenuSeparator {...menu} />
<MenuItem {...menu}>Keyboard shortcuts</MenuItem>
</Menu>
</>
);
};Tells me everything I need to know |
TheSisb
approved these changes
Feb 25, 2022
packages/paste-website/src/components/shortcodes/component-header/index.tsx
Outdated
Show resolved
Hide resolved
packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx
Show resolved
Hide resolved
https://deploy-preview-2236--paste-docs.netlify.app/core/libraries/data-visualization Totally! I updated the page to be more like the other usage guides. Side note: the changelog is there, but there havent been any changes yet lol. |
So because the versions PR has been merged for a while the package hasn't been released. When it is merged, it'll create a change log file and entry. We should get that in first and then import the generated change log file |
katieporter
reviewed
Feb 28, 2022
|
|
||
| ## Color palettes | ||
|
|
||
| The color palette for data visualizations is a select subset of the Paste Universal Design Language color palette. It is designed to maximize accessibility and harmony within a page. |
There was a problem hiding this comment.
Suggested change
| The color palette for data visualizations is a select subset of the Paste Universal Design Language color palette. It is designed to maximize accessibility and harmony within a page. | |
| The color palette for data visualizations is a select subset of the Paste Unified Design Language color palette. It is designed to maximize accessibility and harmony within a page. |
katieporter
reviewed
Feb 28, 2022
| <Callout> | ||
| <CalloutTitle as="h3">Be mindful about how you apply this palette.</CalloutTitle> | ||
| <CalloutText> | ||
| The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully |
There was a problem hiding this comment.
Suggested change
| The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully | |
| The colors of this palette should be applied in sequence strictly as described. The sequence is carefully |
katieporter
reviewed
Feb 28, 2022
| The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully | ||
| curated to maximize contrast between neighboring colors to help with visual differentiation. You can start anywhere | ||
| in the sequence, but be sure to follow the remaining order (i.e. You can start with 5, as long as you use the rest | ||
| of the sequence in order; 6, 7, 8, 9, 10, 1, 2, 3, 4 …) |
There was a problem hiding this comment.
Suggested change
| of the sequence in order; 6, 7, 8, 9, 10, 1, 2, 3, 4 …) | |
| of the sequence in order: 6, 7, 8, 9, 10, 1, 2, 3, 4). |
katieporter
reviewed
Feb 28, 2022
|
|
||
| ### Shapes | ||
|
|
||
| Shapes can also be used in combination with color coded data points. The main considerations when designing these are ease of differentiation and consistency of use. Just like semantic colors, certain shapes can have semantic meaning too (e.g. triangles for warning or caution). For this reason, it’s important for teams to align on their use, especially in status alerts. |
There was a problem hiding this comment.
Suggested change
| Shapes can also be used in combination with color coded data points. The main considerations when designing these are ease of differentiation and consistency of use. Just like semantic colors, certain shapes can have semantic meaning too (e.g. triangles for warning or caution). For this reason, it’s important for teams to align on their use, especially in status alerts. | |
| Shapes can also be used in combination with color-coded data points. Using shapes in addition to color adds another layer of differentiation so that charts are not relying solely on color to communicate meaning. |
SiTaggart
approved these changes
Mar 1, 2022
shleewhite
added
🚀 merge it!
and removed
Status: Do Not Merge
|
This PR currently has a merge conflict. Please resolve this and then re-add the |
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Contributing to Twilio