You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: packages/components/NEW-COMPONENT-CHECKLIST.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ The following should be available as resources for the Project Kickoff.
11
11
12
12
## Project Kickoff
13
13
14
-
A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design System team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
14
+
A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design Systems Team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
Copy file name to clipboardexpand all lines: packages/components/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -48,7 +48,7 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila
48
48
@import '@hashicorp/design-system-components';
49
49
```
50
50
51
-
⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the design system team (we can try to find a workaround).
51
+
⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the Design Systems Team (we can try to find a workaround).
Copy file name to clipboardexpand all lines: website/docs/about/overview.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ Design systems are often equated with a UI kit or component library. In reality,
14
14
15
15
## What is Helios
16
16
17
-
**Helios** is the design system built by the HashiCorp Design System Team. It’s commonly referred to as **HDS**.
17
+
**Helios** is the design system built by the HashiCorp Design Systems Team. It’s commonly referred to as **HDS**.
18
18
19
19
Helios is available and recommended for all HashiCorp product teams using Ember.js. We also support teams using alternative frameworks or libraries, such as React, on a case-by-case basis via our design assets, [tokens](/foundations/tokens), and best practice guidance.
20
20
@@ -28,23 +28,23 @@ For more information on how to use the design system, visit our getting started
28
28
29
29
Helios was specifically created for **customer-facing products**.
30
30
31
-
All HashiCorp **product teams** have adopted Helios as the single source of truth for the design language, components, and patterns used to build the UIs of their consumer-facing products.
31
+
All HashiCorp **product teams** have adopted Helios as the single source of truth for the foundations, components, and patterns used to build the UIs of their consumer-facing products.
32
32
33
33
### Internal products
34
34
35
35
Helios is **not** meant to be used as a general-purpose UI library.
36
36
37
-
If you intend to use Helios for **internal products or tools** in HashiCorp [contact the Design Systems Team](/about/support) before starting so we can discuss if Helios is a good fit for your team and how this might affect system overhead (changes, maintenance, support, etc).
37
+
If you intend to use Helios for **internal products or tools**, [contact the Design Systems Team](/about/support) before starting so we can discuss if Helios is a good fit for your team.
38
38
39
39
### External products
40
40
41
41
Helios is **not** meant to be used outside of HashiCorp.
42
42
43
-
If you’re **not a HashiCorp employee**, you’re more than welcome to use the Helios design system as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.
43
+
If you’re **not a HashiCorp employee**, you’re more than welcome to use the Helios Design System as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.
44
44
45
45
## Benefits of using Helios
46
46
47
-
While increasing visual and functional consistency across products is the most visibly notable result of design system adoption, other benefits include:
47
+
Helios increases the visual and functional consistency of Hashicorp products. Other benefits include:
48
48
49
49
- Increased velocity in the design and development of new products and features
50
50
- Dismantling silos between teams that adopt and use the system
@@ -57,7 +57,7 @@ While the scale of a design system largely depends on the needs of those consumi
Copy file name to clipboardexpand all lines: website/docs/components/flyout/partials/guidelines/guidelines.md
+2-1
Original file line number
Diff line number
Diff line change
@@ -21,7 +21,8 @@ A Flyout is useful for more complex content, given the space it occupies in the
21
21
22
22
!!! Info
23
23
24
-
**Note:** Complexity of content is relative, use your own judgment to determine if the content or function is overly complex and consider moving it to its own page.
24
+
Complexity of content is relative, use your own judgment to determine if the content or function is overly complex and consider moving it to its own page.
Copy file name to clipboardexpand all lines: website/docs/components/tag/partials/guidelines/guidelines.md
+5-6
Original file line number
Diff line number
Diff line change
@@ -11,13 +11,12 @@
11
11
12
12
## Layout
13
13
14
-
- The Tag component can be used in several different layouts, but we commonly see them in a list or a group.
15
-
- Tags will fill the parent container and then wrap, as necessary.
14
+
The Tag component can be used in several different layouts, but we commonly see them in a list or a group. They will fill the parent container and then wrap, as necessary.
16
15
17
-
16
+
18
17
<Doc::ImageCaption @text="Tag layout as a list"/>
19
18
20
-
19
+
21
20
<Doc::ImageCaption @text="Tag layout as a group"/>
22
21
23
22
## Spacing
@@ -30,14 +29,14 @@ As a best practice, use a vertical spacing of 12px and horizontal spacing of 8px
30
29
31
30
!!! Do
32
31
33
-
Copy file name to clipboardexpand all lines: website/docs/getting-started/for-designers.md
+5-15
Original file line number
Diff line number
Diff line change
@@ -12,8 +12,6 @@ Many resources and links on this page are only available to HashiCorp employees.
12
12
13
13
The Design Systems Team maintains and publishes Figma libraries which contain foundational styles, components, patterns, and icons.
14
14
15
-
For documentation around broader Figma best practices within HashiCorp design teams, reach out to the [Design Ops team](https://sites.google.com/hashicorp.com/designknowledgehub/design-system) or visit the [#design-ops slack channel](https://hashicorp.slack.com/archives/C029GL8GJDV).
16
-
17
15
## Enabling Helios libraries
18
16
19
17
!!! Insight
@@ -69,15 +67,9 @@ Because the usage of Helios Foundations reinforces consistency across the produc
69
67
70
68
3. Select the style you wish to apply from the list of options. Ensure you choose styles within the **HDS - Product Foundations** library.
71
69
72
-
73
-
74
-
To learn more about how to use the foundational styles, visit:
To learn more about how to use the foundational styles, visit [the Foundations section](/foundations/).
81
73
82
74
## Icons
83
75
@@ -108,9 +100,7 @@ Add Helios components to your design project by inserting them directly from the
108
100
109
101
1. Open the [assets panel](https://help.figma.com/hc/en-us/articles/360038663994-Name-and-organize-components#assetspanel) by clicking "Assets" at the top of the left sidebar.
110
102
111
-
2. Scroll through the list or use the search feature to locate the component you’d like to use.
112
-
113
-
- Figma’s search feature returns results based on the component’s name, category, and description.
103
+
2. Scroll through the list or use the search feature to locate the component you’d like to use. **Note:** Figma’s search feature returns results based on the component’s name, category, and description.
114
104
115
105
3. Click and drag the component into the canvas or frame.
116
106
@@ -136,7 +126,7 @@ If you prefer to select a component visually, the [Product Components](https://w
136
126
137
127
4. Navigate back to your project file and paste the component wherever needed.
138
128
139
-
@@ -205,7 +195,7 @@ We don’t recommend tying core design functionality to third-party plugins beca
205
195
206
196
The [Figma community](https://www.figma.com/community) contains other useful resources for documenting your designs, wireframing, and collaborating with your team. Access Figma's community by clicking the organization switcher in the dashboard and selecting "Community" or by clicking "Explore Community" in the toolbar.
207
197
208
-
Copy file name to clipboardexpand all lines: website/docs/patterns/button-organization/partials/guidelines/alignment.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
## Alignment
2
2
3
-
Alignment refers to how buttons and actions are aligned relative to the container or page. When combined with different reading patterns and hierarchy focal points, different alignment methods impact a function's readability, usability, and intended outcome.
3
+
Alignment refers to how buttons and actions are aligned relative to the container or page. When combined with different reading patterns and hierarchy, different alignment methods impact a function's readability, usability, and intended outcome.
While the alignment, order, and grouping of buttons might seem trivial, the impact on users is immediate and often occurs in experiences of high important and interruption.
1
+
These guidelines aid in the decision-making process for organizing buttons and actions. Different alignment, ordering, and grouping of actions result in different outcomes in user experience.
2
2
3
3
While these guidelines don’t cover every scenario, they are intended to aid in the decision-making process when determining how to organize buttons and actions. Different methods of alignment and ordering will result in different outcomes with pros and cons for each. What is most important is **consistency** across an application in how actions are aligned, ordered, and grouped.
0 commit comments