Skip to content
Snippets Groups Projects
Commit 2854ca43 authored by Suzanne Selhorn's avatar Suzanne Selhorn
Browse files

Fixed broken external links

parent a6101523
No related branches found
No related tags found
1 merge request!72462Fixed broken external links
......@@ -12,7 +12,7 @@ Follow these guidelines when contributing or reviewing design and user interface
advice and best practices for code review in general.
The basis for most of these guidelines is [Pajamas](https://design.gitlab.com/),
GitLab design system. We encourage you to [contribute to Pajamas](https://design.gitlab.com/get-started/contribute)
GitLab design system. We encourage you to [contribute to Pajamas](https://design.gitlab.com/get-started/contribute/)
with additions and improvements.
## Merge request reviews
......@@ -32,9 +32,9 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
- Follow [Pajamas](https://design.gitlab.com/content/punctuation/) as the primary
guidelines for UI text and [documentation style guide](../documentation/styleguide/index.md)
as the secondary.
- Use clear and consistent [terminology](https://design.gitlab.com/content/terminology).
- Use clear and consistent [terminology](https://design.gitlab.com/content/terminology/).
- Check grammar and spelling.
- Consider help content and follow its [guidelines](https://design.gitlab.com/usability/helping-users).
- Consider help content and follow its [guidelines](https://design.gitlab.com/usability/helping-users/).
- Request review from the [appropriate Technical Writer](https://about.gitlab.com/handbook/engineering/ux/technical-writing/#designated-technical-writers),
indicating any specific files or lines they should review, and how to preview
or understand the location/context of the text from the user's perspective.
......@@ -43,20 +43,20 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
- Consider similar patterns used in the product and justify in the issue when diverging
from them.
- Use appropriate [components](https://design.gitlab.com/components/overview)
and [data visualizations](https://design.gitlab.com/data-visualization/overview).
- Use appropriate [components](https://design.gitlab.com/components/overview/)
and [data visualizations](https://design.gitlab.com/data-visualization/overview/).
### Visual design
Check visual design properties using your browser's _elements inspector_ ([Chrome](https://developer.chrome.com/docs/devtools/css/),
[Firefox](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector)).
- Use recommended [colors](https://design.gitlab.com/product-foundations/colors)
and [typography](https://design.gitlab.com/product-foundations/type-fundamentals).
- Follow [layout guidelines](https://design.gitlab.com/layout/grid).
- Use existing [icons](http://gitlab-org.gitlab.io/gitlab-svgs/) and [illustrations](http://gitlab-org.gitlab.io/gitlab-svgs/illustrations)
or propose new ones according to [iconography](https://design.gitlab.com/product-foundations/iconography)
and [illustration](https://design.gitlab.com/product-foundations/illustration)
- Use recommended [colors](https://design.gitlab.com/product-foundations/colors/)
and [typography](https://design.gitlab.com/product-foundations/type-fundamentals/).
- Follow [layout guidelines](https://design.gitlab.com/layout/grid/).
- Use existing [icons](http://gitlab-org.gitlab.io/gitlab-svgs/) and [illustrations](http://gitlab-org.gitlab.io/gitlab-svgs/illustrations/)
or propose new ones according to [iconography](https://design.gitlab.com/product-foundations/iconography/)
and [illustration](https://design.gitlab.com/product-foundations/illustration/)
guidelines.
- _Optionally_ consider [dark mode](../../user/profile/preferences.md#dark-mode). [^1]
......@@ -73,7 +73,7 @@ like `:hover` and others ([Chrome](https://developer.chrome.com/docs/devtools/cs
- Account for states dependent on data size ([empty](https://design.gitlab.com/regions/empty-states),
some data, and lots of data).
- Account for states dependent on user role, user preferences, and subscription.
- Consider animations and transitions, and follow their [guidelines](https://design.gitlab.com/product-foundations/motion).
- Consider animations and transitions, and follow their [guidelines](https://design.gitlab.com/product-foundations/motion/).
### Responsive
......@@ -90,8 +90,8 @@ Check accessibility using your browser's _accessibility inspector_ ([Chrome](htt
[Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#accessing_the_accessibility_inspector)).
- Conform to level AA of the World Wide Web Consortium (W3C) [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/),
according to our [statement of compliance](https://design.gitlab.com/accessibility/a11y).
- Follow accessibility [best practices](https://design.gitlab.com/accessibility/best-practices)
according to our [statement of compliance](https://design.gitlab.com/accessibility/a11y/).
- Follow accessibility [best practices](https://design.gitlab.com/accessibility/best-practices/)
and [checklist](../fe_guide/accessibility.md#quick-checklist).
### Handoff
......
......@@ -61,7 +61,7 @@ Therefore, you should postpone this effort until the [experiment cleanup process
We recommend the following workflow:
1. Review the Pajamas guidelines for [icons](https://design.gitlab.com/product-foundations/iconography) and [illustrations](https://design.gitlab.com/product-foundations/illustration).
1. Review the Pajamas guidelines for [icons](https://design.gitlab.com/product-foundations/iconography/) and [illustrations](https://design.gitlab.com/product-foundations/illustration/).
1. Add an icon or illustration as an `.svg` file in the `/app/assets/images` (or EE) path in the GitLab repository.
1. Use `image_tag` or `image_path` to render it via the asset pipeline.
1. **If the experiment is a success**, designers add the new icon or illustration to the Pajamas UI kit as part of the cleanup process.
......
......@@ -334,7 +334,7 @@ Keep in mind that:
- When you add `:hover` styles, in most cases you should add `:focus` styles too so that the styling is applied for both mouse **and** keyboard users.
- If you remove an interactive element's `outline`, make sure you maintain visual focus state in another way such as with `box-shadow`.
See the [Pajamas Keyboard-only page](https://design.gitlab.com/accessibility-audits/keyboard-only) for more detail.
See the [Pajamas Keyboard-only page](https://design.gitlab.com/accessibility-audits/keyboard-only/) for more detail.
## Tabindex
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment