Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ef0e750

Browse filesBrowse files
mrholekmrholek
committed
docs: update content
1 parent be8ae22 commit ef0e750
Copy full SHA for ef0e750

File tree

9 files changed

+183
-52
lines changed
Filter options

9 files changed

+183
-52
lines changed

‎packages/docs/content/components/alert/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/alert/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,7 @@ React Alert is prepared for any length of text, as well as an optional close but
1313

1414
<ExampleSnippet component="AlertExample" componentName="React Alert" />
1515

16-
<Callout color="info" title="Conveying meaning to assistive technologies">
17-
Using color to add meaning only provides a visual indication, which will not be conveyed to
18-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
19-
color is either obvious from the content itself (e.g. the visible text), or is included through
20-
alternative means, such as additional text hidden with the `.visually-hidden` class.
21-
</Callout>
16+
<Callout color="warning" type="colorAssistiveTechnologies" />
2217

2318
### Live example
2419

‎packages/docs/content/components/button-group/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/button-group/index.mdx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ Wrap a series of `<CButton>` components in `<CButtonGroup>`.
1212

1313
<ExampleSnippet component="ButtonGroupExample" componentName="React Button Group" />
1414

15-
<Callout color="info" title="Conveying meaning to assistive technologies">
16-
For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper <code>role</code> attribute has to be provided. For button groups, this should be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.
15+
<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
16+
For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
1717

18-
Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply <code>aria-label</code>, but options such as <code>aria-labelledby</code> can also be used.
18+
Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.
1919
</Callout>
2020

2121
These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components.

‎packages/docs/content/components/button/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/button/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
1212

1313
<ExampleSnippet component="ButtonExample" componentName="React Button" />
1414

15-
<Callout color="info" title="Conveying meaning to assistive technologies">
16-
Using color to add meaning only provides a visual indication, which will not be conveyed to users
17-
of assistive technologies – such as screen readers. Ensure that information denoted by the color
18-
is either obvious from the content itself (e.g. the visible text), or is included through
19-
alternative means, such as additional text hidden with the `.visually-hidden` class.
20-
</Callout>
15+
<Callout color="warning" type="colorAssistiveTechnologies" />
2116

2217
## Disable text wrapping
2318

‎packages/docs/content/components/callout/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/callout/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ Callout component is prepared for any length of text, as well as an optional ele
1212

1313
<ExampleSnippet component="CalloutExample" componentName="React Callout" />
1414

15-
<Callout color="info" title="Conveying meaning to assistive technologies">
16-
Using color to add meaning only provides a visual indication, which will not be conveyed to
17-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
18-
color is either obvious from the content itself (e.g. the visible text), or is included through
19-
alternative means, such as additional text hidden with the `.visually-hidden` class.
20-
</Callout>
15+
<Callout color="warning" type="colorAssistiveTechnologies" />
2116

2217
## API
2318

‎packages/docs/content/components/card/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,7 @@ Use `color` property to change the appearance of a card.
140140

141141
<ExampleSnippet component="CardStylesBackgroundAndColorExample" componentName="React Card" />
142142

143-
<Callout color="info" title="Conveying meaning to assistive technologies">
144-
Using color to add meaning only provides a visual indication, which will not be conveyed to
145-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
146-
color is either obvious from the content itself (e.g. the visible text), or is included through
147-
alternative means, such as additional text hidden with the `.visually-hidden` class.
148-
</Callout>
143+
<Callout color="warning" type="colorAssistiveTechnologies" />
149144

150145
### Border
151146

‎packages/docs/content/components/list-group/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/list-group/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,7 @@ Contextual classes also work with `<a>`s or `<button>`s. Note the addition of th
5454

5555
<ExampleSnippet component="ListGroupContextualClasses2Example" componentName="React List Group" />
5656

57-
<Callout color="info" title="Conveying meaning to assistive technologies">
58-
Using color to add meaning only provides a visual indication, which will not be conveyed to
59-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
60-
color is either obvious from the content itself (e.g. the visible text), or is included through
61-
alternative means, such as additional text hidden with the `.visually-hidden` class.
62-
</Callout>
57+
<Callout color="warning" type="colorAssistiveTechnologies" />
6358

6459
## With badges
6560

‎packages/docs/content/customize/sass.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/customize/sass.mdx
+76-7Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,23 @@ your-project/
3737

3838
In your `custom.scss`, you'll import CoreUI's source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
3939

