mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix a11y-mouse-events warning, update docs (#765)

Browse source 
* docs: update number of available Carbon icons

* docs: add svelte:head example for loading CDN styles

* chore(deps-dev): upgrade svelte to 3.40.1

* fix(a11y): disable a11y-mouse-events-have-key-events warning #760

* fix(deps): upgrade carbon-icons-svelte to v10.36.0 to avoid a11y warnings #760

* refactor(overflow-menu): remove formatStyle utility

* docs: links in paragraphs should be inline

* docs: add note on using all styles for dynamic theming
This commit is contained in:
Eric 2021-07-26 08:40:05 -07:00 • committed by GitHub
commit 6db4112b40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
86 changed files with 161 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/src/layouts/ComponentLayout.svelte
View file

@ -158,6 +158,7 @@
.prose > p > .bx--link {
font-size: inherit;
text-decoration: underline;
}
.prose .toc {

77
docs/src/pages/index.svelte
View file

@ -29,7 +29,17 @@
g80: "Gray 80",
g90: "Gray 90",
g100: "Gray 100",
all: "All",
};
const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
<\/script>
`;
$: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
$: cssCdn = `<!DOCTYPE html>
<html>
@ -40,6 +50,12 @@
/>
</head>
</html>`;
$: cssCdnSvelteHead = `<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
/>
</svelte:head>`;
</script>
<Content>
@ -74,11 +90,6 @@
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Installation</h3>
<p>
Install
<code>carbon-components-svelte</code>
as a development dependency in your project.
</p>
<h4>Using Yarn:</h4>
<Row noGutter>
<CodeSnippet code="{installYarn}" />
@ -89,7 +100,7 @@
</Row>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-05)">
<Row style="margin-bottom: var(--cds-layout-04)">
<Column>
<h3>Styling</h3>
<p>
@ -109,8 +120,8 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column xlg="{10}" noGutter>
<Row>
<Column max="{10}" xlg="{10}" noGutter>
<Tabs>
<Tab label="CSS StyleSheet" />
<Tab label="CDN" />
@ -144,10 +155,8 @@
unpkg.com
</OutboundLink>.
</p>
<p>
This is best suited for rapid prototyping or if your set-up does
not use a CSS loader.
</p>
<p>This is best suited for rapid prototyping.</p>
<h5>HTML</h5>
<Row padding noGutter>
<Column>
<p>
@ -155,6 +164,14 @@
</p>
</Column>
</Row>
<h5>svelte:head</h5>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
</p>
</Column>
</Row>
</TabContent>
<TabContent>
<p>
@ -182,7 +199,39 @@
</Column>
</Row>
<Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Dynamic theming</h3>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="single" code="{cssImportAll}" />
</p>
</Column>
</Row>
<p>
Programmatically switch between each of the five Carbon themes by
setting the "theme" attribute on the HTML element.
</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssThemeToggle}" />
</p>
</Column>
</Row>
<p>
You can use the
<Link inline size="lg" href="/components/Theme">
Theme utility component
</Link>
to update the theme at runtime.
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Portfolio</h3>
<p>
@ -206,7 +255,7 @@
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="6000+ icons"
subtitle="7000+ icons"
target="_blank"
href="https://github.com/IBM/carbon-icons-svelte"
/>