diff --git a/packages/components/NEW-COMPONENT-CHECKLIST.md b/packages/components/NEW-COMPONENT-CHECKLIST.md index bd7e2c55fef..1fc00842de9 100644 --- a/packages/components/NEW-COMPONENT-CHECKLIST.md +++ b/packages/components/NEW-COMPONENT-CHECKLIST.md @@ -11,7 +11,7 @@ The following should be available as resources for the Project Kickoff. ## Project Kickoff -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). +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). ## Design Checklist The design checklist has 4 primary parts: diff --git a/packages/components/README.md b/packages/components/README.md index adb1485e246..891ebeb9a70 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -48,7 +48,7 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila @import '@hashicorp/design-system-components'; ``` -⚠️ **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). +⚠️ **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). Usage ------------------------------------------------------------------------------ diff --git a/website/app/controllers/index.js b/website/app/controllers/index.js index 2d9ecc8b0b4..042165341af 100644 --- a/website/app/controllers/index.js +++ b/website/app/controllers/index.js @@ -16,7 +16,7 @@ export default class IndexController extends Controller { { title: 'Content', description: - 'Structured guidelines on tone and voice, user communication and more.', + 'Structured guidelines on tone and voice, user communication, and more.', route: 'content', }, { diff --git a/website/app/templates/about.hbs b/website/app/templates/about.hbs index 34d61105742..161bb1c33a8 100644 --- a/website/app/templates/about.hbs +++ b/website/app/templates/about.hbs @@ -16,7 +16,7 @@

The HashiCorp Design Systems Team creates and maintains the Helios Design System. This includes the Figma components, web components, documentation, and more. Read through our overview - for more details, and to see why adopting the design system is the future for product teams. + for more details.

Principles

