From e2a90005b9c929a6161433fb5847044513ec2e06 Mon Sep 17 00:00:00 2001 From: metonym Date: Wed, 17 Aug 2022 07:15:29 -0700 Subject: [PATCH] docs: replace `h3` with `h2` headings (#1452) --- docs/src/components/ComponentApi.svelte | 12 +-- docs/src/global.css | 13 +-- docs/src/layouts/ComponentLayout.svelte | 2 +- docs/src/pages/components/Accordion.svx | 30 +++--- docs/src/pages/components/AspectRatio.svx | 20 ++-- docs/src/pages/components/Breadcrumb.svx | 10 +- docs/src/pages/components/Breakpoint.svx | 4 +- docs/src/pages/components/Button.svx | 44 ++++----- docs/src/pages/components/ButtonSet.svx | 4 +- docs/src/pages/components/Checkbox.svx | 16 ++-- docs/src/pages/components/ClickableTile.svx | 8 +- docs/src/pages/components/CodeSnippet.svx | 30 +++--- docs/src/pages/components/ComboBox.svx | 32 +++---- docs/src/pages/components/ComposedModal.svx | 4 +- docs/src/pages/components/ContentSwitcher.svx | 14 +-- docs/src/pages/components/ContextMenu.svx | 8 +- docs/src/pages/components/CopyButton.svx | 8 +- docs/src/pages/components/DataTable.svx | 92 +++++++++---------- docs/src/pages/components/DatePicker.svx | 26 +++--- docs/src/pages/components/Dropdown.svx | 30 +++--- docs/src/pages/components/ExpandableTile.svx | 8 +- docs/src/pages/components/FileUploader.svx | 24 ++--- docs/src/pages/components/FluidForm.svx | 4 +- docs/src/pages/components/Form.svx | 4 +- docs/src/pages/components/Grid.svx | 16 ++-- docs/src/pages/components/ImageLoader.svx | 10 +- docs/src/pages/components/InlineLoading.svx | 8 +- .../pages/components/InlineNotification.svx | 14 +-- docs/src/pages/components/Link.svx | 18 ++-- docs/src/pages/components/Loading.svx | 6 +- docs/src/pages/components/LocalStorage.svx | 4 +- docs/src/pages/components/Modal.svx | 24 ++--- docs/src/pages/components/MultiSelect.svx | 34 +++---- docs/src/pages/components/NumberInput.svx | 30 +++--- docs/src/pages/components/OrderedList.svx | 10 +- docs/src/pages/components/OverflowMenu.svx | 20 ++-- docs/src/pages/components/Pagination.svx | 12 +-- docs/src/pages/components/PaginationNav.svx | 4 +- docs/src/pages/components/PasswordInput.svx | 22 ++--- docs/src/pages/components/Popover.svx | 16 ++-- docs/src/pages/components/ProgressBar.svx | 16 ++-- .../pages/components/ProgressIndicator.svx | 18 ++-- docs/src/pages/components/RadioButton.svx | 20 ++-- docs/src/pages/components/RadioTile.svx | 10 +- docs/src/pages/components/RecursiveList.svx | 6 +- docs/src/pages/components/Search.svx | 26 +++--- docs/src/pages/components/Select.svx | 32 +++---- docs/src/pages/components/SelectableTile.svx | 6 +- .../pages/components/SkeletonPlaceholder.svx | 4 +- docs/src/pages/components/SkeletonText.svx | 10 +- docs/src/pages/components/Slider.svx | 20 ++-- docs/src/pages/components/StructuredList.svx | 10 +- docs/src/pages/components/Tabs.svx | 14 +-- docs/src/pages/components/Tag.svx | 22 ++--- docs/src/pages/components/TextArea.svx | 20 ++-- docs/src/pages/components/TextInput.svx | 26 +++--- docs/src/pages/components/Theme.svx | 14 +-- docs/src/pages/components/Tile.svx | 4 +- docs/src/pages/components/TimePicker.svx | 12 +-- .../pages/components/ToastNotification.svx | 14 +-- docs/src/pages/components/Toggle.svx | 22 ++--- docs/src/pages/components/Tooltip.svx | 18 ++-- .../pages/components/TooltipDefinition.svx | 6 +- docs/src/pages/components/TooltipIcon.svx | 8 +- docs/src/pages/components/TreeView.svx | 20 ++-- docs/src/pages/components/Truncate.svx | 6 +- docs/src/pages/components/UIShell.svx | 14 +-- docs/src/pages/components/UnorderedList.svx | 8 +- docs/src/pages/index.svelte | 8 +- docs/svelte.config.js | 2 +- 70 files changed, 552 insertions(+), 559 deletions(-) diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index 2e80fda3ce..a34a89e2d5 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -46,7 +46,7 @@

-

Props

+

Props

{#if component.props.length > 0}
@@ -128,7 +128,7 @@

No props.

{/if} -

Typedefs

+

Typedefs

{#if component.typedefs.length > 0} No typedefs.

{/if} -

Slots

+

Slots

{#if component.slots.length > 0} {#each component.slots as slot (slot.name)} @@ -152,7 +152,7 @@

No slots.

{/if} -

Forwarded events

+

Forwarded events

{#if forwarded_events.length > 0} {#each forwarded_events as event (event.name)} @@ -163,7 +163,7 @@

No forwarded events.

{/if} -

Dispatched events

+

Dispatched events

{#if dispatched_events.length > 0} @@ -175,7 +175,7 @@

No dispatched events.

{/if} -

$$restProps

+

$$restProps

{#if component.rest_props} diff --git a/docs/src/global.css b/docs/src/global.css index a685cb6c9d..59bde722ab 100644 --- a/docs/src/global.css +++ b/docs/src/global.css @@ -223,16 +223,8 @@ html[theme="g90"] .code-override { padding: 0 var(--cds-spacing-02); } -.bx--col > h2 { - font-size: var(--cds-expressive-heading-05-font-size); - font-weight: var(--cds-expressive-heading-05-font-weight); - letter-spacing: var(--cds-expressive-heading-05-letter-spacing); - line-height: var(--cds-expressive-heading-05-line-height); - padding-top: var(--cds-layout-03); - margin-bottom: var(--cds-layout-01); -} - -.bx--col > h3 { +[class*="bx--col"] > h2, +.bx--tab-content > h2 { font-size: var(--cds-expressive-heading-04-font-size); font-weight: var(--cds-expressive-heading-04-font-weight); letter-spacing: var(--cds-expressive-heading-04-letter-spacing); @@ -251,6 +243,7 @@ html[theme="g90"] .code-override { } .bx--col > h2, +.bx--tab-content > h2, .bx--col > h3, .bx--col > h4 { scroll-margin-top: 3rem; diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 2c2ede9abe..7c19bb8fc4 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -104,7 +104,7 @@
-

Component API

+

Component API

API documentation is -### Default +## Default @@ -25,7 +25,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] -### Left-aligned chevron +## Left-aligned chevron @@ -40,7 +40,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] -### Custom title slot +## Custom title slot @@ -67,7 +67,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] -### First item open +## First item open @@ -82,13 +82,13 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] -### Programmatic example +## Programmatic example This example demonstrates how a list of items can be programmatically expanded and collapsed. -### Extra-large size +## Extra-large size @@ -103,7 +103,7 @@ This example demonstrates how a list of items can be programmatically expanded a -### Small size +## Small size @@ -118,7 +118,7 @@ This example demonstrates how a list of items can be programmatically expanded a -### Disabled +## Disabled @@ -133,7 +133,7 @@ This example demonstrates how a list of items can be programmatically expanded a -### Disabled (item) +## Disabled (item) @@ -148,27 +148,27 @@ This example demonstrates how a list of items can be programmatically expanded a -### Skeleton +## Skeleton -### Skeleton (left-aligned chevron) +## Skeleton (left-aligned chevron) -### Skeleton (custom count) +## Skeleton (custom count) -### Skeleton (closed) +## Skeleton (closed) -### Skeleton (extra-large) +## Skeleton (extra-large) -### Skeleton (small) +## Skeleton (small) diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index 3594061dd7..6de7aafac6 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -7,61 +7,61 @@ The `AspectRatio` component is useful for constraining fluid content within an a Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. -### Default (2x1) +## Default (2x1) 2x1 -### Ratio 2x3 +## Ratio 2x3 2x3 -### Ratio 16x9 +## Ratio 16x9 16x9 -### Ratio 4x3 +## Ratio 4x3 4x3 -### Ratio 1x1 +## Ratio 1x1 1x1 -### Ratio 3x4 +## Ratio 3x4 3x4 -### Ratio 3x2 +## Ratio 3x2 3x2 -### Ratio 9x16 +## Ratio 9x16 9x16 -### Ratio 1x2 +## Ratio 1x2 1x2 -### Tile (16x9) +## Tile (16x9) Content diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx index 660f946735..75a01c5afc 100644 --- a/docs/src/pages/components/Breadcrumb.svx +++ b/docs/src/pages/components/Breadcrumb.svx @@ -12,7 +12,7 @@ components: ["Breadcrumb", "BreadcrumbItem"] import Preview from "../../components/Preview.svelte"; -### Default +## Default Dashboard @@ -20,14 +20,14 @@ components: ["Breadcrumb", "BreadcrumbItem"] 2019 -### No trailing slash +## No trailing slash Home Profile -### Overflow menu +## Overflow menu Home @@ -41,10 +41,10 @@ components: ["Breadcrumb", "BreadcrumbItem"] Usage -### Breadcrumb trail +## Breadcrumb trail -### Skeleton +## Skeleton \ No newline at end of file diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx index 22bf672f27..134d7a761c 100644 --- a/docs/src/pages/components/Breakpoint.svx +++ b/docs/src/pages/components/Breakpoint.svx @@ -18,7 +18,7 @@ The [Carbon Design System grid implementation](https://carbondesignsystem.com/gu This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size. -### Default +## Default Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`. @@ -26,7 +26,7 @@ The `"on:change"` event will fire when the size is initially determined and when -### Store and Breakpoint Values +## Store and Breakpoint Values As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint. diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 30effdca3e..cde19987ca 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -8,31 +8,31 @@ let index = 1; -### Primary button +## Primary button -### Secondary button +## Secondary button -### Tertiary button +## Tertiary button -### Ghost button +## Ghost button -### Danger button +## Danger button -### Danger tertiary button +## Danger tertiary button -### Danger tertiary, icon-only button +## Danger tertiary, icon-only button

@@ -42,15 +42,15 @@ -### Button with icon +## Button with icon -### Icon-only button +## Icon-only button
@@ -60,35 +60,35 @@ -### Custom element +## Custom element -### Field size +## Field size @@ -96,7 +96,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Small size +## Small size @@ -104,7 +104,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Large size +## Large size @@ -112,7 +112,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Extra-large size +## Extra-large size @@ -120,11 +120,11 @@ If an `href` value is specified, the component will render an [anchor element](h -### Disabled button +## Disabled button -### Expressive styles +## Expressive styles Set `expressive` to `true` to use Carbon's expressive typesetting. @@ -152,7 +152,7 @@ Set `expressive` to `true` to use Carbon's expressive typesetting. -### Skeleton +## Skeleton -### Stacked +## Stacked Set `stacked` to `true` to use the stacked variant. diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx index 756cd14554..f5e7f68434 100644 --- a/docs/src/pages/components/Checkbox.svx +++ b/docs/src/pages/components/Checkbox.svx @@ -3,33 +3,33 @@ import Preview from "../../components/Preview.svelte"; -### Default (unchecked) +## Default (unchecked) -### Checked +## Checked -### Indeterminate +## Indeterminate -### Hidden label +## Hidden label -### Disabled +## Disabled -### Reactive example (bind:checked) +## Reactive example (bind:checked) The `checked` prop supports two-way binding. -### Reactive example (bind:group) +## Reactive example (bind:group) An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs). @@ -41,6 +41,6 @@ An alternative to `checked` is binding an array of values using `group`. This AP -### Skeleton +## Skeleton diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx index 49c02952bd..1f03926c89 100644 --- a/docs/src/pages/components/ClickableTile.svx +++ b/docs/src/pages/components/ClickableTile.svx @@ -7,13 +7,13 @@ source: Tile/ClickableTile.svelte import Preview from "../../components/Preview.svelte"; -### Default +## Default Carbon Design System -### Prevent default behavior +## Prevent default behavior Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior. @@ -27,13 +27,13 @@ Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the n Carbon Design System -### Light variant +## Light variant Carbon Design System -### Disabled state +## Disabled state Carbon Design System diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx index e952a2ac29..c01c60e1ce 100644 --- a/docs/src/pages/components/CodeSnippet.svx +++ b/docs/src/pages/components/CodeSnippet.svx @@ -34,11 +34,11 @@ Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Sa You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality). -### Default (single-line) +## Default (single-line) -### Overriding copy functionality +## Overriding copy functionality To override the default copy behavior, pass a custom function to the `copy` prop. @@ -46,45 +46,45 @@ In this example, we use the open source module [clipboard-copy](https://github.c -### Preventing copy functionality +## Preventing copy functionality To prevent text from being copied entirely, pass a no-op function to the `copy` prop. {}} /> -### Inline +## Inline -### Multi-line +## Multi-line -### Expanded by default +## Expanded by default Use the `expanded` prop to control whether the multi-line code snippet is expanded or not. -### Reactive example +## Reactive example The multi-line code snippet also dispatches "expand" and "collapse" events. -### Custom copy feedback text +## Custom copy feedback text Use the `feedback` prop to override the default copy button feedback text. -### Hidden copy button +## Hidden copy button Set `hideCopyButton` to `true` to hide the copy button. -### Disabled +## Disabled The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types. @@ -92,19 +92,19 @@ The `disabled` prop applies only to the `"single"` and `"multi"` code snippet ty
-### Wrapped text +## Wrapped text `wrapText` only applies to the `"multi"` type. -### Dynamic multi-line code +## Dynamic multi-line code For dynamically updated code, you must use the `code` prop instead of the default slot. -### Hidden multi-line code +## Hidden multi-line code There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`. @@ -112,12 +112,12 @@ The recommended workaround is to re-render the component. See the example below. -### Skeleton +## Skeleton The default skeleton type is `"single"`. -### Skeleton (multi-line) +## Skeleton (multi-line) \ No newline at end of file diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx index 927367855d..559b4127c1 100644 --- a/docs/src/pages/components/ComboBox.svx +++ b/docs/src/pages/components/ComboBox.svx @@ -9,7 +9,7 @@
Every items object must have a unique "id" property.
-### Default +## Default -### Custom slot +## Custom slot Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. -### Initial selected id +## Initial selected id -### Reactive example +## Reactive example -### Clear selection +## Clear selection To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor. @@ -46,21 +46,21 @@ Specify `focus: false` in the method options to avoid re-focusing the input. -### Multiple combo boxes +## Multiple combo boxes -### Filterable +## Filterable -### Filterable with custom label +## Filterable with custom label Combine a custom label `itemToString` with the filterable option (e.g., internationalization). -### Top direction +## Top direction Set `direction` to `"top"` for the combobox dropdown menu to appear above the input. @@ -71,7 +71,7 @@ items={[ {id: "2", text: "Fax"} ]} /> -### Light variant +## Light variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Disabled items +## Disabled items Use the `disabled` property in the `items` prop to disable specific items. diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx index 2c8c084d42..a7e921a5c1 100644 --- a/docs/src/pages/components/ComposedModal.svx +++ b/docs/src/pages/components/ComposedModal.svx @@ -6,11 +6,11 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"] import Preview from "../../components/Preview.svelte"; -### Composed modal +## Composed modal -### Multiple secondary buttons +## Multiple secondary buttons Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`. diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx index 08632dcc6b..5c98d9ba13 100644 --- a/docs/src/pages/components/ContentSwitcher.svx +++ b/docs/src/pages/components/ContentSwitcher.svx @@ -9,14 +9,14 @@ components: ["ContentSwitcher", "Switch"] import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Initial selected index +## Initial selected index @@ -24,11 +24,11 @@ components: ["ContentSwitcher", "Switch"] -### Reactive example +## Reactive example -### Custom switch slot +## Custom switch slot @@ -43,21 +43,21 @@ components: ["ContentSwitcher", "Switch"] -### Extra-large size +## Extra-large size -### Small size +## Small size -### Disabled +## Disabled diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx index a37e7a32c7..eacc8ac68f 100644 --- a/docs/src/pages/components/ContextMenu.svx +++ b/docs/src/pages/components/ContextMenu.svx @@ -8,24 +8,24 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex In the examples, right click anywhere within the iframe. -### Default +## Default By default, the context menu will trigger when right clicking anywhere in the `window`. -### Custom target +## Custom target Specify a custom `HTMLElement` using the `target` prop. -### Multiple targets +## Multiple targets The `target` prop also accepts an array of elements. -### Radio groups +## Radio groups \ No newline at end of file diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx index 6b4ed10f77..a450d6b7b9 100644 --- a/docs/src/pages/components/CopyButton.svx +++ b/docs/src/pages/components/CopyButton.svx @@ -9,15 +9,15 @@ Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Sa You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality). -### Default +## Default -### Custom feedback text +## Custom feedback text -### Overriding copy functionality +## Overriding copy functionality To override the default copy behavior, pass a custom function to the `copy` prop. @@ -25,7 +25,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c -### Preventing copy functionality +## Preventing copy functionality To prevent text from being copied entirely, pass a no-op function to the `copy` prop. diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 5419bb5ce3..40448a225f 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -20,7 +20,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
Every rows object must have a unique "id" property.
-### Default +## Default The key value in `headers` corresponds to the key value defined in `rows`. @@ -79,7 +79,7 @@ For example, the header key `"name"` will use the value of `rows[index].name`. ]}" /> -### Slotted cells +## Slotted cells Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives. @@ -153,7 +153,7 @@ The slot name for the table header cells is `"cell-header"`. -### With title, description +## With title, description -### Slottable title, description +## Slottable title, description The `title` and `description` props are slottable. @@ -270,7 +270,7 @@ The `title` and `description` props are slottable. -### Static width +## Static width Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%". @@ -328,7 +328,7 @@ title="Load balancers" description="Your organization's active load balancers." ]}" /> -### Custom column widths +## Custom column widths Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column. @@ -340,7 +340,7 @@ A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-l -### Sticky header +## Sticky header Set `stickyHeader` to `true` for the header to be fixed in place. @@ -363,7 +363,7 @@ A maximum height will applied to the datatable to force a scrollbar. }))} /> -### With toolbar +## With toolbar -### Filterable (custom) +## Filterable (custom) `shouldFilterRows` also accepts a function and passes it the current row and value. It expects the function to return a boolean. -### Zebra stripes +## Zebra stripes -### Tall rows +## Tall rows -### Medium rows +## Medium rows -### Short rows +## Short rows -### Compact rows +## Compact rows -### Sortable +## Sortable Set `sortable` to `true` to enable table column sorting. @@ -851,7 +851,7 @@ In the example below, the "Protocol" column is not sortable. ]}" /> -### Sortable with pagination +## Sortable with pagination If you want `DataTable` to sort the whole dataset but still display paginated content, you need to pass the whole dataset in the `rows` prop, and then limit displayed content by using `pageSize` and `page` props, which are corresponding to the same props in the `Pagination` component. @@ -929,7 +929,7 @@ and then limit displayed content by using `pageSize` and `page` props, which are pageSizeInputDisabled /> -### Sortable with custom display and sort methods +## Sortable with custom display and sort methods -### Sortable with nested object values +## Sortable with nested object values -### Programmatic sorting +## Programmatic sorting Use the reactive `sortKey` and `sortDirection` props for programmatic sorting. @@ -1087,7 +1087,7 @@ Setting `sortKey` to `null` and `sortDirection` to `"none"` should reset the tab -### Empty column with overflow menu +## Empty column with overflow menu Some use cases require an empty column in the table body without a corresponding table header. @@ -1097,27 +1097,27 @@ In the following example, each row in the sortable data table has an overflow me -### Selectable rows (checkbox) +## Selectable rows (checkbox) Set `selectable` to `true` for rows to be multi-selectable. -### Batch selection +## Batch selection -### Batch selection with initial selected rows +## Batch selection with initial selected rows Use the `selectedRowIds` prop to specify which rows should be selected. -### Batch selection with batch actions toolbar +## Batch selection with batch actions toolbar -### Batch selection with controlled toolbar +## Batch selection with controlled toolbar By default, `ToolbarBatchActions` is activated if one or more rows is selected. Clicking "Cancel" will deactivate it. @@ -1127,19 +1127,19 @@ You can also prevent the default "Cancel" behavior in the dispatched `on:cancel` -### Selectable rows (radio) +## Selectable rows (radio) Set `radio` to `true` for only one row to be selected at a time. -### Non-selectable rows +## Non-selectable rows Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable. -### Expandable rows +## Expandable rows Set `expandable` to `true` for rows to be expandable. @@ -1200,17 +1200,17 @@ Set `expandable` to `true` for rows to be expandable. -### Non-expandable rows +## Non-expandable rows Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable. -### Expandable (zebra styles) +## Expandable (zebra styles) -### Expandable (compact size) +## Expandable (compact size) -### Skeleton +## Skeleton -### Skeleton with headers, row count +## Skeleton with headers, row count -### Skeleton with object headers +## Skeleton with object headers `headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`. -### Skeleton with empty header +## Skeleton with empty header Pass an object with `"empty"` set to `true` to render an empty table header column. -### Skeleton without header, toolbar +## Skeleton without header, toolbar -### Skeleton (tall size) +## Skeleton (tall size) -### Skeleton (short size) +## Skeleton (short size) -### Skeleton (compact size) +## Skeleton (compact size) - + \ No newline at end of file diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 9c2cf9462a..3e4dbdcf58 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -19,7 +19,7 @@ Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flat
-### Single +## Single By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal). @@ -27,17 +27,17 @@ Set `flatpickrProps.static` to `false` to opt out of this behavior. -### Range +## Range Set `datePickerType` to `"range"` for the range variant. -### DatePicker in a modal +## DatePicker in a modal -### Simple +## Simple By default, the "simple" date picker does not have a dropdown calendar. @@ -45,54 +45,54 @@ By default, the "simple" date picker does not have a dropdown calendar. -### With helper text +## With helper text -### Hidden label +## Hidden label -### Light variant +## Light variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Skeleton +## Skeleton diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx index 9ac60d2a77..477fcce927 100644 --- a/docs/src/pages/components/Dropdown.svx +++ b/docs/src/pages/components/Dropdown.svx @@ -13,25 +13,25 @@ components: ["Dropdown", "DropdownSkeleton"]
Every items object must have a unique "id" property.
-### Default +## Default -### Custom slot +## Custom slot Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. -### Hidden label +## Hidden label -### Format item display text +## Format item display text Use the `itemToString` prop to format the display of individual items. @@ -41,11 +41,11 @@ Use the `itemToString` prop to format the display of individual items. {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" /> -### Multiple dropdowns +## Multiple dropdowns -### Top direction +## Top direction Set `direction` to `"top"` for the dropdown menu to appear above the input. @@ -53,49 +53,49 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input. {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" /> -### Light variant +## Light variant -### Inline variant +## Inline variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Disabled items +## Disabled items Use the `disabled` property in the `items` prop to disable specific items. @@ -109,6 +109,6 @@ Use the `disabled` property in the `items` prop to disable specific items. ]} /> -### Skeleton +## Skeleton \ No newline at end of file diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx index b1c127c37f..680cac9d1d 100644 --- a/docs/src/pages/components/ExpandableTile.svx +++ b/docs/src/pages/components/ExpandableTile.svx @@ -7,28 +7,28 @@ source: Tile/ExpandableTile.svelte import Preview from "../../components/Preview.svelte"; -### Default (unexpanded) +## Default (unexpanded)
Above the fold content here
Below the fold content here
 -### Expanded +## Expanded
Above the fold content here
Below the fold content here
 -### Light variant +## Light variant
Above the fold content here
Below the fold content here
 -### With icon labels +## With icon labels
Above the fold content here
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx index bff02a4c3b..4149518263 100644 --- a/docs/src/pages/components/FileUploader.svx +++ b/docs/src/pages/components/FileUploader.svx @@ -7,7 +7,7 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer", import Preview from "../../components/Preview.svelte"; -### File uploader (button-only) +## File uploader (button-only) By default, the file uploader only accepts one file. @@ -15,7 +15,7 @@ Set `multiple` to `true` for multiple files to be uploaded. -### File uploader +## File uploader The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files. @@ -25,7 +25,7 @@ See the [item examples below](#item-uploading) for different statuses. -### Clear files +## Clear files There are two ways to clear files in `FileUploader`: @@ -36,19 +36,19 @@ There are two ways to clear files in `FileUploader`: -### File uploader (disabled state) +## File uploader (disabled state) -### Item (uploading) +## Item (uploading) -### Item (complete) +## Item (complete) -### Item (edit) +## Item (edit) If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event. @@ -58,13 +58,13 @@ The event detail contains the item `id`. console.log(e.detail); // "readme" }} /> -### Item (edit status, invalid state) +## Item (edit status, invalid state) An item can also have an edit status with an invalid state. -### Item (edit status, invalid state with subject, body) +## Item (edit status, invalid state with subject, body) Use the `errorSubject` and `errorBody` props to customize the error message. @@ -78,7 +78,7 @@ Use the `errorSubject` and `errorBody` props to customize the error message. on:delete /> -### Item sizes +## Item sizes The default `FileUploaderItem` size is "default". @@ -86,7 +86,7 @@ The default `FileUploaderItem` size is "default". -### Drop container +## Drop container The `FileUploaderDropContainer` accepts files through click and drop events. @@ -105,6 +105,6 @@ The following example accepts files smaller than 1 kB. }} /> -### Skeleton +## Skeleton \ No newline at end of file diff --git a/docs/src/pages/components/FluidForm.svx b/docs/src/pages/components/FluidForm.svx index 1bc1e4b639..68dbc60461 100644 --- a/docs/src/pages/components/FluidForm.svx +++ b/docs/src/pages/components/FluidForm.svx @@ -7,7 +7,7 @@ import Preview from "../../components/Preview.svelte"; -### Fluid form +## Fluid form Note that the `inline` input variants cannot be used within a `FluidForm`. @@ -21,6 +21,6 @@ Note that the `inline` input variants cannot be used within a `FluidForm`. /> -### Invalid state +## Invalid state \ No newline at end of file diff --git a/docs/src/pages/components/Form.svx b/docs/src/pages/components/Form.svx index a6c8d81d2e..b43665698f 100644 --- a/docs/src/pages/components/Form.svx +++ b/docs/src/pages/components/Form.svx @@ -14,7 +14,7 @@ components: ["Form", "FormGroup"] import Preview from "../../components/Preview.svelte"; -### Form +## Form
@@ -61,7 +61,7 @@ components: ["Form", "FormGroup"] -### Prevent default behavior +## Prevent default behavior The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior. diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx index 9375fcdabc..0092b6623e 100644 --- a/docs/src/pages/components/Grid.svx +++ b/docs/src/pages/components/Grid.svx @@ -6,34 +6,34 @@ components: ["Grid", "Row", "Column"] import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Full width +## Full width -### Narrow +## Narrow -### Condensed +## Condensed -### Responsive +## Responsive -### Offset columns +## Offset columns -### Aspect ratio columns +## Aspect ratio columns -### Padded columns +## Padded columns diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index cea8c73be2..bf5f07172f 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -7,11 +7,11 @@ This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states. -### Default +## Default -### Slots +## Slots Use the "loading" and "error" named slots to render an element when the image is loading or has an error. @@ -24,7 +24,7 @@ Use the "loading" and "error" named slots to render an element when the image is -### With aspect ratio +## With aspect ratio If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image. @@ -32,14 +32,14 @@ Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `" -### Fade in +## Fade in Set `fadeIn` to `true` to fade in the image if successfully loaded. {#key key}{/key} -### Programmatic usage +## Programmatic usage In this example, a component reference is obtained to programmatically trigger the `loadImage` method. diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx index d406645530..1677b675da 100644 --- a/docs/src/pages/components/InlineLoading.svx +++ b/docs/src/pages/components/InlineLoading.svx @@ -3,21 +3,21 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default -### With description +## With description -### Status states +## Status states -### UX example +## UX example \ No newline at end of file diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx index 3f435777f4..cae53269a9 100644 --- a/docs/src/pages/components/InlineNotification.svx +++ b/docs/src/pages/components/InlineNotification.svx @@ -8,11 +8,11 @@ source: Notification/InlineNotification.svelte import Preview from "../../components/Preview.svelte"; -### Default (error) +## Default (error) -### Prevent default close behavior +## Prevent default close behavior `InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event. @@ -21,18 +21,18 @@ source: Notification/InlineNotification.svelte // custom close logic (e.g., transitions) }} /> -### Slottable title, subtitle +## Slottable title, subtitle Error: An internal server error occurred. -### Hidden close button +## Hidden close button -### With actions +## With actions @@ -40,7 +40,7 @@ source: Notification/InlineNotification.svelte -### Notification variants +## Notification variants @@ -49,7 +49,7 @@ source: Notification/InlineNotification.svelte -### Low contrast +## Low contrast diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx index 532fd12827..225f4d5784 100644 --- a/docs/src/pages/components/Link.svx +++ b/docs/src/pages/components/Link.svx @@ -8,13 +8,13 @@ components: ["Link", "OutboundLink"] import Preview from "../../components/Preview.svelte"; -### Default +## Default Carbon Design System -### Target _blank +## Target _blank If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/). @@ -24,7 +24,7 @@ You can override the `rel` attribute with a custom value. Carbon Design System -### Outbound link +## Outbound link An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`. @@ -32,7 +32,7 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun Carbon Design System -### Inline variant +## Inline variant
Visit the @@ -41,7 +41,7 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun .
-### Link with icon +## Link with icon Note that `inline` must be `false` when rendering a link with an icon. @@ -52,19 +52,19 @@ Note that `inline` must be `false` when rendering a link with an icon. .
-### Large size +## Large size Carbon Design System -### Small size +## Small size Carbon Design System -### Disabled +## Disabled A `disabled` link will render a `p` tag instead of an anchor element. @@ -72,7 +72,7 @@ A `disabled` link will render a `p` tag instead of an anchor element. Carbon Design System -### Visited styles +## Visited styles Carbon Design System diff --git a/docs/src/pages/components/Loading.svx b/docs/src/pages/components/Loading.svx index 7a1870b1f3..97895b076a 100644 --- a/docs/src/pages/components/Loading.svx +++ b/docs/src/pages/components/Loading.svx @@ -3,14 +3,14 @@ import Preview from "../../components/Preview.svelte"; -### Default (with overlay) +## Default (with overlay) -### No overlay +## No overlay -### Small size +## Small size \ No newline at end of file diff --git a/docs/src/pages/components/LocalStorage.svx b/docs/src/pages/components/LocalStorage.svx index 3fb133b746..6cf6d8a24a 100644 --- a/docs/src/pages/components/LocalStorage.svx +++ b/docs/src/pages/components/LocalStorage.svx @@ -4,13 +4,13 @@ This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level. -### Reactive example +## Reactive example In the example below, toggle the switch and reload the page. The updated theme should be persisted locally. -### Clear item, clear all +## Clear item, clear all Use the `bind:this` directive to access the `clearItem` and `clearAll` methods. diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx index 6c9024ea19..34c982b5d3 100644 --- a/docs/src/pages/components/Modal.svx +++ b/docs/src/pages/components/Modal.svx @@ -2,11 +2,11 @@ import Preview from "../../components/Preview.svelte"; -### Default (transactional) +## Default (transactional) -### Custom focus +## Custom focus By default, the modal close button will be focused when opened. @@ -14,48 +14,48 @@ Use the `selectorPrimaryFocus` to specify the element that should be focused whe -### Danger modal +## Danger modal -### Passive modal +## Passive modal -### Has scrolling content +## Has scrolling content Setting `hasScrollingContent` to `true` increases the vertical space within the modal. -### Multiple modals +## Multiple modals -### Multiple secondary buttons +## Multiple secondary buttons Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`. -### Extra-small size +## Extra-small size -### Small size +## Small size -### Large size +## Large size -### Prevent close on outside click +## Prevent close on outside click `preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals. -### Button with icon +## Button with icon diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx index 82c5fc2d9c..35387f645e 100644 --- a/docs/src/pages/components/MultiSelect.svx +++ b/docs/src/pages/components/MultiSelect.svx @@ -9,7 +9,7 @@
Every items object must have a unique "id" property.
-### Default +## Default By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering). @@ -19,13 +19,13 @@ By default, items will be ordered alphabetically based on the `item.text` value. {id: "2", text: "Fax"}]}" /> -### Custom slot +## Custom slot Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. -### No alphabetical ordering +## No alphabetical ordering To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop. @@ -36,7 +36,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem` sortItem="{() => {}}" /> -### Filterable +## Filterable `$$restProps` are spread to the underlying input element. @@ -46,7 +46,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem` {id: "2", text: "Fax"}]}" /> -### Initial selected items +## Initial selected items To select (or bind) items, pass an array of item ids to `selectedIds`. @@ -56,11 +56,11 @@ To select (or bind) items, pass an array of item ids to `selectedIds`. {id: "2", text: "Fax"}]}" /> -### Multiple multi-select dropdowns +## Multiple multi-select dropdowns -### Format item display text +## Format item display text Use the `itemToString` prop to format the display of individual items. @@ -73,7 +73,7 @@ Use the `itemToString` prop to format the display of individual items. sortItem="{() => {}}" /> -### Top direction +## Top direction Set `direction` to `"top"` for the dropdown menu to appear above the input. @@ -83,7 +83,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input. {id: "2", text: "Fax"}]}" /> -### Hidden label +## Hidden label -### Light variant +## Light variant -### Inline variant +## Inline variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Disabled items +## Disabled items Use the `disabled` property in the `items` prop to disable specific items. diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx index 3cbba1dff7..adc89d6627 100644 --- a/docs/src/pages/components/NumberInput.svx +++ b/docs/src/pages/components/NumberInput.svx @@ -7,7 +7,7 @@ components: ["NumberInput", "NumberInputSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default This component requires a numerical value for `value`. @@ -15,15 +15,15 @@ See [#no-value](#no-value) to allow for an empty value. -### With helper text +## With helper text -### Minimum and maximum values +## Minimum and maximum values -### No value +## No value Set `allowEmpty` to `true` to allow for no value. @@ -31,46 +31,46 @@ Set `value` to `null` to denote "no value." -### Hidden label +## Hidden label -### Hidden steppers +## Hidden steppers -### Light variant +## Light variant -### Read-only variant +## Read-only variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Skeleton +## Skeleton -### Skeleton without label +## Skeleton without label \ No newline at end of file diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx index 3178257e37..40fe78b1d1 100644 --- a/docs/src/pages/components/OrderedList.svx +++ b/docs/src/pages/components/OrderedList.svx @@ -13,7 +13,7 @@ components: ["OrderedList", "ListItem"]
-### Default +## Default Ordered list item @@ -21,7 +21,7 @@ components: ["OrderedList", "ListItem"] Ordered list item -### With links +## With links @@ -35,7 +35,7 @@ components: ["OrderedList", "ListItem"] -### Nested +## Nested @@ -55,7 +55,7 @@ components: ["OrderedList", "ListItem"] Ordered list level 1 -### Native list styles +## Native list styles Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text. @@ -77,7 +77,7 @@ Use the `native` attribute to enable default browser list styles. This is useful Ordered list level 1 -### Expressive styles +## Expressive styles Set `expressive` to `true` to use Carbon's expressive typesetting. diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx index 0dbe743ce2..6cd63a935b 100644 --- a/docs/src/pages/components/OverflowMenu.svx +++ b/docs/src/pages/components/OverflowMenu.svx @@ -8,7 +8,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] import Preview from "../../components/Preview.svelte"; -### Default +## Default @@ -16,7 +16,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Flipped +## Flipped @@ -24,7 +24,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Menu direction top +## Menu direction top @@ -32,7 +32,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Light variant +## Light variant @@ -40,7 +40,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Extra-large size +## Extra-large size @@ -48,7 +48,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Small size +## Small size @@ -56,7 +56,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] -### Custom primary focus +## Custom primary focus By default, the first overflow menu item is focused when opening the dropdown. @@ -66,7 +66,7 @@ By default, the first overflow menu item is focused when opening the dropdown. -### Custom trigger icon +## Custom trigger icon @@ -74,7 +74,7 @@ By default, the first overflow menu item is focused when opening the dropdown. -### Custom trigger slot +## Custom trigger slot
Custom trigger
@@ -83,7 +83,7 @@ By default, the first overflow menu item is focused when opening the dropdown. -### Disabled items +## Disabled items Disable menu items by setting `disabled` to `true`. diff --git a/docs/src/pages/components/Pagination.svx b/docs/src/pages/components/Pagination.svx index b1964a3b7e..0ff1b471a3 100644 --- a/docs/src/pages/components/Pagination.svx +++ b/docs/src/pages/components/Pagination.svx @@ -7,26 +7,26 @@ components: ["Pagination", "PaginationSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Current page +## Current page -### Custom page sizes +## Custom page sizes -### Hidden page input +## Hidden page input -### Hidden page size +## Hidden page size -### Skeleton +## Skeleton diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx index e6dafbaf38..079c5f3cfc 100644 --- a/docs/src/pages/components/PaginationNav.svx +++ b/docs/src/pages/components/PaginationNav.svx @@ -3,10 +3,10 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Loopable +## Loopable diff --git a/docs/src/pages/components/PasswordInput.svx b/docs/src/pages/components/PasswordInput.svx index 7d90631ac5..581333b9bf 100644 --- a/docs/src/pages/components/PasswordInput.svx +++ b/docs/src/pages/components/PasswordInput.svx @@ -7,50 +7,50 @@ source: TextInput/PasswordInput.svelte import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Custom tooltip alignment +## Custom tooltip alignment Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props. -### Password is visible +## Password is visible Set prop `type` to `"text"` to toggle password visibility. -### Hidden label +## Hidden label -### Light variant +## Light variant -### Inline +## Inline -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx index 4733474dfd..03f1da7801 100644 --- a/docs/src/pages/components/Popover.svx +++ b/docs/src/pages/components/Popover.svx @@ -3,7 +3,7 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default By default, the position of the popover component is absolute. @@ -14,7 +14,7 @@ By default, the position of the popover component is absolute. -### Relative position +## Relative position Set `relative` to `true` to use a relative position. @@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position. -### Close on outside click +## Close on outside click Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover. @@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the -### Popover alignment +## Popover alignment Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`. @@ -109,7 +109,7 @@ The default `align` value is `"top"`. -### With caret +## With caret
Parent @@ -118,7 +118,7 @@ The default `align` value is `"top"`.
-### Custom caret alignment +## Custom caret alignment By default, the caret is aligned "top". @@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"` -### Light variant +## Light variant
Parent @@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
-### High contrast variant +## High contrast variant
Parent diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx index 4cd09440ca..d296ae47cb 100644 --- a/docs/src/pages/components/ProgressBar.svx +++ b/docs/src/pages/components/ProgressBar.svx @@ -3,31 +3,31 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default Without a specified `value` prop, the progress bar is indeterminate. -### Small size +## Small size Specify `size="sm"` to use the small variant. -### Percentage +## Percentage Specify a `value` for the progress bar to be determinate. -### Custom max value +## Custom max value The default `max` value is `100`. -### Hidden label +## Hidden label It's recommended that you provide a `labelText` for accessibility. @@ -35,17 +35,17 @@ Use `hideLabel` to visually hide the label text. -### Inline variant +## Inline variant The inline variant visually hides the `helperText`. -### Indented variant +## Indented variant -### UX example +## UX example This example shows how to animate the progress bar from 0 to 100% with start and end states. diff --git a/docs/src/pages/components/ProgressIndicator.svx b/docs/src/pages/components/ProgressIndicator.svx index d62d0c759c..aeeb323444 100644 --- a/docs/src/pages/components/ProgressIndicator.svx +++ b/docs/src/pages/components/ProgressIndicator.svx @@ -7,7 +7,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default (horizontal) +## Default (horizontal) -### Prevent change on click +## Prevent change on click By default, clicking any step that is complete will update the current step index. @@ -53,13 +53,13 @@ Set `preventChangeOnClick` to `true` to prevent this behavior. /> -### Programmatic usage +## Programmatic usage When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable. -### Invalid step +## Invalid step -### Disabled steps +## Disabled steps -### Spaced-equally +## Spaced-equally -### Vertical +## Vertical -### Skeleton +## Skeleton Use the `count` prop to specify the number of progress steps to render. -### Skeleton (vertical) +## Skeleton (vertical) \ No newline at end of file diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx index 5f6d5f28ad..98ad0681b8 100644 --- a/docs/src/pages/components/RadioButton.svx +++ b/docs/src/pages/components/RadioButton.svx @@ -7,7 +7,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default @@ -15,7 +15,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"] -### With legend text +## With legend text @@ -23,7 +23,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"] -### Legend text slot +## Legend text slot Use the named "legendText" slot to customize the legend text. @@ -41,7 +41,7 @@ Use the named "legendText" slot to customize the legend text. -### Hidden legend +## Hidden legend It's recommended that you provide a legend for accessibility. @@ -53,13 +53,13 @@ Use `hideLegend` to visually hide the legend text. -### Reactive example +## Reactive example Use the `selected` prop to bind and update the selected value. -### Left-aligned label text +## Left-aligned label text @@ -67,7 +67,7 @@ Use the `selected` prop to bind and update the selected value. -### Disabled buttons +## Disabled buttons @@ -75,7 +75,7 @@ Use the `selected` prop to bind and update the selected value. -### Vertical orientation +## Vertical orientation @@ -83,7 +83,7 @@ Use the `selected` prop to bind and update the selected value. -### Skeleton +## Skeleton @@ -91,7 +91,7 @@ Use the `selected` prop to bind and update the selected value. -### Skeleton (vertical) +## Skeleton (vertical) diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx index 400b128420..dee56fad61 100644 --- a/docs/src/pages/components/RadioTile.svx +++ b/docs/src/pages/components/RadioTile.svx @@ -8,7 +8,7 @@ source: Tile/RadioTile.svelte import Preview from "../../components/Preview.svelte"; -### Default +## Default @@ -22,17 +22,17 @@ source: Tile/RadioTile.svelte -### Reactive (one-way binding) +## Reactive (one-way binding) -### Reactive (two-way binding) +## Reactive (two-way binding) Binding to the `selected` prop is a more concise approach to managing state. -### Light variant +## Light variant @@ -46,7 +46,7 @@ Binding to the `selected` prop is a more concise approach to managing state. -### Disabled state +## Disabled state diff --git a/docs/src/pages/components/RecursiveList.svx b/docs/src/pages/components/RecursiveList.svx index e1bc3dbc2a..76040ca8f4 100644 --- a/docs/src/pages/components/RecursiveList.svx +++ b/docs/src/pages/components/RecursiveList.svx @@ -13,7 +13,7 @@ A child node can render text, a link, HTML content, and other children.
-### Unordered +## Unordered The `children` prop accepts an array of child nodes. @@ -21,13 +21,13 @@ By default, the list type is unordered. -### Ordered +## Ordered Set `type` to `"ordered"` to use the ordered list variant. -### Ordered (native styles) +## Ordered (native styles) Set `type` to `"ordered-native"` to use the native styles for an ordered list. diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx index 7c6a9c1360..4bac0252f0 100644 --- a/docs/src/pages/components/Search.svx +++ b/docs/src/pages/components/Search.svx @@ -4,60 +4,60 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants. -### Default value +## Default value -### Reactive example +## Reactive example -### on:clear +## on:clear The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key. console.log('clear')}/> -### Expandable variant +## Expandable variant Set `expandable` to `true` to use the expandable variant. -### Light variant +## Light variant -### Large size +## Large size -### Small size +## Small size -### Disabled state +## Disabled state -### Custom search icon +## Custom search icon -### Skeleton +## Skeleton -### Skeleton (large) +## Skeleton (large) -### Skeleton (small) +## Skeleton (small) \ No newline at end of file diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx index 93883b00c2..e7bb5e9090 100644 --- a/docs/src/pages/components/Select.svx +++ b/docs/src/pages/components/Select.svx @@ -7,7 +7,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value. @@ -19,7 +19,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u -### Custom item text +## Custom item text Use the `text` prop on `SelectItem` to customize the display value. @@ -31,7 +31,7 @@ Use the `text` prop on `SelectItem` to customize the display value. -### Initial selected value +## Initial selected value Use the `selected` prop to specify an initial value. @@ -43,13 +43,13 @@ Use the `selected` prop to specify an initial value. -### Reactive example +## Reactive example The `selected` prop is reactive and supports two-way binding. -### Helper text +## Helper text -### Hidden label +## Hidden label -### Item groups +## Item groups -### Light variant +## Light variant -### Inline variant +## Inline variant -### Extra-large size +## Extra-large size -### Small size +## Small size -### Invalid state +## Invalid state -### Warning state +## Warning state -### Disabled state +## Disabled state -### Skeleton +## Skeleton -### Skeleton (hidden label) +## Skeleton (hidden label) \ No newline at end of file diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx index b61466a237..b04ec17fd7 100644 --- a/docs/src/pages/components/SelectableTile.svx +++ b/docs/src/pages/components/SelectableTile.svx @@ -8,7 +8,7 @@ source: Tile/SelectableTile.svelte import Preview from "../../components/Preview.svelte"; -### Multi-selectable tiles +## Multi-selectable tiles
@@ -22,7 +22,7 @@ source: Tile/SelectableTile.svelte
-### Light variant +## Light variant
@@ -36,7 +36,7 @@ source: Tile/SelectableTile.svelte
-### Disabled state +## Disabled state
diff --git a/docs/src/pages/components/SkeletonPlaceholder.svx b/docs/src/pages/components/SkeletonPlaceholder.svx index b60f995da5..2b7cc04594 100644 --- a/docs/src/pages/components/SkeletonPlaceholder.svx +++ b/docs/src/pages/components/SkeletonPlaceholder.svx @@ -3,10 +3,10 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Custom size +## Custom size diff --git a/docs/src/pages/components/SkeletonText.svx b/docs/src/pages/components/SkeletonText.svx index b77b3d32a0..c578fc1a1a 100644 --- a/docs/src/pages/components/SkeletonText.svx +++ b/docs/src/pages/components/SkeletonText.svx @@ -3,22 +3,22 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Heading variant +## Heading variant -### Paragraph variant +## Paragraph variant -### Paragraph with custom line count +## Paragraph with custom line count -### Paragraph with max width +## Paragraph with max width \ No newline at end of file diff --git a/docs/src/pages/components/Slider.svx b/docs/src/pages/components/Slider.svx index 75a282c31f..d7ac38d4ba 100644 --- a/docs/src/pages/components/Slider.svx +++ b/docs/src/pages/components/Slider.svx @@ -7,44 +7,44 @@ components: ["Slider", "SliderSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default -### Full width +## Full width Set `fullWidth` to `true` for the slider to span the full width of its containing element. -### Hidden text input +## Hidden text input -### Custom minimum, maximum values +## Custom minimum, maximum values -### Custom step value +## Custom step value -### Light variant +## Light variant -### Invalid state +## Invalid state -### Disabled state +## Disabled state -### Skeleton +## Skeleton -### Skeleton (hidden label) +## Skeleton (hidden label) \ No newline at end of file diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx index fc2713e748..ad6ec3dab9 100644 --- a/docs/src/pages/components/StructuredList.svx +++ b/docs/src/pages/components/StructuredList.svx @@ -8,7 +8,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " import Preview from "../../components/Preview.svelte"; -### Default (read-only) +## Default (read-only) @@ -52,7 +52,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " -### Condensed variant +## Condensed variant @@ -96,7 +96,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " -### Flush +## Flush @@ -140,7 +140,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " -### Selectable rows +## Selectable rows @@ -180,6 +180,6 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " -### Skeleton +## Skeleton \ No newline at end of file diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx index 151dfd6a06..90595b5ac1 100644 --- a/docs/src/pages/components/Tabs.svx +++ b/docs/src/pages/components/Tabs.svx @@ -7,7 +7,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default @@ -20,7 +20,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"] -### Auto width +## Auto width By default, the width of each tab is set to `10rem`. @@ -37,11 +37,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width. -### Reactive example +## Reactive example -### Disabled tabs +## Disabled tabs Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable. @@ -60,7 +60,7 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- -### Container type +## Container type @@ -73,10 +73,10 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- -### Skeleton (default) +## Skeleton (default) -### Skeleton (container) +## Skeleton (container) \ No newline at end of file diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx index 23f0a41ef5..85799b6e5a 100644 --- a/docs/src/pages/components/Tag.svx +++ b/docs/src/pages/components/Tag.svx @@ -4,15 +4,15 @@ import Preview from "../../components/Preview.svelte"; -### Default +## Default IBM Cloud -### Small size +## Small size IBM Cloud -### Tag types +## Tag types red magenta @@ -27,41 +27,41 @@ high-contrast outline -### Filterable +## Filterable carbon-components -### Filterable (disabled) +## Filterable (disabled) carbon-components -### Filterable (small) +## Filterable (small) carbon-components -### Custom icon +## Custom icon Note: rendering a custom icon cannnot be used with the filterable variant. IBM Cloud -### Interactive variant +## Interactive variant Set `interactive` to `true` to render a `button` element instead of a `div`. Machine learning -### Disabled +## Disabled The filterable and interactive tag variants have a disabled state. Machine learning Machine learning -### Skeleton +## Skeleton -### Skeleton (small) +## Skeleton (small) \ No newline at end of file diff --git a/docs/src/pages/components/TextArea.svx b/docs/src/pages/components/TextArea.svx index 097afb330f..6be736b52a 100644 --- a/docs/src/pages/components/TextArea.svx +++ b/docs/src/pages/components/TextArea.svx @@ -7,11 +7,11 @@ components: ["TextArea", "TextAreaSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default +## Default