From 51dcf2c25969ac587a83e7cc0cb6a2c5c4a8c8d3 Mon Sep 17 00:00:00 2001 From: Cassandra Tam Date: Fri, 20 Dec 2024 15:56:34 +1100 Subject: [PATCH] docs: fix broken styles --- .changeset/metal-jars-appear.md | 2 + docs/.storybook/preview.css | 4 ++ docs/pages/app-starter.mdx | 8 +++- docs/pages/welcome.mdx | 2 +- packages/components/src/Tag/_docs/Tag.mdx | 2 +- .../src/__rc__/Tooltip/_docs/Tooltip.mdx | 4 +- .../src/_docs/pages/configuration.mdx | 37 +++++++++++-------- .../src/_docs/pages/getting-started.mdx | 10 ++--- .../src/_docs/pages/working-with-tailwind.mdx | 4 +- 9 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 .changeset/metal-jars-appear.md diff --git a/.changeset/metal-jars-appear.md b/.changeset/metal-jars-appear.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/metal-jars-appear.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/docs/.storybook/preview.css b/docs/.storybook/preview.css index 7252487611c..d7c4a5b038e 100644 --- a/docs/.storybook/preview.css +++ b/docs/.storybook/preview.css @@ -97,6 +97,10 @@ pre code { } } + .sbdocs-a { + font: inherit; + } + :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) { margin: 0; padding: 0; diff --git a/docs/pages/app-starter.mdx b/docs/pages/app-starter.mdx index 07174d1109c..bb2cc3d511e 100644 --- a/docs/pages/app-starter.mdx +++ b/docs/pages/app-starter.mdx @@ -12,8 +12,12 @@ Whilst the Kaizen Design System mainly focuses on the more atomic components in - You won't need to apply any of the below if you have the latest{' '} - next-template. + { + <> + You won't need to apply any of the below if you have the latest{' '} + next-template. + + } diff --git a/docs/pages/welcome.mdx b/docs/pages/welcome.mdx index 3b515b96781..23179540b68 100644 --- a/docs/pages/welcome.mdx +++ b/docs/pages/welcome.mdx @@ -6,7 +6,7 @@ import { Meta } from '@storybook/blocks' Kaizen aims to provide standard components which enable teams to build UI as efficiently as possibe while maintaining a high level of quality, accessibility and consistency with thle overall platform. -To achieve this, Kaizen provides a set of React components and tokens which represent the foundations of any UI (colours, spacing, font sizes etc.). We aim to have what's represeted here in code equally matching Figma, to enable cross-functional teams to communicate with the same language and ease of translation from design to code. +To achieve this, Kaizen provides a set of React components and tokens which represent the foundations of any UI (colours, spacing, font sizes etc). We aim to have what's represeted here in code equally matching Figma, to enable cross-functional teams to communicate with the same language and ease of translation from design to code. ## Getting started diff --git a/packages/components/src/Tag/_docs/Tag.mdx b/packages/components/src/Tag/_docs/Tag.mdx index 4550e6742c6..e5621f1d437 100644 --- a/packages/components/src/Tag/_docs/Tag.mdx +++ b/packages/components/src/Tag/_docs/Tag.mdx @@ -17,7 +17,7 @@ import * as TagStories from './Tag.stories' {`This version of the Tag will soon be deprecated and will be removed in the next major release. - Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`} + Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`} diff --git a/packages/components/src/__rc__/Tooltip/_docs/Tooltip.mdx b/packages/components/src/__rc__/Tooltip/_docs/Tooltip.mdx index 8a0bc1ac9a6..7818cc0a198 100644 --- a/packages/components/src/__rc__/Tooltip/_docs/Tooltip.mdx +++ b/packages/components/src/__rc__/Tooltip/_docs/Tooltip.mdx @@ -87,7 +87,7 @@ Tooltips should never stop a user (or be a gate) from completing a task or perfo #### Do be concise -Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform. +Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don't use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform. @@ -107,7 +107,7 @@ Good tooltips contain concise and helpful information, keep it short. If you nee ### Trigger - A tooltip trigger needs to be discoverable: - - E.g. something like an icon to suggest there’s a tooltip. + - E.g. something like an icon to suggest there's a tooltip. - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline) - A tooltip should be shown and accessible on hover, click or on focus events. diff --git a/packages/tailwind/src/_docs/pages/configuration.mdx b/packages/tailwind/src/_docs/pages/configuration.mdx index b4f67bf0ced..d4a519d7a77 100644 --- a/packages/tailwind/src/_docs/pages/configuration.mdx +++ b/packages/tailwind/src/_docs/pages/configuration.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/blocks' +import { Meta, Unstyled } from '@storybook/blocks' import { InlineNotification } from '~components/Notification' @@ -58,17 +58,24 @@ If this is changed or you are not using the [Frontend Template](https://github.c
{/* Application code */}
``` - - We advise using an id with "#root" as the default selector. - Using different id's, classes or HTML elements like body as the selector could - result in: -
    -
  • - Utility classes not superseding Kaizen defaults when using classNameOverride -
    • -
  • - Duplication of utillity classes in your CSS bundle caused by consuming components with - different important selectors -
    • -
- + + + { + <> + We advise using an id with "#root" as the default + selector. Using different id's, classes or HTML elements like body as the + selector could result in: +
    +
  • + Utility classes not superseding Kaizen defaults when using{' '} + classNameOverride +
    • +
  • + Duplication of utillity classes in your CSS bundle caused by consuming components with + different important selectors +
    • +
+ + } + + diff --git a/packages/tailwind/src/_docs/pages/getting-started.mdx b/packages/tailwind/src/_docs/pages/getting-started.mdx index 633d294eb29..63fc5588df8 100644 --- a/packages/tailwind/src/_docs/pages/getting-started.mdx +++ b/packages/tailwind/src/_docs/pages/getting-started.mdx @@ -23,7 +23,7 @@ If your project was created from this template, you should only need to do [Step ## 1. Install the preset ```bash -yarn add -D @kaizen/tailwind +pnpm add -D @kaizen/tailwind ``` ## 2. Implement the Preset @@ -50,7 +50,7 @@ module.exports = { } ``` -For preset configuration options, see our [configuration docs](/story/systems-tailwind-configuration--page) +For preset configuration options, see our [configuration docs](/story/systems-tailwind-configuration--page). ## 3. Add the Tailwind Directives @@ -71,11 +71,11 @@ For more information, see [here](https://tailwindcss.com/docs/functions-and-dire Tailwind Play is an online code sandbox with Tailwind set up out of the box. The Kaizen Team has created an instance with the Kaizen Preset values [here](https://play.tailwindcss.com/OUogvUgXQR) -Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit ‘Share’ - it’ll create a new url without overriding the one provided here. +Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit 'Share' - it'll create a new url without overriding the one provided here. Tailwind Play -The playground also has a great “Generated CSS” feature that let’s you see which css classes are generated by your preset when you implement tailwind utilities. It’s a great way to see what Tailwind is doing under the hood. +The playground also has a great “Generated CSS” feature that let's you see which css classes are generated by your preset when you implement tailwind utilities. It's a great way to see what Tailwind is doing under the hood.
CSS Generation @@ -122,4 +122,4 @@ Check it out [here](https://marketplace.visualstudio.com/items?itemName=moalamri ### Prettier plugin Tailwind now has prettier support! 🎉 This [prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) will order your classnames for you. -We’d highly recommend it for the sake of consistency. The Tailwind docs even have a guide [here](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier). +We'd highly recommend it for the sake of consistency. The Tailwind docs even have a guide [here](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier). diff --git a/packages/tailwind/src/_docs/pages/working-with-tailwind.mdx b/packages/tailwind/src/_docs/pages/working-with-tailwind.mdx index 757b5fbd846..c45b3590987 100644 --- a/packages/tailwind/src/_docs/pages/working-with-tailwind.mdx +++ b/packages/tailwind/src/_docs/pages/working-with-tailwind.mdx @@ -16,7 +16,7 @@ This page describes and demonstrates the main intended use cases for this packag ## Spacing and layouts -For information about Cultureamp's spacing and layout system in general, see [here](/story/systems-layout-and-spacing--page) +For information about Cultureamp's spacing and layout system in general, see [here](/story/systems-layout-and-spacing--page). When building a page, ideally [Kaizen](https://github.com/cultureamp/kaizen-design-system) components should be used as much as possible, with the front-end engineer responsible for the spacing between them. In these cases, our Tailwind preset makes it easy by adding our spacing tokens to Tailwind's core spacing modules. @@ -46,7 +46,7 @@ In this example, a Tailwind css rule is being applied to a Kaizen `` -- first-letter:capitalize: Adds text-transform: capitalize on the first-letter pseudo selector +- `first-letter:capitalize`: Adds text-transform: capitalize on the first-letter pseudo selector