From ee8a6b745e7866cb0b07a9669f0da7cee88c308e Mon Sep 17 00:00:00 2001 From: Benjamin Grandfond Date: Tue, 3 Jan 2023 17:15:23 +0100 Subject: [PATCH] Add redirect (#16326) * Add redirect * Move the overview and top and rename the file to index.md --- _data/toc.yaml | 4 ++-- desktop/extensions-sdk/design/design-guidelines.md | 2 +- desktop/extensions-sdk/design/design-principles.md | 2 +- desktop/extensions-sdk/design/{overview.md => index.md} | 3 +++ desktop/extensions-sdk/design/mui-best-practices.md | 7 +++++-- desktop/extensions-sdk/dev/test-debug.md | 4 +++- desktop/extensions-sdk/extensions/labels.md | 4 +++- desktop/extensions-sdk/extensions/publish.md | 2 +- desktop/extensions-sdk/process.md | 2 +- 9 files changed, 20 insertions(+), 10 deletions(-) rename desktop/extensions-sdk/design/{overview.md => index.md} (97%) diff --git a/_data/toc.yaml b/_data/toc.yaml index 280a9497f7..2ede0a4ba8 100644 --- a/_data/toc.yaml +++ b/_data/toc.yaml @@ -1207,12 +1207,12 @@ manuals: path: /desktop/extensions-sdk/architecture/metadata/ - sectiontitle: "Design and UI styling" section: + - title: UI styling guidelines + path: /desktop/extensions-sdk/design/ - title: Guidelines path: /desktop/extensions-sdk/design/design-guidelines/ - title: Docker design principles path: /desktop/extensions-sdk/design/design-principles/ - - title: UI styling guidelines - path: /desktop/extensions-sdk/design/overview/ - title: MUI best practices path: /desktop/extensions-sdk/design/mui-best-practices/ - sectiontitle: "Developer Guides" diff --git a/desktop/extensions-sdk/design/design-guidelines.md b/desktop/extensions-sdk/design/design-guidelines.md index d5d2645eaa..010da7c7c1 100644 --- a/desktop/extensions-sdk/design/design-guidelines.md +++ b/desktop/extensions-sdk/design/design-guidelines.md @@ -67,5 +67,5 @@ When building your extension, ensure that first time users of the extension and ## What's next? - Explore our [design principles](design-principles.md). -- Take a look at our [UI styling guidelines](overview.md). +- Take a look at our [UI styling guidelines](index.md). - Learn how to [publish your extension](../extensions/index.md). diff --git a/desktop/extensions-sdk/design/design-principles.md b/desktop/extensions-sdk/design/design-principles.md index bc0904836e..8e48c547b4 100644 --- a/desktop/extensions-sdk/design/design-principles.md +++ b/desktop/extensions-sdk/design/design-principles.md @@ -26,5 +26,5 @@ Our products focus on inclusive growth and are continuously useful and adapt to ## What's next? -- Take a look at our [UI styling guidelines](overview.md). +- Take a look at our [UI styling guidelines](index.md). - Learn how to [publish your extension](../extensions/index.md). diff --git a/desktop/extensions-sdk/design/overview.md b/desktop/extensions-sdk/design/index.md similarity index 97% rename from desktop/extensions-sdk/design/overview.md rename to desktop/extensions-sdk/design/index.md index 1c27150bab..89e51f9f02 100644 --- a/desktop/extensions-sdk/design/overview.md +++ b/desktop/extensions-sdk/design/index.md @@ -2,6 +2,9 @@ title: UI styling overview description: Docker extension design keywords: Docker, extensions, design +redirect_from: +- /desktop/extensions-sdk/design/design-overview/ +- /desktop/extensions-sdk/design/overview/ --- Our Design System is a constantly evolving set of specifications that aim to ensure visual consistency across Docker products, and meet [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. We've opened parts of it to extension authors, documenting basic styles (color, typography) and components. See: [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771){:target="_blank" rel="noopener" class="_"}. diff --git a/desktop/extensions-sdk/design/mui-best-practices.md b/desktop/extensions-sdk/design/mui-best-practices.md index c2d1c531a1..f44fb8da42 100644 --- a/desktop/extensions-sdk/design/mui-best-practices.md +++ b/desktop/extensions-sdk/design/mui-best-practices.md @@ -4,7 +4,10 @@ description: Guidelines for using MUI to maximise compatibility with Docker Desk keywords: Docker, extensions, mui, theme, theming, material-ui, material --- -This article assumes you're following our recommended practice by using our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme){:target="_blank" rel="noopener" class="_"}. Following the steps below maximises compatibility with Docker Desktop and minimises the work you need to do as an extension author. They should be considered supplementary to the non-MUI-specific guidelines found in the [UI Styling overview](overview.md). +This article assumes you're following our recommended practice by using our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme){:target="_blank" rel="noopener" class="_"}. +Following the steps below maximises compatibility with Docker Desktop and minimises the work you need to do as an +extension author. They should be considered supplementary to the non-MUI-specific guidelines found in the +[UI Styling overview](index.md). ## Assume the theme can change at any time @@ -43,5 +46,5 @@ Some of the above options require you to extend our MUI theme. See the MUI docum ## What's next? -- Take a look at our [UI styling guide](overview.md). +- Take a look at our [UI styling guide](index.md). - Learn how to [publish your extension](../extensions/index.md). diff --git a/desktop/extensions-sdk/dev/test-debug.md b/desktop/extensions-sdk/dev/test-debug.md index 5c6ed97af0..29782ccaec 100644 --- a/desktop/extensions-sdk/dev/test-debug.md +++ b/desktop/extensions-sdk/dev/test-debug.md @@ -71,4 +71,6 @@ $ docker extension rm - Build an [advanced frontend](../build/frontend-extension-tutorial.md) extension. - Learn more about extensions [architecture](../architecture/index.md). -- Learn more about [designing the UI](../design/design-guidelines.md). +- Explore our [design principles](../design/design-principles.md). +- Take a look at our [UI styling guidelines](../design/index.md). +- Learn how to [publish your extension](../extensions/index.md). diff --git a/desktop/extensions-sdk/extensions/labels.md b/desktop/extensions-sdk/extensions/labels.md index 244bad0055..09cc72ff0f 100644 --- a/desktop/extensions-sdk/extensions/labels.md +++ b/desktop/extensions-sdk/extensions/labels.md @@ -35,7 +35,9 @@ Here is the list of labels you need to specify when building your extension: > HTML content styling > -> Docker Desktop will apply CSS styles to the provided HTML content. You can make sure that it renders correctly [within the marketplace](#preview-the-extension-in-the-marketplace). Docker recommends that you follow the [Styling guidelines](../design/overview.md). +> Docker Desktop will apply CSS styles to the provided HTML content. You can make sure that it renders correctly +> [within the marketplace](#preview-the-extension-in-the-marketplace). Docker recommends that you follow the +> [Styling guidelines](../design/index.md). ## Preview the extension in the Marketplace diff --git a/desktop/extensions-sdk/extensions/publish.md b/desktop/extensions-sdk/extensions/publish.md index b61c832881..efdaadfce1 100644 --- a/desktop/extensions-sdk/extensions/publish.md +++ b/desktop/extensions-sdk/extensions/publish.md @@ -22,7 +22,7 @@ These guidelines don't replace Docker's terms of service or guarantee approval. - Ensure that you’ve ran the [validation checks](validate.md) - Review the [design guidelines](../design/design-guidelines.md) -- Ensure the [UI styling](../design/overview.md) is in line with Docker Desktop guidelines +- Ensure the [UI styling](../design/index.md) is in line with Docker Desktop guidelines - Ensure your extensions support both light and dark mode - Consider the needs of both new and existing users of your extension - Test your extension with potential users diff --git a/desktop/extensions-sdk/process.md b/desktop/extensions-sdk/process.md index c57f254b72..f2d9503c65 100644 --- a/desktop/extensions-sdk/process.md +++ b/desktop/extensions-sdk/process.md @@ -18,7 +18,7 @@ The build process consists of: > Note > -> Whilst you're building your extension, make sure you follow our [design](design/design-guidelines.md) and [UI styling](design/overview.md) guidelines to ensure visual consistency and [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. +> Whilst you're building your extension, make sure you follow our [design](design/design-guidelines.md) and [UI styling](design/index.md) guidelines to ensure visual consistency and [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. For further inspiration, see the other examples in the [samples folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}.