Skip to content

Commit d9aec3a

Browse files
TechQueryTechQuery
committed
[refactor] optimize Responsive of Navigator menus
[optimize] several detail sections of Component documents [optimize] upgrade Upstream packages
1 parent dbc70be commit d9aec3a

File tree

14 files changed

+1013
-1004
lines changed

14 files changed

+1013
-1004
lines changed

‎document/source/components/Button.mdx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ group: Components
77

88
import { Fragment } from 'web-cell';
99

10-
import { Button } from 'boot-cell/source/Form/Button';
10+
import { Button, IconButton } from 'boot-cell/source/Form/Button';
1111
import { ToggleGroup } from 'boot-cell/source/Form/ToggleField';
1212

1313
import { Example } from '../../../source/component/Example';
@@ -366,3 +366,22 @@ render(
366366
/>
367367
);
368368
```
369+
370+
## Icon Button
371+
372+
`<IconButton />` component is built on [`<Icon />`][1].
373+
374+
<Example>
375+
<IconButton name="bootstrap" />
376+
</Example>
377+
378+
```TSX
379+
import { render, createCell } from 'web-cell';
380+
import { IconButton } from 'boot-cell/source/Form/Button';
381+
382+
render(
383+
<IconButton name="bootstrap" />
384+
);
385+
```
386+
387+
[1]: components/icon

‎document/source/components/Dialog.mdx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,20 @@ import { Example } from '../../../source/component/Example';
1616

1717
## How it works
1818

19-
Before getting started with BootCell’s modal component, be sure to read the following as our menu options have recently changed.
20-
2119
- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
2220

2321
- BootCell only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
2422

23+
- Modal Dialogs are built on [`<dialog />`][1], so you may need an **Auto Polyfill** added:
24+
25+
```HTML
26+
<link
27+
rel="stylesheet"
28+
href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dist/dialog-polyfill.css"
29+
/>
30+
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dist/dialog-polyfill.js"></script>
31+
```
32+
2533
Keep reading for demos and usage guidelines.
2634

2735
## Examples
@@ -243,7 +251,7 @@ render(
243251

244252
### Tooltips and popovers
245253

246-
[Tooltips][1] and [popovers][2] can be placed within modals as needed. When modals are closed,
254+
[Tooltips][2] and [popovers][3] can be placed within modals as needed. When modals are closed,
247255
any tooltips and popovers within are also automatically dismissed.
248256

249257
<Example>
@@ -444,5 +452,6 @@ render([
444452
)));
445453
```
446454

447-
[1]: components/tooltip
448-
[2]: components/popover
455+
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
456+
[2]: components/tooltip
457+
[3]: components/popover

‎document/source/components/MarkdownEditor.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ This component is built on the top of [MarkdownIME][1], these dependencies below
1515
npm install markdown-ime marked turndown turndown-plugin-gfm
1616
```
1717

18+
and a [CSS library][2] is needed, too:
19+
20+
```HTML
21+
<link
22+
rel="stylesheet"
23+
href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css"
24+
/>
25+
```
26+
1827
<Example>
1928
<MarkdownEditor value="# WebCell" />
2029
</Example>
@@ -29,3 +38,4 @@ render(
2938
```
3039

3140
[1]: https://laobubu.net/MarkdownIME/
41+
[2]: https://sindresorhus.com/github-markdown-css/

‎document/source/components/TabView.mdx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,21 @@ import { Icon } from 'boot-cell/source/Reminder/Icon';
1616

1717
import { Example } from '../../../source/component/Example';
1818

19+
Tab view is built on CSS of Bootstrap & [bs-stepper][1], so don't forget to include the extra style sheet:
20+
21+
```HTML
22+
<link
23+
rel="stylesheet"
24+
href="https://cdn.jsdelivr.net/npm/bs-stepper@1.7.0/dist/css/bs-stepper.min.css"
25+
/>
26+
```
27+
1928
## Tabs mode
2029

2130
`mode="tabs"` is built based on [Nav](components/nav).
2231

2332
Dynamic tabbed interfaces, as described in the
24-
[<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices][1],
33+
[<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices][2],
2534
require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure,
2635
functionality and current state to users of assistive technologies (such as screen readers).
2736

@@ -256,7 +265,7 @@ render(
256265

257266
## Step mode
258267

259-
`mode="step"` is built based on [bs-stepper][2].
268+
`mode="step"` is built based on [bs-stepper][1].
260269

261270
### Linear
262271

@@ -497,5 +506,5 @@ render(
497506
);
498507
```
499508

500-
[1]: https://www.w3.org/TR/wai-aria-practices/#tabpanel
501-
[2]: https://johann-s.github.io/bs-stepper/
509+
[1]: https://johann-s.github.io/bs-stepper/
510+
[2]: https://www.w3.org/TR/wai-aria-practices/#tabpanel

0 commit comments

Comments
 (0)