From e6ba3b4ba24f21bbd81eed7b6e665207f3211f98 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Wed, 24 Apr 2024 16:57:00 +0200 Subject: [PATCH 01/11] feat: add basic `` component --- docs/src/assets/landing.css | 14 + .../content/docs/reference/link-button.mdx | 312 ++++++++++++++++++ packages/starlight/components.ts | 1 + packages/starlight/style/markdown.css | 4 +- .../user-components/LinkButton.astro | 69 ++++ 5 files changed, 398 insertions(+), 2 deletions(-) create mode 100644 docs/src/content/docs/reference/link-button.mdx create mode 100644 packages/starlight/user-components/LinkButton.astro diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index 88f6c63525..fa0c61f3d2 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -25,3 +25,17 @@ [data-has-hero] .hero > img { filter: drop-shadow(0 0 3rem var(--overlay-blurple)); } + +/* // TODO(HiDeoo) Remove these styles */ + +.sl-link-button.custom-link-button.primary { + background-color: green; +} + +.sl-link-button.custom-link-button.secondary { + border-color: green; + color: green; +} +.sl-link-button.custom-link-button.minimal { + color: green; +} diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx new file mode 100644 index 0000000000..99b8b9a49e --- /dev/null +++ b/docs/src/content/docs/reference/link-button.mdx @@ -0,0 +1,312 @@ +--- +title: ⚠️ Link button demo page ⚠️ +--- + +:::danger +// TODO(HiDeoo) Remove this page +::: + +import { Card, CardGrid, Icon, LinkButton, Steps, Tabs, TabItem } from '@astrojs/starlight/components'; + +## Basics + +The following examples are basic link buttons. + + + Primary + + + Secondary + + + Minimal (explicit) + +Minimal (implicit) + +And some text after the links. + +## Icons + +The following examples are link buttons with icon after the text (default). + + + Primary + + + Secondary + + + Minimal + + +The following examples are link buttons with icon before the text (using the `iconPlacement="start"`). + + + Primary + + + Secondary + + + Minimal + + +The following examples are link buttons with icon after the text (using the `iconPlacement="end"`) + + + Primary + + + Secondary + + + Minimal + + +The following examples are link buttons with only an icon and an `aria-label`. + + + + +The following example is a link button with only an icon using the `` component with a size specified by the user and an `aria-label`. + + + + + +## Custom class + +The following examples are link buttons with a custom class that changes some styles. + + + Primary + + + Secondary + + + Minimal + + +## Long text + +The following examples is a link button with a very long text in it. + + + This is a very very very very very very very very long text + + +## Interleaved content + +The following example are 2 link buttons with a code block in between. + + + Primary + + +```js +console.log('some content in between'); +``` + + + Secondary + + +## Markdown content + +The following example is a link button with markdown content in it. + + + + _Primary in italic_ + + + +## RTL + +The following examples are link buttons in a block in RTL where the icon is before the text. + +
+ + + Primary + + + Secondary + + + Minimal + + +
+ +The following examples are link buttons in a block in RTL where the icon is after the text. + +
+ + + Primary + + + + Secondary + + + Minimal + + +
+ +The following example is a link button in RTL where the icon is before the text. + + + Primary + + +The following example is a link button in RTL where the icon is after the text. + + + Primary + + +## Asides + +The following examples are asides with link buttons. + +:::note +This is the note aside content + + + Primary + + + Secondary + + + Minimal + + +::: + +:::tip +This is the tip aside content + + + Primary + + + Secondary + + + Minimal + + +::: + +:::caution +This is the caution aside content + + + Primary + + + Secondary + + + Minimal + + +::: + +:::danger +This is the danger aside content + + + Primary + + + Secondary + + + Minimal + + +::: + +## Tabs + +The following examples are tabs with link buttons. + + + + + Star 1 + + + Star 2 + + + Star 3 + + + + + Star 1 + + + Star 2 + + + Star 3 + + + + +## Cards + +The following example is a card with a link button. + + + + Primary + + + +The following examples are cards in a grid with link buttons. + + + + + More stars + + + + + More moons + + + + +## Steps + +The following example is a link button in a step. + + + +1. Do something + +2. Step two has some more information with link buttons + + + Primary + + + Secondary + + + Minimal + + +3. And finally do something else + + diff --git a/packages/starlight/components.ts b/packages/starlight/components.ts index e564b62b73..1c207f69db 100644 --- a/packages/starlight/components.ts +++ b/packages/starlight/components.ts @@ -7,4 +7,5 @@ export { default as TabItem } from './user-components/TabItem.astro'; export { default as LinkCard } from './user-components/LinkCard.astro'; export { default as Steps } from './user-components/Steps.astro'; export { default as FileTree } from './user-components/FileTree.astro'; +export { default as LinkButton } from './user-components/LinkButton.astro'; export { Code } from 'astro-expressive-code/components'; diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index d0e2248eb1..b5388c66cf 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -62,10 +62,10 @@ font-size: var(--sl-text-h6); } -.sl-markdown-content a:not(:where(.not-content *)) { +.sl-markdown-content a:not(:where(:is(.not-content, .not-content *))) { color: var(--sl-color-text-accent); } -.sl-markdown-content a:hover:not(:where(.not-content *)) { +.sl-markdown-content a:hover:not(:where(:is(.not-content, .not-content *))) { color: var(--sl-color-white); } diff --git a/packages/starlight/user-components/LinkButton.astro b/packages/starlight/user-components/LinkButton.astro new file mode 100644 index 0000000000..bb16605ae3 --- /dev/null +++ b/packages/starlight/user-components/LinkButton.astro @@ -0,0 +1,69 @@ +--- +import type { HTMLAttributes } from 'astro/types'; +import { Icons } from '../components/Icons'; +import Icon from './Icon.astro'; + +interface Props extends Omit, 'href'> { + href: string | URL; + icon?: keyof typeof Icons; + iconPlacement?: 'start' | 'end'; + variant?: 'primary' | 'secondary' | 'minimal'; +} + +const { + class: className, + icon, + iconPlacement = 'end', + variant = 'minimal', + ...attrs +} = Astro.props; +--- + + + {icon && iconPlacement === 'start' && } + + {icon && iconPlacement === 'end' && } + + + From ed168b5f4b6f64dd0629323b7beee13db81ba3f5 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 25 Apr 2024 09:43:50 +0200 Subject: [PATCH 02/11] chore: update examples --- .../content/docs/reference/link-button.mdx | 169 +++++++++++++----- 1 file changed, 127 insertions(+), 42 deletions(-) diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx index 99b8b9a49e..7727fbcd33 100644 --- a/docs/src/content/docs/reference/link-button.mdx +++ b/docs/src/content/docs/reference/link-button.mdx @@ -6,7 +6,15 @@ title: ⚠️ Link button demo page ⚠️ // TODO(HiDeoo) Remove this page ::: -import { Card, CardGrid, Icon, LinkButton, Steps, Tabs, TabItem } from '@astrojs/starlight/components'; +import { + Card, + CardGrid, + Icon, + LinkButton, + Steps, + Tabs, + TabItem, +} from '@astrojs/starlight/components'; ## Basics @@ -41,13 +49,28 @@ The following examples are link buttons with icon after the text (default). The following examples are link buttons with icon before the text (using the `iconPlacement="start"`). - + Primary - + Secondary - + Minimal @@ -56,7 +79,12 @@ The following examples are link buttons with icon after the text (using the `ico Primary - + Secondary @@ -65,8 +93,18 @@ The following examples are link buttons with icon after the text (using the `ico The following examples are link buttons with only an icon and an `aria-label`. - - + + The following example is a link button with only an icon using the `` component with a size specified by the user and an `aria-label`. @@ -78,13 +116,28 @@ The following example is a link button with only an icon using the `` comp The following examples are link buttons with a custom class that changes some styles. - + Primary - + Secondary - + Minimal @@ -118,7 +171,7 @@ The following example is a link button with markdown content in it. - _Primary in italic_ + _Primary in italic_ @@ -128,13 +181,28 @@ The following examples are link buttons in a block in RTL where the icon is befo
- + Primary - + Secondary - + Minimal @@ -148,7 +216,12 @@ The following examples are link buttons in a block in RTL where the icon is afte Primary - + Secondary @@ -159,13 +232,25 @@ The following examples are link buttons in a block in RTL where the icon is afte The following example is a link button in RTL where the icon is before the text. - + Primary The following example is a link button in RTL where the icon is after the text. - + Primary @@ -238,8 +323,8 @@ This is the danger aside content The following examples are tabs with link buttons. - - + + Star 1 @@ -248,18 +333,18 @@ The following examples are tabs with link buttons. Star 3 - - - - Star 1 + + + + Moon 1 - Star 2 + Moon 2 - Star 3 + Moon 3 - + ## Cards @@ -275,16 +360,16 @@ The following example is a card with a link button. The following examples are cards in a grid with link buttons. - - + + More stars - - - + + + More moons - + ## Steps @@ -297,16 +382,16 @@ The following example is a link button in a step. 2. Step two has some more information with link buttons - - Primary - - - Secondary - - - Minimal - + + Primary + + + Secondary + + + Minimal + -3. And finally do something else +3. And finally do something else From f9cd54ca3bd4329c9ecd0f90588c60c4ee013490 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 25 Apr 2024 09:49:50 +0200 Subject: [PATCH 03/11] feat: replace `` internal component with new `` component --- .../starlight/components/CallToAction.astro | 51 ------------------- packages/starlight/components/Hero.astro | 9 ++-- packages/starlight/package.json | 4 -- .../user-components/LinkButton.astro | 16 +++--- 4 files changed, 15 insertions(+), 65 deletions(-) delete mode 100644 packages/starlight/components/CallToAction.astro diff --git a/packages/starlight/components/CallToAction.astro b/packages/starlight/components/CallToAction.astro deleted file mode 100644 index 591ffab086..0000000000 --- a/packages/starlight/components/CallToAction.astro +++ /dev/null @@ -1,51 +0,0 @@ ---- -import type { HTMLAttributes } from 'astro/types'; -import Icon from '../user-components/Icon.astro'; -import type { Icons } from './Icons'; - -interface Props { - variant: 'primary' | 'secondary' | 'minimal'; - link: string; - icon?: undefined | { type: 'icon'; name: keyof typeof Icons } | { type: 'raw'; html: string }; - attrs?: Omit, 'href'>; -} - -const { link, variant, icon } = Astro.props; -const { class: customClass, ...attrs } = Astro.props.attrs || {}; ---- - - - - {icon?.type === 'icon' && } - {icon?.type === 'raw' && } - - - diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro index f763ce227e..51be009ab4 100644 --- a/packages/starlight/components/Hero.astro +++ b/packages/starlight/components/Hero.astro @@ -2,7 +2,7 @@ import { Image } from 'astro:assets'; import { PAGE_TITLE_ID } from '../constants'; import type { Props } from '../props'; -import CallToAction from './CallToAction.astro'; +import LinkButton from '../user-components/LinkButton.astro'; const { data } = Astro.props.entry; const { title = data.title, tagline, image, actions = [] } = data.hero || {}; @@ -50,8 +50,11 @@ if (image) { { actions.length > 0 && (
- {actions.map(({ text, ...attrs }) => ( - + {actions.map(({ attrs, icon, link: href, text, variant }) => ( + + {text} + {icon?.html && } + ))}
) diff --git a/packages/starlight/package.json b/packages/starlight/package.json index 4f086a56ec..2db8a7ff95 100644 --- a/packages/starlight/package.json +++ b/packages/starlight/package.json @@ -50,10 +50,6 @@ "types": "./components/Sidebar.astro.tsx", "import": "./components/Sidebar.astro" }, - "./components/CallToAction.astro": { - "types": "./components/CallToAction.astro.tsx", - "import": "./components/CallToAction.astro" - }, "./components/MarkdownContent.astro": { "types": "./components/MarkdownContent.astro.tsx", "import": "./components/MarkdownContent.astro" diff --git a/packages/starlight/user-components/LinkButton.astro b/packages/starlight/user-components/LinkButton.astro index bb16605ae3..8c8056cc7c 100644 --- a/packages/starlight/user-components/LinkButton.astro +++ b/packages/starlight/user-components/LinkButton.astro @@ -5,8 +5,8 @@ import Icon from './Icon.astro'; interface Props extends Omit, 'href'> { href: string | URL; - icon?: keyof typeof Icons; - iconPlacement?: 'start' | 'end'; + icon?: keyof typeof Icons | undefined; + iconPlacement?: 'start' | 'end' | undefined; variant?: 'primary' | 'secondary' | 'minimal'; } @@ -34,7 +34,6 @@ const { font-size: var(--sl-text-sm); gap: 0.5em; line-height: 1.7145; - margin-inline-end: 0.5em; padding: 0.5rem 1.125rem; text-decoration: none; } @@ -51,10 +50,6 @@ const { padding-inline: 0; } - .sl-link-button:not(:where(p *)) { - margin-block: 1rem; - } - .sl-link-button :global(svg) { flex-shrink: 0; } @@ -66,4 +61,11 @@ const { padding: 1rem 1.25rem; } } + + :global(.sl-markdown-content) .sl-link-button { + margin-inline-end: 0.5em; + } + :global(.sl-markdown-content) .sl-link-button:not(:where(p *)) { + margin-block: 1rem; + } From 50359b3550135f05239df863ff0f84dcef8adb78 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 25 Apr 2024 10:26:30 +0200 Subject: [PATCH 04/11] docs: add `` documentation --- docs/src/content/docs/guides/components.mdx | 41 +++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx index a193175b38..d3875250d5 100644 --- a/docs/src/content/docs/guides/components.mdx +++ b/docs/src/content/docs/guides/components.mdx @@ -178,6 +178,47 @@ import { LinkCard } from '@astrojs/starlight/components'; +### Link Buttons + +Use the `` component for visually distinct and emphasized call to action links best suited to sparingly direct users to the most relevant or actionable content at the end of a section. + +A `` requires an [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) attribute and optionally accepts other link attributes such as `target`. + +The `icon` attribute can optionally be set to the name of [one of Starlight's built-in icons](#all-icons) to include an icon next to the text. +The `iconPlacement` attribute can be used to place the icon before the text by setting it to `start` (defaults to `end`). + +Customize the appearance of the link button using the `variant` attribute, which can be set to `primary`, `secondary`, or `minimal` (the default). + +```mdx +# src/content/docs/example.mdx + +import { LinkButton } from '@astrojs/starlight/components'; + + + Get started + + + Related: Astro + + + More about internationalization + +``` + +The above code generates the following on the page: + +import { LinkButton } from '@astrojs/starlight/components'; + + + Get started + + + Related: Astro + + + More about internationalization + + ### Asides Asides (also known as “admonitions” or “callouts”) are useful for displaying secondary information alongside a page’s main content. From 93b2de1b8c183d555d128d7de797656caaa8a480 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 25 Apr 2024 13:00:25 +0200 Subject: [PATCH 05/11] chore: add changeset --- .changeset/chilled-pots-eat.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilled-pots-eat.md diff --git a/.changeset/chilled-pots-eat.md b/.changeset/chilled-pots-eat.md new file mode 100644 index 0000000000..e5c56b35d5 --- /dev/null +++ b/.changeset/chilled-pots-eat.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': minor +--- + +Adds `` component for visually distinct and emphasized call to action links From e27304718ff7c972dba9cbd9a9949e52b33ceaa5 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 25 Apr 2024 13:07:37 +0200 Subject: [PATCH 06/11] chore: fix rtl example --- docs/src/content/docs/reference/link-button.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx index 7727fbcd33..dd91720064 100644 --- a/docs/src/content/docs/reference/link-button.mdx +++ b/docs/src/content/docs/reference/link-button.mdx @@ -214,7 +214,6 @@ The following examples are link buttons in a block in RTL where the icon is afte Primary - Date: Mon, 29 Apr 2024 12:12:25 +0200 Subject: [PATCH 07/11] refactor: change hero component action button default variant to `primary` --- .changeset/thirty-students-sit.md | 16 ++++++++++++++++ docs/src/content/docs/index.mdx | 5 +++-- docs/src/content/docs/reference/frontmatter.md | 6 +++--- packages/starlight/schemas/hero.ts | 4 ++-- 4 files changed, 24 insertions(+), 7 deletions(-) create mode 100644 .changeset/thirty-students-sit.md diff --git a/.changeset/thirty-students-sit.md b/.changeset/thirty-students-sit.md new file mode 100644 index 0000000000..40deed7555 --- /dev/null +++ b/.changeset/thirty-students-sit.md @@ -0,0 +1,16 @@ +--- +'@astrojs/starlight': minor +--- + +Changes the hero component action button default [variant](https://starlight.astro.build/reference/frontmatter/#heroconfig) from `minimal` to `primary`. + +If you want to preserve the previous behavior, hero component action button previously declared without a `variant` will need to be updated to include the `variant` property with the value `minimal`. + +```diff +hero: + actions: + - text: View on GitHub + link: https://github.com/astronaut/my-project + icon: external ++ variant: minimal +``` diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 79c5ba60c9..d1dee8feee 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -15,10 +15,10 @@ hero: actions: - text: Get started icon: right-arrow - variant: primary link: /getting-started/ - text: View on GitHub icon: external + variant: minimal link: https://github.com/withastro/starlight --- @@ -69,8 +69,9 @@ import Testimonial from '~/components/testimonial.astro'; Starlight is our go-to example of a great DX: the speed, convenience, and attention to details is inspiring. It takes care of the tech and the looks, so you can focus on your content 👏 - + StackBlitz team absolutely loves it! + ; }>; } diff --git a/packages/starlight/schemas/hero.ts b/packages/starlight/schemas/hero.ts index 0c335124bb..6ecc50df13 100644 --- a/packages/starlight/schemas/hero.ts +++ b/packages/starlight/schemas/hero.ts @@ -49,8 +49,8 @@ export const HeroSchema = ({ image }: SchemaContext) => text: z.string(), /** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */ link: z.string(), - /** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */ - variant: z.enum(['primary', 'secondary', 'minimal']).default('minimal'), + /** Button style to use. One of `primary` (the default), `secondary`, or `minimal`. */ + variant: z.enum(['primary', 'secondary', 'minimal']).default('primary'), /** * An optional icon to display alongside the link text. * Can be an inline `` or the name of one of Starlight’s built-in icons. From 15580a8b6ee9c1665788a9fe6d0472a4669d5b03 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 29 Apr 2024 12:18:42 +0200 Subject: [PATCH 08/11] refactor: change `` default variant to `primary` --- docs/src/content/docs/guides/components.mdx | 16 +++------------- docs/src/content/docs/reference/link-button.mdx | 6 +++--- .../starlight/user-components/LinkButton.astro | 2 +- 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx index d3875250d5..35852e01b9 100644 --- a/docs/src/content/docs/guides/components.mdx +++ b/docs/src/content/docs/guides/components.mdx @@ -187,37 +187,27 @@ A `` requires an [`href`](https://developer.mozilla.org/en-US/docs/W The `icon` attribute can optionally be set to the name of [one of Starlight's built-in icons](#all-icons) to include an icon next to the text. The `iconPlacement` attribute can be used to place the icon before the text by setting it to `start` (defaults to `end`). -Customize the appearance of the link button using the `variant` attribute, which can be set to `primary`, `secondary`, or `minimal` (the default). +Customize the appearance of the link button using the `variant` attribute, which can be set to `primary` (the default), `secondary`, or `minimal`. ```mdx # src/content/docs/example.mdx import { LinkButton } from '@astrojs/starlight/components'; - - Get started - +Get started Related: Astro - - More about internationalization - ``` The above code generates the following on the page: import { LinkButton } from '@astrojs/starlight/components'; - - Get started - +Get started Related: Astro - - More about internationalization - ### Asides diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx index dd91720064..6089124bcc 100644 --- a/docs/src/content/docs/reference/link-button.mdx +++ b/docs/src/content/docs/reference/link-button.mdx @@ -21,15 +21,15 @@ import { The following examples are basic link buttons. - Primary + Primary (explicit) +Primary (implicit) Secondary - Minimal (explicit) + Minimal -Minimal (implicit) And some text after the links. diff --git a/packages/starlight/user-components/LinkButton.astro b/packages/starlight/user-components/LinkButton.astro index 8c8056cc7c..225df10930 100644 --- a/packages/starlight/user-components/LinkButton.astro +++ b/packages/starlight/user-components/LinkButton.astro @@ -14,7 +14,7 @@ const { class: className, icon, iconPlacement = 'end', - variant = 'minimal', + variant = 'primary', ...attrs } = Astro.props; --- From 0a8be2f9d9b4397ff9c48b3afc4a286f0287cff0 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 3 May 2024 12:17:07 +0200 Subject: [PATCH 09/11] chore: improve a11y of custom class example --- docs/src/assets/landing.css | 13 +++---------- docs/src/content/docs/reference/link-button.mdx | 2 +- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index fa0c61f3d2..70a3dea939 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -28,14 +28,7 @@ /* // TODO(HiDeoo) Remove these styles */ -.sl-link-button.custom-link-button.primary { - background-color: green; -} - -.sl-link-button.custom-link-button.secondary { - border-color: green; - color: green; -} -.sl-link-button.custom-link-button.minimal { - color: green; +.sl-link-button.custom-link-button { + text-decoration: underline; + text-underline-offset: 0.25rem; } diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx index 6089124bcc..f2cf40f96e 100644 --- a/docs/src/content/docs/reference/link-button.mdx +++ b/docs/src/content/docs/reference/link-button.mdx @@ -114,7 +114,7 @@ The following example is a link button with only an icon using the `` comp ## Custom class -The following examples are link buttons with a custom class that changes some styles. +The following examples are link buttons with a custom class that changes some styles to apply some underline to the text. Date: Fri, 3 May 2024 16:05:22 +0200 Subject: [PATCH 10/11] fix: ensure consistent link button heights --- packages/starlight/user-components/LinkButton.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/starlight/user-components/LinkButton.astro b/packages/starlight/user-components/LinkButton.astro index 225df10930..c6beec9987 100644 --- a/packages/starlight/user-components/LinkButton.astro +++ b/packages/starlight/user-components/LinkButton.astro @@ -40,6 +40,7 @@ const { .sl-link-button.primary { background: var(--sl-color-text-accent); + border: 1px solid var(--sl-color-text-accent); color: var(--sl-color-black); } .sl-link-button.secondary { From 54beb605abba0faf3950edbf8fcf6a7c67185877 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 3 May 2024 16:08:46 +0200 Subject: [PATCH 11/11] chore: remove demo page --- docs/src/assets/landing.css | 7 - .../content/docs/reference/link-button.mdx | 396 ------------------ 2 files changed, 403 deletions(-) delete mode 100644 docs/src/content/docs/reference/link-button.mdx diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index 70a3dea939..88f6c63525 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -25,10 +25,3 @@ [data-has-hero] .hero > img { filter: drop-shadow(0 0 3rem var(--overlay-blurple)); } - -/* // TODO(HiDeoo) Remove these styles */ - -.sl-link-button.custom-link-button { - text-decoration: underline; - text-underline-offset: 0.25rem; -} diff --git a/docs/src/content/docs/reference/link-button.mdx b/docs/src/content/docs/reference/link-button.mdx deleted file mode 100644 index f2cf40f96e..0000000000 --- a/docs/src/content/docs/reference/link-button.mdx +++ /dev/null @@ -1,396 +0,0 @@ ---- -title: ⚠️ Link button demo page ⚠️ ---- - -:::danger -// TODO(HiDeoo) Remove this page -::: - -import { - Card, - CardGrid, - Icon, - LinkButton, - Steps, - Tabs, - TabItem, -} from '@astrojs/starlight/components'; - -## Basics - -The following examples are basic link buttons. - - - Primary (explicit) - -Primary (implicit) - - Secondary - - - Minimal - - -And some text after the links. - -## Icons - -The following examples are link buttons with icon after the text (default). - - - Primary - - - Secondary - - - Minimal - - -The following examples are link buttons with icon before the text (using the `iconPlacement="start"`). - - - Primary - - - Secondary - - - Minimal - - -The following examples are link buttons with icon after the text (using the `iconPlacement="end"`) - - - Primary - - - Secondary - - - Minimal - - -The following examples are link buttons with only an icon and an `aria-label`. - - - - -The following example is a link button with only an icon using the `` component with a size specified by the user and an `aria-label`. - - - - - -## Custom class - -The following examples are link buttons with a custom class that changes some styles to apply some underline to the text. - - - Primary - - - Secondary - - - Minimal - - -## Long text - -The following examples is a link button with a very long text in it. - - - This is a very very very very very very very very long text - - -## Interleaved content - -The following example are 2 link buttons with a code block in between. - - - Primary - - -```js -console.log('some content in between'); -``` - - - Secondary - - -## Markdown content - -The following example is a link button with markdown content in it. - - - - _Primary in italic_ - - - -## RTL - -The following examples are link buttons in a block in RTL where the icon is before the text. - -
- - - Primary - - - Secondary - - - Minimal - - -
- -The following examples are link buttons in a block in RTL where the icon is after the text. - -
- - - Primary - - - Secondary - - - Minimal - - -
- -The following example is a link button in RTL where the icon is before the text. - - - Primary - - -The following example is a link button in RTL where the icon is after the text. - - - Primary - - -## Asides - -The following examples are asides with link buttons. - -:::note -This is the note aside content - - - Primary - - - Secondary - - - Minimal - - -::: - -:::tip -This is the tip aside content - - - Primary - - - Secondary - - - Minimal - - -::: - -:::caution -This is the caution aside content - - - Primary - - - Secondary - - - Minimal - - -::: - -:::danger -This is the danger aside content - - - Primary - - - Secondary - - - Minimal - - -::: - -## Tabs - -The following examples are tabs with link buttons. - - - - - Star 1 - - - Star 2 - - - Star 3 - - - - - Moon 1 - - - Moon 2 - - - Moon 3 - - - - -## Cards - -The following example is a card with a link button. - - - - Primary - - - -The following examples are cards in a grid with link buttons. - - - - - More stars - - - - - More moons - - - - -## Steps - -The following example is a link button in a step. - - - -1. Do something - -2. Step two has some more information with link buttons - - - Primary - - - Secondary - - - Minimal - - -3. And finally do something else - -