Skip to content

Commit

Permalink
docs: add readme and update supported versions
Browse files Browse the repository at this point in the history
This adds a new roadmap page to the website to give a high level overview of what we're working on. It also updates the correct version details for v5 on support page, and a few minor styling fixes.

Signed-off-by: Jeremy Wilken <[email protected]>
  • Loading branch information
gnomeontherun committed May 19, 2021
1 parent 79471d9 commit 3465582
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 6 deletions.
7 changes: 4 additions & 3 deletions apps/website/.vuepress/theme/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<div :class="{ 'footer-wrapper': true, 'has-separator': !isHomePage }">
<div class="vmware-source-wrapper">
<div class="copyright-content-wraper">
<div class="powered-by-wrapper">Powered by VMware, Inc &copy; {{ year }}. All rights reserved.</div>
<div class="code-license-wrapper">
<p class="powered-by-wrapper">
Powered by VMware, Inc &copy; {{ year }}. All rights reserved.
<br />
Code licensed by
<a href="https://opensource.org/licenses/MIT" target="_blank" class="mit-link">MIT License</a>
<a href="https://www.vmware.com/help/privacy.html" target="_blank">Privacy Policy</a>
</div>
</p>
</div>

<div class="social-media-links">
Expand Down
4 changes: 4 additions & 0 deletions apps/website/.vuepress/theme/styles/overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,10 @@ body .no-clr-ui p {
//margin-bottom: 0;
}

[cds-text~='body'] li {
color: var(--cds-global-color-gray-700);
}

.component-subsection p + p {
margin-top: var(--cds-token-space-size-7, 0.8rem);
}
Expand Down
92 changes: 92 additions & 0 deletions apps/website/get-started/roadmap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
toc: true
---

# Roadmap

As a design system, Clarity plays a large role in applications and many people from inside and outside of VMware ask for capabilities or changes on a regular basis to enhance the system for various needs. This page contains a summary of the major objectives and an indication of their status and priority.

## How we work

