Skip to content

Commit

Permalink
docs: update component READMEs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcfranco
jcfranco authored Jan 11, 2024
1 parent 5d2bfa0 commit d51a78b
Show file tree
Hide file tree
Showing 24 changed files with 235 additions and 327 deletions.
174 changes: 41 additions & 133 deletions packages/calcite-components/src/components.d.ts
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions packages/calcite-components/src/components/block-section/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` |
| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
| `text` | `text` | The component header text. | `string` | `undefined` |
| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"` | `"button"` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` |
| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
| `text` | `text` | The component header text. | `string` | `undefined` |
| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. | `"button" \| "switch"` | `"button"` |

## Events

Expand Down
44 changes: 22 additions & 22 deletions packages/calcite-components/src/components/button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,28 +61,28 @@ Any additional attributes set on `<calcite-button>` are passed to the internal `

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` |
| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` |
| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` |
| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` |
| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` |
| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` |
| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` |
| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` |
| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` |
| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` |
| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` |
| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` |
| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |

## Methods

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
| --------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `undefined` |
| `indeterminate` | `indeterminate` | When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. | `boolean` | `false` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
Expand Down
Loading

0 comments on commit d51a78b

Please sign in to comment.