status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-10 13:55:55 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #15148 from hashicorp/ui/update-hds-usage-best-practices

Browse Source 
UI: update hds usage to hds best practices
This commit is contained in:
Michael Klein 2022-10-26 16:10:05 +02:00 committed by GitHub
commit 41e50a0f8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
View File

@ -2,7 +2,7 @@
<div class="flex h-24 p-6 overflow-x-auto space-x-12"> <div class="flex h-24 p-6 overflow-x-auto space-x-12">
<div class="shrink-0"> <div class="shrink-0">
<div <div
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary" class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
>Status</div> >Status</div>
<div class="flex items-center"> <div class="flex items-center">
<Peerings::Badge @peering={{@peering}} /> <Peerings::Badge @peering={{@peering}} />
@ -10,14 +10,15 @@
</div> </div>
<div class="shrink-0"> <div class="shrink-0">
<div <div
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary" class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
>Latest heartbeat</div> >Latest heartbeat</div>
<div class="flex items-center"> <div class="flex items-center">
{{#if @peering.LastHeartbeat}} {{#if @peering.LastHeartbeat}}
{{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}} {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
<FlightIcon <FlightIcon
@name="activity" @name="activity"
class="mr-0.5 text-hds-foreground-faint fill-current" @color="var(--token-color-foreground-faint)"
class="mr-0.5"
/> />
{{#if smartDate.isNearDate}} {{#if smartDate.isNearDate}}
<span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span> <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
@ -32,7 +33,7 @@
</div> </div>
<div class="shrink-0"> <div class="shrink-0">
<div <div
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary" class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
>Latest receipt</div> >Latest receipt</div>
<div class="flex items-center"> <div class="flex items-center">
{{#if @peering.LastReceive}} {{#if @peering.LastReceive}}
@ -50,7 +51,7 @@
</div> </div>
<div class="shrink-0"> <div class="shrink-0">
<div <div
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary" class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
>Latest send</div> >Latest send</div>
<div class="flex items-center"> <div class="flex items-center">
{{#if @peering.LastSend}} {{#if @peering.LastSend}}

6
ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
View File

@ -53,10 +53,12 @@
@items={{search.data.items}} @items={{search.data.items}}
as |service index| as |service index|
> >
<li class="px-3 h-12 border-b border-hds-border-primary"> <li
class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0"
>
<a <a
data-test-service-name data-test-service-name
class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center" class="hds-typography-display-300 hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
href={{href-to href={{href-to
"dc.services.show.index" "dc.services.show.index"
service.Name service.Name

6
ui/packages/consul-ui/app/styles/tailwind.scss
View File

@ -1,3 +1,9 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer utilities {
.consul-surface-nav {
background: var(--token-color-palette-neutral-700);
}
}

90
ui/packages/consul-ui/docs/hds.mdx
View File

@ -4,50 +4,50 @@ title: Hashicorp Design System
# Hashicorp Design System # Hashicorp Design System
The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application. The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application. The application also
bundles [TailwindCSS](https://tailwindcss.com/) to follow a utility-based CSS approach that mixes well with HDS utility classes. Tailwind is expected to be used
as a supplement to HDS's utility classes, and should mainly be used for layouting.
## Design Tokens ## Design Tokens
HDS ships a set of [design tokens](https://design-system-components-hashicorp.vercel.app/foundations/tokens), which are implemented as CSS custom properties.
To make it easy to work with these design tokens without having to work with verbose CSS properties all over the place, we have setup a [TailwindCSS](https://tailwindcss.com/)-configuration that makes the color tokens
available via functional [utility classes](https://tailwindcss.com/docs/customizing-colors).
### Colors ### Colors
You can work with any color from the HDS by prefixing colors with the `hds-`-prefix. The `hds-`-prefix makes it easy to see what classes are auto-generated from HDS. When we wanted to color a header tag with the `consul-brand`-color we could do it like this for example: To make sure we follow HDS-guidelines, we disabled Tailwind's color utilities completely. Instead of relying on Tailwind for colors, you should be working with the colors from HashiCorp-Design-System and follow the [guidance in the docs](https://design-system-components-hashicorp.vercel.app/foundations/colors) on how to use them:
```hbs preview-template ```hbs preview-template
<h2 class="text-hds-consul-brand"> <h2 class='hds-foreground-strong'>
HDS is awesome HDS is awesome
</h2> </h2>
``` ```
Regular tailwindCss colors aren't available. You can only use colors defined in HDS with this pattern. Regular TailwindCSS colors aren't available.
```hbs preview-template ```hbs preview-template
<h2 class="text-red-400"> <h2 class='text-red-400'>
TailwindCSS colors won't work TailwindCSS colors won't work
</h2> </h2>
``` ```
### Other tokens ### HDS core styles
Other tokens than colors are available via the provided `hds`-[helper-classes](https://design-system-components-hashicorp.vercel.app/foundations/typography) made available via `@hashicorp/design-system-tokens`. HDS core styles are available via the provided `hds`-[utility-classes](https://design-system-components-hashicorp.vercel.app/foundations/typography) made available via `@hashicorp/design-system-tokens`.
You for example would work with HDS' typography tokens in this way: You for example would work with HDS' typography styles in this way:
```hbs preview-template ```hbs preview-template
<p class="hds-typography-display-400"> <p class='hds-typography-display-400'>
A paragraph styled via HDS. A paragraph styled via HDS.
</p> </p>
``` ```
Because HDS provides utility classes for core styles, you should not be using Tailwind classes to customize core styles like typography.
### Combining HDS and Tailwind ### Combining HDS and Tailwind
Because we are working with a customized tailwind configuration it is easy to combine HDS design tokens with regular tailwind utility classes: Tailwind is used as a supplement to what HDS provides. You will be using Tailwind for layouting and other utility functionality that isn't provided by HDS.
```hbs preview-template ```hbs preview-template
<button type="button" class="text-hds-consul-brand underline transform scale-100 transition ease-in-out hover:text-hds-consul-foreground hover:scale-125"> <button type='button' class='underline transform scale-100 transition ease-in-out hover:scale-125'>
Hover me Hover me
</button> </button>
``` ```
@ -57,46 +57,58 @@ Because we are working with a customized tailwind configuration it is easy to co
All components from Hashicorp Design System are available for you to use. Here's an example that shows how to implement a navigation bar with HDS and Tailwind in combination. All components from Hashicorp Design System are available for you to use. Here's an example that shows how to implement a navigation bar with HDS and Tailwind in combination.
```hbs preview-template ```hbs preview-template
<nav class="h-16 w-full bg-hds-foreground-strong flex items-center justify-between px-4 hds-font-weight-medium"> <nav
<ul class="flex items-center"> class='h-16 w-full consul-surface-nav flex items-center justify-between px-4 hds-font-weight-medium'
>
<ul class='flex items-center'>
<li> <li>
{{! should probably be a context-switcher }} {{! should probably be a context-switcher }}
<FlightIcon <FlightIcon
@name="menu" @name='menu'
class="fill-current cursor-pointer text-hds-neutral-200" @color='var(--token-color-foreground-high-contrast)'
class='cursor-pointer'
/> />
</li> </li>
<li> <li>
<FlightIcon <FlightIcon @name='consul' class='ml-4 h-8 w-8' @color='var(--token-color-consul-brand)' />
@name="consul"
class="fill-current ml-4 h-8 w-8 text-hds-consul-brand"
/>
</li> </li>
</ul> </ul>
<ul class="flex items-center"> <ul class='flex items-center space-x-2'>
<li> <li>
<Hds::Dropdown as |dd|> <Hds::Dropdown as |dd|>
<dd.ToggleButton <dd.ToggleButton @text='Help' />
@text="Help" <dd.Title @text='Consul HDS' />
@color="secondary" <dd.Interactive @text='Documentation' @icon='docs-link' />
class="text-hds-neutral-300" <dd.Interactive @text='HashiCorp Learn' @icon='learn-link' />
/>
<dd.Title @text="Consul HDS" />
<dd.Interactive @text="Documentation" @icon="docs-link" />
<dd.Interactive @text="HashiCorp Learn" @icon="learn-link" />
<dd.Separator /> <dd.Separator />
<dd.Interactive @text="Provide Feedback" @icon="github" /> <dd.Interactive @text='Provide Feedback' @icon='github' />
</Hds::Dropdown> </Hds::Dropdown>
</li> </li>
<li> <li>
<Hds::Button <Hds::Link::Standalone
@text="Settings" @href='https://hashicorp.com'
@color="tertiary" @icon='settings'
@icon="settings" @iconPosition='trailing'
@iconPosition="trailing" @size='medium'
class="text-hds-neutral-300" @text='Settings'
/> />
</li> </li>
</ul> </ul>
</nav> </nav>
``` ```
Please notice the custom `consul-surface-nav`-utility class. This class has been created because at the moment of writing,
there wasn't a `hds-surface-` that matched what we needed for this navigation header. If you run into situations like
that, you can add a `consul-`-utility class to the `utilities`-layer in `tailwind.scss`.
```css
// consul-ui/app/styles/tailwind.scss
@layer utilities {
.consul-surface-nav {
background: var(--token-color-palette-neutral-700);
}
// ...
}
```
This should only be used as a last resort and you should stick to `hds-`-utilities whenever possible.

39
ui/packages/consul-ui/tailwind.config.js
View File

@ -1,44 +1,9 @@
/**
* A function that parses the `tokens.css`-file from `@hashicorp/design-system-tokens`
* and creates a map out of it that can be used to build up a color configuration
* in `tailwind.config.js`.
*
* @param {string} tokensPath - The path to `tokens.css` from `@hashicorp/design-system-tokens`
* @returns { { [string]: string } } An object that contains color names as keys and color values as values.
*/
function colorMapFromTokens(tokensPath) {
const css = require('css');
const path = require('path');
const fs = require('fs');
const hdsTokensPath = path.join(__dirname, tokensPath);
const tokensFile = fs.readFileSync(hdsTokensPath, {
encoding: 'utf8',
flag: 'r',
});
const ast = css.parse(tokensFile);
const rootVars = ast.stylesheet.rules.filter((r) => r.type !== 'comment')[0];
// filter out all colors and then create a map out of them
const vars = rootVars.declarations.filter((d) => d.type !== 'comment');
const colorPropertyNameCleanupRegex = /^--token-color-(palette-)?/;
const colors = vars.filter((d) => d.property.match(/^--token-color-/));
return colors.reduce((acc, d) => {
acc[d.property.replace(colorPropertyNameCleanupRegex, 'hds-')] = d.value;
return acc;
}, {});
}
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['../**/*.{html.js,hbs,mdx}'], content: ['../**/*.{html.js,hbs,mdx}'],
theme: { theme: {
colors: colorMapFromTokens( // disable all color utilities - we want to use HDS instead
'../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css' colors: {},
),
extend: {}, extend: {},
}, },
plugins: [], plugins: [],