Clarity is an open source project, so we welcome input from the community to help guide the future of Clarity. If you are interested in submitting ideas, we encourage you to use the [GitHub Discussions](https://github.com/vmware/clarity/discussions) forum to share your thoughts. We continuously take those requests and review them and incorporate things into our future plans.

Maintaining a design system is a delicate balance of defining the specific capabilities and allowing maximum flexibility. We often take requests together in block to design the best solution that meets the most needs. This means at times we can't accept or prioritize requests, but do our best to balance the overall needs of the community with aligning efforts to keep harmony with Clarity.

## In Progress Work

### Core Components

Clarity is actively working on creating our Clarity Core components. Our long term goal is to provide a greater level of capabilities through Clarity Core for the next generation of applications to depend upon for the long term. We are also working to ensure that accessibility is included by default in all of our Core components.

#### Pagination

This is a new component. We are building a standalone pagination component that could be used in any context where you have a large amount of records to display but need to split them into different pages. This is currently available in `beta`, see https://clarity.design/storybook/core/?path=/story/components-pagination--page.

#### Cards

This is a new component, built to replace Cards in Clarity Angular. Cards are a common container for grouping information. We are building out a new Card component that will support the existing use cases and allow for additional flexibility for applications.

#### Navigation

This is a new component, designed to unify navigation in a single component and will replace the Vertical Nav, Subnav, and Header navigation in Clarity Angular. We are building a new component that combines some of the common navigation elements into a single component for easier use and better accessibility.

#### Table

This is a new component, designed to replace Tables in Clarity Angular. We are building out custom stylings that can be applied to tables to style and suppliment the default browser tables provided in HTML.

#### Tree View

This is a new component, designed to replace Clarity Angular Tree View. We are building out a set of components to compose a nested tree of items and allow users to navigate through directories or select items from a nested list.

#### Datagrid

This is a collection of new components, designed to replace the Clarity Angular Datagrid. We are building out a new Datagrid that will start with the most basic use cases and be expanded to support the full range of features currently found in Clarity Angular. You can expect the Datagrid to be released in waves with new capabilities over time, but the current work is focused on the basic Datagrid use cases and foundational architecture.

#### Popovers and Dropdowns

This is a new component, designed to replace the Clarity Angular dropdown menu. We are building out a new dropdown menu that has rich positioning and accessibility behaviors that are highly requested. The bulk of the work is in developing an accessible and reusable popover that can be used by dropdowns and other components like signposts and tooltips.

#### Breadcrumbs

This is a new component, and doesn't exist today in Clarity Angular. We are working with our friends at Porsche Informatik who have the [Clarity Addons](https://github.com/porscheinformatik/clarity-addons/) library to bring this component into Clarity Core.

### Adoption Support

As we develop Clarity Core, we are also working on documentation and automation to help applications migrate to Clarity Core from Clarity Angular. We want to ensure that this is a smooth process and that applications have the power to choose when and how they update their applications.

### Website Enhancements

The website is a primary source of documentation for Clarity, and we aim to constantly improve and extend it. We're looking at a large number of enhancements that can support better content, enable better viewing of samples, and reach a larger audience.

- Independent Angular documentation - We want to make our original Angular documentation available with interactive demos available again.
- Website Theme Switching - We'd like to make it easy to preview components in the light and dark theme live in the documentation.
- Core Foundational Content - The website foundational pages have not yet been updated to reflect the new content from Clarity Core.
- Updated Charts Guidance - We're working on guidance for accessible and consistent charts and visualizations to help applications reach their audiences.

### Patterns

Patterns are a new aspect to Clarity that we're very excited about. Some key interactions in applications are more complex than an individual component, and we're working to release a set of common patterns that address complex workflows that require multiple components.

## Future Work

### Clarity Core Feature Parity

There are a number of Core components that are either blocked by other work or will be worked upon in the future. The goal is for Clarity Core to reach a similar level of capabilities in Clarity Angular. This list represents the gaps in Clarity Core compared with Clarity Angular. As we work through this list of future work, we are also considering efficiencies by reducing duplicate behaviors or components and in other cases considering adding functionality as we build. In alphabetical order:

- Combobox
- Progress
- Range
- Signpost
- Stack View
- Stepper
- Tabs
- Tooltip
- Wizard

### New Potential Components

There are a number of components that are on our radar to consider for inclusion. While we can't make specific committments at this moment, we are considering improvements as well as new components based on the feedback and input we get from users.

### Patterns

We have more patterns envisioned for the long term, and are looking to work with key partners on helping to define and refine them for more use cases.
23 changes: 20 additions & 3 deletions apps/website/get-started/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,29 @@ Our support policy for Clarity releases is to actively support a major release f

| Version | Status | Released | Support Ends |
| ------- | ------------------ | ------------ | ----------------------------- |
| v5 | Prerelease | Jan 21, 2021 | 6 months after v6 is released |
| v4 | Actively Supported | Aug 19, 2020 | 6 months after v5 is released |
| v3 | Actively Supported | Feb 27, 2020 | Mar 1, 2021 |
| v5 | Actively Supported | Jan 21, 2021 | 6 months after v6 is released |
| v4 | Actively Supported | Aug 19, 2020 | Aug 1, 2021 |
| v3 | Out of support | Feb 27, 2020 | Apr 1, 2021 |
| v2 | Out of support | July 6, 2019 | Jan, 2021[^olderversion] |
| v1 | Out of support | Nov 29, 2018 | Aug, 2020[^olderversion] |

{ .table }

## Clarity Angular and Angular Compatibility

Our Clarity Angular package is designed to explicitly support specific versions of Angular, since there are often changes in Angular or TypeScript that make it difficult to supporting more than one version.

| Clarity Angular Version | Angular | Status |
| ----------------------- | ------- | ------------------ |
| _release pending_ | v12 | n/a |
| v5 | v11 | Actively Supported |
| v4 | v10 | Actively Supported |
| v3 | v9 | Out of support |
| v2 | v8 | Out of support |
| v1 | v7 | Out of support |

{ .table }

## Device and Browser Support

We actively support the following browsers on desktop and mobile devices. For each, we support the current and previous major releases only.
Expand All @@ -50,6 +65,8 @@ Clarity is tested across several sets of screen reader and browser combinations

We have an accessibility team that reviews any accessibility issues and verifies resolutions, to hold Clarity to a high standard for accessibility.

Footnotes:

[^issues]: A severe issue is defined as a security issue or a regression.
[^olderversion]: Previous versions of Clarity had different support policy that has lapsed.
[^edge]: The Chromium version of Edge was released January 2020, and we do not support the legacy version of Edge.
Binary file modified logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3465582

Please sign in to comment.