Design System backlog
This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
We can remove our page.
TBD
To include:
This has been ported across but needs guidance.
Note: in RPL it's marked as “Internal use only” but I don't think this should be a tag because it should be easy to find even if there is another variant for citizen facing sites. Instead the page should contain variants—the DS is already setup for variants.
Our tab component is now redundant. I think this should be removed.
Our collapsible component seems to be a number of “Details” components with borders.
I suggest we remove our version.
I think our own version is now redundant and I suggest we remove this pattern.
I believe our guidance is now redundant given the GOV.UK Design System matches our own guidance.
I suggest we remove .our version.
Hello,
We have some common button text to add to the library:
Submit | Used at the end of the application to submit the data when all fields are complete.
Add another | Used to add another item.
Pay | Used to make a payment on the confirmation page from GOV.UK.
Sign in | Used to sign in to an account that has already been set up.
Sign out | Used to sign out of account.
Start | Used at the start of the service. Should only be used once in an end-to-end service.
This will be added to when more buttons are agreed.
Thanks!
We already have a primary navigation component in the design system. We need to add a variant that can take two search form variants:
We can remove ours.
We should remove ours, unless we want to recommend content templates.
Not in the GOV.UK Design System.
Questions:
I think this pattern needs a review.
Objective: Let users search across a service for specific things or everything.
As the search is specific, we need visible label and hint text, so it's togglable.
As the search is truly global, we can forgo the visible label and hint text, and use the search button as a quasi label for sighted users. The hidden label would still need to be in the page for screen reader users.
Same, consistent layout for large and small screens.
Should reference the GDS Design Pattern library shutter pages which exist.
We have shutter page designs available for communicating a situation but no design for informing a user that a service will be out of action at a future date/time. Do we need a broadcast banner design?
This has been ported across but it still needs guidance.
TBD
This component is needed.
This has been ported across but we need to add guidance.
No longer needed. Let's remove.
@trevorsaint - add a footer pattern in library as discussed in Design Crit on 29 Aug 2018.
We have some internal facing services that need to let users perform actions at any time. We've seen this in JUI, PUI, fees and payments. We've also seen this in other x-government systems such as CJS:
We originally designed grey buttons to work inside the blue case bar (also known as entity or details bar) like this:
But this didn't work because users couldn't spot the buttons. So we iterated and came up with this design:
The problem with the above design is that the actions are at the page level and aren't signifying their intention correctly. Sometimes we may want page-specific actions in and around that area such as on a data table where the actions sit above (not below). And you may have a search in the top right.
Then we looked at other ways to incorporate these buttons above, below, next to the sub navigation. None of it worked well for various reasons.
So our latest iteration involves changing the colour/style of the case/details bar to grey instead of blue.
By making the details bar grey it's less dominant which helps:
All of the form controls are provided in the GOV.UK Design System.
There's no need for us to have these.
There is no component for this in the GOV.UK Design System. We'll create an improved robust version of what's currently in the RPL.
I'd like to review the name of this component.
And we also need guidance as to when to use it.
At a certain pint in a user journey there is a need to either introduce or explain a concept or emphasise something important. In video hearings we have used an emerging pattern to introduce the concept of a video hearing and how it might be conducted. (examples to follow).
This might be a number of patterns.
Objective: let users filter a large number of items in a table such as a case list or something else like a timeline.
To make sure these designs are flexible and scalable we have tried to accommodate a large set of capabilities including search (see header), bulk actions, sorting (tables and other things), pagination, mobile, desktop in addition to filters. While also considering the varying levels of navigation and action buttons that may be present on screen.
We don't think there is a one-size-fits-all solution so there are a number of variants.
We explored filters that show above the list but this was difficult to lay out and accommodate a large set of filter options without resorting to select box menus (which are generally the least usable form control). And the filters then push the main information down the page which can be especially problematic when employing AJAX enhanced filters — not that we necessarily recommend using them until there is a clear user need.
So the way this filter works is by letting users batch select a number of options and then submitting them with a submit button (like any other form). Then the page will refresh with the filters applied and denoted in the “selected filters” section.
Users might arrive at the list by just navigating. Or users may search first. In the screens below users can only search for cases so the labelling is explicit. If search becomes more sophisticated we think there should be an interim page of all the entities (cases, users, events, payments, whatever) the search finds before being presented with filters because the information (and therefore their display) differs greatly across the entities.
There are no secondary or tertiary button styles in GOV.UK, so we'll create those with modifier classes.
Current pattern is a drop-down. What happens when more than 5 actions in the drop-down?
Rob Armes had an example from Fees & Payments.
Discuss in a Design Crit.
This is now redundant. I suggest removal.
@trevorsaint - please update the Alerts section on the HMCTS Pattern Library as discussed in Design Crit on 29 August.
Would suggest we restructure our guidance. Currently the guidance looks like the recommended pattern.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.