40+
<Callout color="info" type="dartSassModules" />
41+
42+
```scss
43+
@use "sass:map";
44+
@use "@coreui/coreui/scss/variables" as *;
45+
46+
$custom-colors: (
47+
"custom-color": #900
48+
);
49+
50+
$theme-colors: map.merge($theme-colors, $custom-colors);
51+
52+
@use "@coreui/coreui/scss/coreui";
53+
```
54+
55+
<Callout color="warning" type="dartSassDeprecations" />
56+
4057
```scss
4158
// Custom.scss
4259
// Option A: Include all of CoreUI
@@ -92,6 +109,17 @@ Variable overrides must come after our functions are imported, but before the re
92109

93110
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Bootstrap via npm:
94111

112+
<Callout color="info" type="dartSassModules" />
113+
114+
```scss
115+
@use "@coreui/coreui/scss/coreui" with (
116+
$body-bg: #000,
117+
$body-color: #111
118+
)
119+
```
120+
121+
<Callout color="warning" type="dartSassDeprecations" />
122+
95123
```scss
96124
// Required
97125
@import "../node_modules/@coreui/coreui/scss/functions";
@@ -142,6 +170,23 @@ $theme-colors: (
142170

143171
Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
144172

173+
<Callout color="info" type="dartSassModules" />
174+
175+
```scss
176+
@use "sass:map";
177+
@use "@coreui/coreui/scss/variables" as *;
178+
179+
$custom-colors: (
180+
"custom-color": #900
181+
);
182+
183+
$theme-colors: map.merge($theme-colors, $custom-colors);
184+
185+
@use "@coreui/coreui/scss/coreui";
186+
```
187+
188+
<Callout color="warning" type="dartSassDeprecations" />
189+
145190
```scss
146191
// Create your own map
147192
$custom-colors: (
@@ -156,6 +201,21 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
156201

157202
To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
158203

204+
<Callout color="info" type="dartSassModules" />
205+
206+
```scss
207+
@use "sass:map";
208+
@use "@coreui/coreui/scss/variables" as *;
209+
@use "@coreui/coreui/scss/maps" as *;
210+
211+
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
212+
$theme-colors-border-subtle: map.remove($theme-colors-border-subtle, "info", "light", "dark");
213+
214+
@use "@coreui/coreui/scss/coreui";
215+
```
216+
217+
<Callout color="warning" type="dartSassDeprecations" />
218+
159219
```scss
160220
// Required
161221
@import "../node_modules/@coreui/coreui/scss/functions";
@@ -213,6 +273,8 @@ You can lighten or darken colors with CoreUI's `tint-color()` and `shade-color()
213273
In practice, you'd call the function and pass in the color and weight parameters.
214274

215275
```scss
276+
@use "@coreui/coreui/scss/functions/color" as *;
277+
216278
.custom-element {
217279
color: tint-color($primary, 10%);
218280
}
@@ -231,6 +293,8 @@ An additional function we include in CoreUI for Bootstrap is the color contrast
231293
For example, to generate color swatches from our `$theme-colors` map:
232294

233295
```scss
296+
@use "@coreui/coreui/scss/functions/color-contrast" as *;
297+
234298
@each $color, $value in $theme-colors {
235299
.swatch-#{$color} {
236300
color: color-contrast($value);
@@ -241,6 +305,8 @@ For example, to generate color swatches from our `$theme-colors` map:
241305
It can also be used for one-off contrast needs:
242306

243307
```scss
308+
@use "@coreui/coreui/scss/functions/color-contrast" as *;
309+
244310
.custom-element {
245311
color: color-contrast(#000); // returns `color: #fff`
246312
}
@@ -249,6 +315,8 @@ It can also be used for one-off contrast needs:
249315
You can also specify a base color with our color map functions:
250316

251317
```scss
318+
@use "@coreui/coreui/scss/functions/color-contrast" as *;
319+
252320
.custom-element {
253321
color: color-contrast($dark); // returns `color: #fff`
254322
}
@@ -265,6 +333,8 @@ We use the `add` and `subtract` functions to wrap the CSS `calc` function. The p
265333
Example where the calc is valid:
266334

267335
```scss
336+
@use "@coreui/coreui/scss/functions/math" as *;
337+
268338
$border-radius: .25rem;
269339
$border-width: 1px;
270340

@@ -282,6 +352,8 @@ $border-width: 1px;
282352
Example where the calc is invalid:
283353

284354
```scss
355+
@use "@coreui/coreui/scss/functions/math" as *;
356+
285357
$border-radius: .25rem;
286358
$border-width: 0;
287359

@@ -304,15 +376,12 @@ Our `@coreui/coreui/scss/mixins/` directory has a ton of mixins that power parts
304376

305377
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
306378

307-
```scss
308-
@mixin color-scheme($name) {
309-
@media (prefers-color-scheme: #{$name}) {
310-
@content;
311-
}
312-
}
313-
```
379+
380+
<ScssDocs file="mixins/_color-scheme.scss" capture="mixin-color-scheme" />
314381