diff --git a/website/docs/about/overview.md b/website/docs/about/overview.md index 7a0394b4956..b003cb3cab5 100644 --- a/website/docs/about/overview.md +++ b/website/docs/about/overview.md @@ -14,7 +14,7 @@ Design systems are often equated with a UI kit or component library. In reality, ## What is Helios -**Helios** is the design system built by the HashiCorp Design System Team. It’s commonly referred to as **HDS**. +**Helios** is the design system built by the HashiCorp Design Systems Team. It’s commonly referred to as **HDS**. 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. @@ -28,23 +28,23 @@ For more information on how to use the design system, visit our getting started Helios was specifically created for **customer-facing products**. -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. +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. ### Internal products Helios is **not** meant to be used as a general-purpose UI library. -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). +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. ### External products Helios is **not** meant to be used outside of HashiCorp. -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. +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. ## Benefits of using Helios -While increasing visual and functional consistency across products is the most visibly notable result of design system adoption, other benefits include: +Helios increases the visual and functional consistency of Hashicorp products. Other benefits include: - Increased velocity in the design and development of new products and features - 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 In Helios, we offer the following: -- **Design Language**: colors, typography, icons, content strategy +- **Foundations**: colors, typography, icons, content strategy - **Components**: component design, component development, tokens, development standards - **Patterns**: repetitive combinations of components and foundational styles that yield more complex functions and features - **Documentation**: education, issue tracking, contribution, content management, processes diff --git a/website/docs/about/principles.md b/website/docs/about/principles.md index e59a18a517c..676f42018ab 100644 --- a/website/docs/about/principles.md +++ b/website/docs/about/principles.md @@ -1,7 +1,7 @@ --- title: Principles description: We consider the whole when creating the parts. -caption: Read the principles that guide the design system team. +caption: Read the principles that guide the Design Systems Team. navigation: order: 102 layout: diff --git a/website/docs/components/app-footer/index.md b/website/docs/components/app-footer/index.md index eb480d49dd2..23fa36e017e 100644 --- a/website/docs/components/app-footer/index.md +++ b/website/docs/components/app-footer/index.md @@ -3,7 +3,7 @@ title: App Footer description: >- A footer that appears on every screen to display supplementary information and links. -caption: Displays supplementary information and links for the application. +caption: Supplementary information and links for the application. links: figma: >- https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1 diff --git a/website/docs/components/button-set/index.md b/website/docs/components/button-set/index.md index 50105ad3815..7693dbbbde8 100644 --- a/website/docs/components/button-set/index.md +++ b/website/docs/components/button-set/index.md @@ -1,7 +1,7 @@ --- title: Button Set description: Provides consistent layout and spacing for a set of buttons. -caption: A set of buttons. +caption: Provides consistent layout and spacing for a set of buttons. links: github: >- https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set diff --git a/website/docs/components/flyout/partials/guidelines/guidelines.md b/website/docs/components/flyout/partials/guidelines/guidelines.md index 43a2f56cad2..99efc17eb2d 100644 --- a/website/docs/components/flyout/partials/guidelines/guidelines.md +++ b/website/docs/components/flyout/partials/guidelines/guidelines.md @@ -21,7 +21,8 @@ A Flyout is useful for more complex content, given the space it occupies in the !!! Info -**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. +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. + !!! #### Status and messaging diff --git a/website/docs/components/segmented-group/index.md b/website/docs/components/segmented-group/index.md index 36e035c72f2..f59bc69a187 100644 --- a/website/docs/components/segmented-group/index.md +++ b/website/docs/components/segmented-group/index.md @@ -1,11 +1,9 @@ --- title: Segmented Group description: >- - Combines one or more input fields and actions to handle complex filtering and - data collection. + Combines one or more input fields and actions. caption: >- - Combines one or more input fields and actions to handle complex filtering and - data collection. + Combines one or more input fields and actions. links: figma: >- https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-110590&t=w8xQlWxzH7bwXLe2-1 diff --git a/website/docs/components/tag/partials/guidelines/guidelines.md b/website/docs/components/tag/partials/guidelines/guidelines.md index 85259040a20..81acf55b707 100644 --- a/website/docs/components/tag/partials/guidelines/guidelines.md +++ b/website/docs/components/tag/partials/guidelines/guidelines.md @@ -11,13 +11,12 @@ ## Layout -- The Tag component can be used in several different layouts, but we commonly see them in a list or a group. -- Tags will fill the parent container and then wrap, as necessary. +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. -![Tag layout as a list](/assets/components/tag/tag-layout-list.png =678x*) +![Skeleton of an app with tags in a list below the heading.](/assets/components/tag/tag-layout-list.png =678x*) -![Tag layout as a group](/assets/components/tag/tag-layout-group.png =818x*) +![Skeleton of an app with tags in a group where they fill the container and wrap onto 4 rows.](/assets/components/tag/tag-layout-group.png =818x*) ## Spacing @@ -30,14 +29,14 @@ As a best practice, use a vertical spacing of 12px and horizontal spacing of 8px !!! Do -![Example of a leading icon in the tag](/assets/components/tag/tag-leading-icon.png =916x*) +![](/assets/components/tag/tag-leading-icon.png =916x*) The leading dismiss icon allows mouse users to clear multiple Tags quickly because they do not need to move their mouse. !!! !!! Dont -![Example of a trailing icon in the tag](/assets/components/tag/tag-trailing-icon.png =916x*) +![](/assets/components/tag/tag-trailing-icon.png =916x*) When the dismiss icon is trailing, the mouse user must adjust positioning of their mouse to clear the Tags, which results in slower task completion. !!! diff --git a/website/docs/foundations/border/index.md b/website/docs/foundations/border/index.md index 64946bfcea9..b444b07125d 100644 --- a/website/docs/foundations/border/index.md +++ b/website/docs/foundations/border/index.md @@ -1,7 +1,7 @@ --- title: Borders -caption: Borders define and separate content visually. They can be used alone or in combination with elevation. -description: Borders define and separate content visually. They can be used alone or in combination with elevation. +caption: Borders define and separate content visually. +description: Borders define and separate content visually. links: figma: https://www.figma.com/design/uX4OEaJQdWfzULADchjAeN/HDS-Foundations-v2.0?node-id=6024-2082&t=z7hDCKFFuGUMDRYe-1 previewImage: assets/illustrations/foundations/border.jpg diff --git a/website/docs/foundations/tokens/index.md b/website/docs/foundations/tokens/index.md index c74eaf36d78..52db3e47e3e 100644 --- a/website/docs/foundations/tokens/index.md +++ b/website/docs/foundations/tokens/index.md @@ -1,7 +1,7 @@ --- title: Tokens -caption: Design tokens are provided as CSS custom properties and used to share and standardize foundation styles. -description: Design tokens are provided as CSS custom properties and used to share and standardize foundation styles. +caption: Design tokens are used to share and standardize foundation styles. +description: Design tokens are used to share and standardize foundation styles. previewImage: assets/illustrations/foundations/tokens.jpg layout: sidecar: false diff --git a/website/docs/getting-started/for-designers.md b/website/docs/getting-started/for-designers.md index 79e2554ef0c..71762c3e8aa 100644 --- a/website/docs/getting-started/for-designers.md +++ b/website/docs/getting-started/for-designers.md @@ -12,8 +12,6 @@ Many resources and links on this page are only available to HashiCorp employees. The Design Systems Team maintains and publishes Figma libraries which contain foundational styles, components, patterns, and icons. -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). - ## Enabling Helios libraries !!! Insight @@ -69,15 +67,9 @@ Because the usage of Helios Foundations reinforces consistency across the produc 3. Select the style you wish to apply from the list of options. Ensure you choose styles within the **HDS - Product Foundations** library. -![Applying styles to a text layer](/assets/getting-started/designers/apply-text-style.png =784x*) - -To learn more about how to use the foundational styles, visit: +![](/assets/getting-started/designers/apply-text-style.png =784x*) -- [Colors](/foundations/colors) -- [Typography](/foundations/typography) -- [Elevation](/foundations/elevation) -- [Borders](/foundations/border) -- [Focus ring](/foundations/focus-ring) +To learn more about how to use the foundational styles, visit [the Foundations section](/foundations/). ## Icons @@ -108,9 +100,7 @@ Add Helios components to your design project by inserting them directly from the 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. -2. Scroll through the list or use the search feature to locate the component you’d like to use. - - - Figma’s search feature returns results based on the component’s name, category, and description. +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. 3. Click and drag the component into the canvas or frame. @@ -136,7 +126,7 @@ If you prefer to select a component visually, the [Product Components](https://w 4. Navigate back to your project file and paste the component wherever needed. -![Copy from the stickersheet](/assets/getting-started/designers/copy-from-stickersheet.png =752x*) +![](/assets/getting-started/designers/copy-from-stickersheet.png =752x*) ### Working with components @@ -205,7 +195,7 @@ We don’t recommend tying core design functionality to third-party plugins beca 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. -![Navigating to the Figma community from the desktop app](/assets/getting-started/designers/figma-community.png =804x*) +![](/assets/getting-started/designers/figma-community.png =804x*) ### Figma documentation diff --git a/website/docs/icons/library/index.md b/website/docs/icons/library/index.md index b87a777b948..24ae2cfabd9 100644 --- a/website/docs/icons/library/index.md +++ b/website/docs/icons/library/index.md @@ -2,7 +2,7 @@ title: Icon library layout: sidecar: false -caption: Icons can be used to support and enhance meaning and can help call out information. +caption: Use icons to support and enhance meaning and call out information. links: figma: https://www.figma.com/design/TLnoT5AYQfy3tZ0H68BgOr/HDS-Icons?m=auto&node-id=164-0&t=uqfJ7Wtjy9AfhBtY-1 github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon diff --git a/website/docs/patterns/button-organization/partials/guidelines/alignment.md b/website/docs/patterns/button-organization/partials/guidelines/alignment.md index 3d0d71d995e..ebbf4e9e61d 100644 --- a/website/docs/patterns/button-organization/partials/guidelines/alignment.md +++ b/website/docs/patterns/button-organization/partials/guidelines/alignment.md @@ -1,6 +1,6 @@ ## Alignment -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. +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. !!! Info diff --git a/website/docs/patterns/button-organization/partials/guidelines/specifications.md b/website/docs/patterns/button-organization/partials/guidelines/specifications.md index 012d8b40090..552802bc775 100644 --- a/website/docs/patterns/button-organization/partials/guidelines/specifications.md +++ b/website/docs/patterns/button-organization/partials/guidelines/specifications.md @@ -1,3 +1,3 @@ -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. +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. 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. \ No newline at end of file diff --git a/website/docs/patterns/disabled-patterns/partials/guidelines/guidelines.md b/website/docs/patterns/disabled-patterns/partials/guidelines/guidelines.md index 2079bb45a70..3a6f342f002 100644 --- a/website/docs/patterns/disabled-patterns/partials/guidelines/guidelines.md +++ b/website/docs/patterns/disabled-patterns/partials/guidelines/guidelines.md @@ -6,7 +6,7 @@ When a user does not have permissions, hide the related actions, navigation item In this example, the user's role is **viewer**, and they cannot deploy or destroy a cluster. An explanation is unnecessary as users do not require additional functionality for their day-to-day tasks. -![Image showing two open dropdown lists with number of items shown based on user permissions, one with only one menu item, while the other has more options that allow for further capabilities.](/assets/patterns/disabled-patterns/permissions-example.png) +![Two open dropdown lists with number of items shown based on user permissions. The Viewer only has the option "View" and the Admin has the options "View", "Deploy", and "Delete".](/assets/patterns/disabled-patterns/permissions-example.png) Similarly, if a user has the permissions to update, show the relevant UI allowing them to do just that. @@ -15,7 +15,7 @@ Similarly, if a user has the permissions to update, show the relevant UI allowin When a user lands on a page they can't access, indicate why it's unavailable and provide guidance so the user can fix the error. Consider displaying a call to action so the user doesn't feel stuck. -![Showing a 403 error page with information about what is going on, with a way to go back and a way to log in with a different token](/assets/patterns/disabled-patterns/permissions-example-3.png) +![A card with the title "You are not authorized" and sub heading "Error 403". The paragraph reads "you must have service:read and node:read permissions on at least one node and an associated service to access the view. Ask your administrator if you think you should have this access". There is a link to go back and a button to log in with a different token.](/assets/patterns/disabled-patterns/permissions-example-3.png) ## Conditional availability @@ -25,7 +25,7 @@ When other steps must be taken to enable a feature or function, provide context In this example, the button is disabled without context, leaving the user confused and unaware of the steps to enable the feature. -![Showing an interface with a disabled button that doesn't describe why that button is disabled. This is not a recommended experience.](/assets/patterns/disabled-patterns/conditional-availability-example-disabled.png) +![A heading "Destruction and Deletion" with the subheading "Delete this instance", the paragraph "Deleting this instance will permanently remove it from your org and history. This action cannot be undone". The "Permanently delete" button is disabled.](/assets/patterns/disabled-patterns/conditional-availability-example-disabled.png) Disabled elements lack interactive states, preventing users from hovering, focusing, or clicking. For users with assistive technology, e.g., a screen reader, disabled elements (including their text) are almost entirely ignored. @@ -36,7 +36,7 @@ Disabled elements lack interactive states, preventing users from hovering, focus Instead, we recommended replacing the disabled element with contextual guidance to help users understand why this feature isn't available, and providing them with clear steps to enable it. -![Showing an interface with a compact alert explaining why the expected behavior isn't there with guidance.](/assets/patterns/disabled-patterns/conditional-availability-example-explanation.png) +![A heading "Destruction and Deletion" with an information alert that says the instance cannot be removed until the provisions are removed. There is a link to go to the page to remove the provisions.](/assets/patterns/disabled-patterns/conditional-availability-example-explanation.png) If possible, provide CTAs directly to the place where users can take immediate action. @@ -56,18 +56,18 @@ There are two ways to showcase an upgradable feature: When the page has space to showcase an upgradable feature, use it to explain how that feature can be a net positive to the user upon upgrading, and provide a CTA as a path forward. -!["Terraform Health" is an upgradable feature and is contextually relevant in the workspace. The UI has space to entice the user by explaining a bit of what this service can do for them.](/assets/patterns/disabled-patterns/upgrade-inline-example.png) +![A "Terraform Health" feature spotlight within a larger dashboard UI. It is dismissable, has a heading "Health" with text "Automatically detect drift and custom condition failures", and a link to enable.](/assets/patterns/disabled-patterns/upgrade-inline-example.png) ### Interrupting an action In this example, a user is about to perform an action and notices something new within the list of options. -![Showing an open dropdown list, with two list items. One for creating a static secret, and another using an auto-rotating secret with a beta badge next to it.](/assets/patterns/disabled-patterns/upgrade-modal-example-1.png) +![A dropdown list, with two list items: create a static secret, and auto-rotating secret with a beta badge next to it.](/assets/patterns/disabled-patterns/upgrade-modal-example-1.png) Enticed, they click it to use this feature, however, they are not enrolled in this tier and are interrupted by a modal explaining this feature a little more. -![A modal explaining beta to the user, with a CTA to learn more, or close the modal.](/assets/patterns/disabled-patterns/upgrade-modal-example-2.png) +![A modal with the heading "Join the beta program", with subheadings "Why Secret Rotation?" and "What do we offer?". Each has a paragraph explaining the feature. There is a link to request beta access, the primary action to learn more, and a secondary button to cancel.](/assets/patterns/disabled-patterns/upgrade-modal-example-2.png) Interrupting the action with a modal helps a user understand more without fully committing, and if more details are necessary they can be directed to an informational page. @@ -76,7 +76,7 @@ Interrupting the action with a modal helps a user understand more without fully In instances where outages may occur, provide a clear message to users on what they can do and add a link to [our status page](https://status.hashicorp.com/). -![Displaying Hashicorp's 500 internal error, providing a retry button and a link to the the status page.](/assets/patterns/disabled-patterns/service-outage-example.png) +![A card with the title "Internal server error" and sub heading "Error 500". The paragraph reads "the server had an internal error or misconfiguration and was unable to complete your request". There is a button to retry and a link to the Hashicorp status page.](/assets/patterns/disabled-patterns/service-outage-example.png) ## Incomplete flow @@ -86,7 +86,7 @@ In a form, always enable the submit button. When buttons are disabled, users are If a user clicks a form submit button but has failed to enter a value in a required field, display an error informing them how to fix the issue. -![Image showing a form after submission with an errored out input field with an error message explaining how to resolve the issue.](/assets/patterns/disabled-patterns/incomplete-flow-example.png) +![A form after submission with an errored out input field with an error message explaining how to resolve the issue. The submit button is still enabled.](/assets/patterns/disabled-patterns/incomplete-flow-example.png) !!! @@ -94,10 +94,11 @@ Learn more about [form validation patterns](/patterns/form-patterns?tab=validati ## Quota limitation -When the quota has been reached, hide the action allowing the user to create more objects. If they can opt to increase the quota, replace the original action with an action permitting them to do so. If the user cannot increase the quota, e.g., they don't have permission, direct them to a form. +When the quota has not been reached, display the action that allows the user to create more objects. -![Image showing a table of services with a button allowing the user to create a new service.](/assets/patterns/disabled-patterns/create-new-limitation-example.png) +![Services table with a "Create new" button.](/assets/patterns/disabled-patterns/create-new-limitation-example.png) -Once the quota has been reached, the "Create" action is hidden, and an [`Alert`](https://helios.hashicorp.design/components/alert) is displayed, indicating why new objects can no longer be created. +When the quota has been reached, hide the action allowing the user to create more objects. If they can opt to increase the quota, replace the original action with an action permitting them to do so. If the user cannot increase the quota, e.g., they don't have permission, display an [`Alert`](https://helios.hashicorp.design/components/alert) indicating why new objects can no longer be created and direct them to a way to upgrade. -![Image showing a table of services with an alert message explaining that the services limitation has been reached and providing them with an upgrade link.](/assets/patterns/disabled-patterns/create-new-limitation-reached-example.png) \ No newline at end of file + +![Services table with an information alert above that reads "Service limitation reached. You've used your 20 services limit on the free tier. Unlock access to more services by upgrading tiers now". "Upgrading tiers now" is a link.](/assets/patterns/disabled-patterns/create-new-limitation-reached-example.png) \ No newline at end of file diff --git a/website/docs/patterns/form-patterns/partials/guidelines/guidelines.md b/website/docs/patterns/form-patterns/partials/guidelines/guidelines.md index 0bb09f8a015..f7e35145822 100644 --- a/website/docs/patterns/form-patterns/partials/guidelines/guidelines.md +++ b/website/docs/patterns/form-patterns/partials/guidelines/guidelines.md @@ -4,7 +4,7 @@ Spacing between sections, fields, text, and other form elements should follow a ### Form -A **form** acts as a layout mechanism by wrapping the content, fields and actions to apply consistent spacing while simultaneously handling the logic for submitting information and data collected by the fields. +A **form** acts as a layout mechanism by wrapping the content, fields, and actions to apply consistent spacing while simultaneously handling the logic for submitting information and data collected by the fields. As a layout mechanism, a form consisting of more than one section should use a 32px gap in between sections. diff --git a/website/docs/patterns/table-multi-select/index.md b/website/docs/patterns/table-multi-select/index.md index 3a7de3efc3e..4b5d814a0f7 100644 --- a/website/docs/patterns/table-multi-select/index.md +++ b/website/docs/patterns/table-multi-select/index.md @@ -1,7 +1,7 @@ --- -title: Table Multi-select -description: Guidelines, compositions, and interaction patterns for selecting and transforming results in a Table. -caption: Guidelines, compositions, and interaction patterns for selecting and transforming results in a Table. +title: Table multi-select +description: Guidelines for selecting and transforming results in a Table. +caption: Guidelines for selecting and transforming results in a Table. links: figma: https://www.figma.com/design/5Pv32j4QiOOD8lkFTD1dxC/HDS-Patterns-v2.0?node-id=24-12938&t=cpJowBg8aXp4qAG1-1 related: ['components/table/table', 'components/table/advanced-table', 'patterns/filter-patterns', 'components/pagination'] diff --git a/website/docs/utilities/menu-primitive/partials/code/how-to-use.md b/website/docs/utilities/menu-primitive/partials/code/how-to-use.md index 8427402280d..ae821ec14c5 100644 --- a/website/docs/utilities/menu-primitive/partials/code/how-to-use.md +++ b/website/docs/utilities/menu-primitive/partials/code/how-to-use.md @@ -1,6 +1,6 @@ !!! Warning -The `MenuPrimitive` component is deprecated and will be removed in a future major release. We recommend migrating to [`PopoverPrimitive`](/utilities/popover-primitive). +The `MenuPrimitive` component is deprecated and will be removed in a future major release. It has been replaced internally with the [`PopoverPrimitive`](/utilities/popover-primitive). !!!