315382
```scss
383+
@use "@coreui/coreui/scss/mixins/color-scheme" as *;
384+
316385
.custom-element {
317386
@include color-scheme(dark) {
318387
// Insert dark mode styles here

‎packages/docs/src/components/Callout.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/Callout.tsx
+81-4Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,91 @@ import React, { FC, ReactNode } from 'react'
22
export interface CalloutProps {
33
children: ReactNode
44
color: string
5-
title?: string
5+
title?: string | ReactNode
6+
type?: string
67
}
78

8-
const Callout: FC<CalloutProps> = ({ children, color, title }) => {
9+
const description = (type: string) => {
10+
switch (type) {
11+
case 'colorAssistiveTechnologies': {
12+
return (
13+
<>
14+
<h5>Conveying meaning to assistive technologies</h5>
15+
<p>
16+
Using color to add meaning only provides a visual indication, which will not be conveyed
17+
to users of assistive technologies – such as screen readers. Ensure that information
18+
denoted by the color is either obvious from the content itself (e.g. the visible text),
19+
or is included through alternative means, such as additional text hidden with the{' '}
20+
<code>.visually-hidden</code> class.
21+
</p>
22+
</>
23+
)
24+
}
25+
case 'dartSassModules': {
26+
return (
27+
<>
28+
<p>
29+
<strong>Heads up!</strong> Since <code>@coreui/coreui</code> v5.3.0 and{' '}
30+
<code>@coreui/coreui-pro</code> v5.10.0, we support Sass modules.
31+
</p>
32+
<p>
33+
You can now use the modern <code>@use</code> and <code>@forward</code> rules instead of{' '}
34+
<code>@import</code>, which is deprecated and will be removed in Dart Sass 3.0.0. Using{' '}
35+
<code>@import</code> will result in a compilation warning. You can learn more about this
36+
transition{' '}
37+
<a
38+
href="https://sass-lang.com/documentation/breaking-changes/import/"
39+
target="_blank"
40+
rel="noreferrer"
41+
>
42+
here
43+
</a>
44+
.
45+
</p>
46+
</>
47+
)
48+
}
49+
case 'dartSassDeprecations': {
50+
return (
51+
<>
52+
<p>
53+
<strong>
54+
Sass <code>@import</code> are deprecated and will be removed in Dart Sass 3.0.0.!
55+
</strong>
56+
</p>
57+
<p>
58+
You can also use <code>@import</code> rules, but please be aware that they are
59+
deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning.
60+
You can learn more about this deprecation{' '}
61+
<a
62+
href="https://sass-lang.com/documentation/breaking-changes/import/"
63+
target="_blank"
64+
rel="noreferrer"
65+
>
66+
here
67+
</a>
68+
.
69+
</p>
70+
</>
71+
)
72+
}
73+
default: {
74+
return ''
75+
}
76+
}
77+
}
78+
79+
const Callout: FC<CalloutProps> = ({ children, color, title, type }) => {
980
return (
1081
<div className={`docs-callout docs-callout-${color}`}>
11-
{title && <h5>{title}</h5>}
12-
{children}
82+
{type ? (
83+
description(type)
84+
) : (
85+
<>
86+
{title && <h5>{title}</h5>}
87+
{children}
88+
</>
89+
)}
1390
</div>
1491
)
1592
}

‎packages/docs/src/components/ScssDocs.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/ScssDocs.tsx
+18-8Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ export interface ScssDocsProps {
77
capture: string
88
}
99

10+
const unindent = (text: string) => {
11+
const lines = text.split('\n')
12+
// Find first non-empty line to determine indentation
13+
const firstLine = lines.find((line) => line.trim().length > 0) || ''
14+
const indentMatch = firstLine.match(/^( *)/)
15+
const indent = indentMatch ? indentMatch[1] : ''
16+
const regex = new RegExp(`^${indent}`)
17+
return lines
18+
.map((line) => line.replace(regex, ''))
19+
.join('\n')
20+
.trimEnd()
21+
}
22+
1023
const ScssDocs = ({ file, capture }: ScssDocsProps) => {
1124
;(typeof global === 'undefined' ? window : global).Prism = Prism
1225
// eslint-disable-next-line unicorn/prefer-module
@@ -31,11 +44,11 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => {
3144

3245
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3346
const _file = data.allFile.edges.find((node: any) => node.node.relativePath === file)
34-
const captureStart = `// scss-docs-start ${capture}`
35-
const captureEnd = `// scss-docs-end ${capture}`
36-
const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
47+
const captureStart = `// scss-docs-start ${capture}\n`
48+
const captureEnd = `// scss-docs-end ${capture}\n`
49+
const re = new RegExp(`${captureStart}([\\s\\S]*?)${captureEnd}`, 'm')
3750
const captured = re.exec(_file.node.internal.content)
38-
const code = captured ? captured[1].trim() : undefined
51+
const code = captured ? captured[1] : undefined
3952

4053
if (code === undefined) {
4154
console.error(`Can't find "${capture}" in ${_file.node.relativePath}`)
@@ -45,10 +58,7 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => {
4558
code && (
4659
<div className="highlight mb-3">
4760
<Highlight
48-
code={code
49-
.replaceAll('--#{$prefix}', '--cui-')
50-
.replaceAll('\n -', '\n-')
51-
.replaceAll('\n @', '\n@')}
61+
code={unindent(code).replaceAll('--#{$prefix}', '--cui-')}
5262
language="scss"
5363
theme={{ plain: {}, styles: [] }}
5464
>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.