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 7, 2024
1 parent ab356e1 commit caf8692
Show file tree
Hide file tree
Showing 67 changed files with 646 additions and 740 deletions.
160 changes: 33 additions & 127 deletions packages/calcite-components/src/components.d.ts
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions packages/calcite-components/src/components/action-bar/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,22 +61,22 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------- | ------------ |
| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` |
| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` |
| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` |
| `layout` | `layout` | Specifies the layout direction of the actions. | `"horizontal" \| "vertical"` | `"vertical"` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ expand?: string; collapse?: string; }` | `undefined` |
| `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean` | `false` |
| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` |
| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ------------ |
| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` |
| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` |
| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` |
| `layout` | `layout` | Specifies the layout direction of the actions. | `"horizontal" \| "vertical"` | `"vertical"` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionBarMessages` | `undefined` |
| `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean` | `false` |
| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` |
| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` |

## Events

| Event | Description | Type |
| ------------------------ | ---------------------------------------------- | ------------------- |
| `calciteActionBarToggle` | Emits when the `expanded` property is toggled. | `CustomEvent<void>` |
| `calciteActionBarToggle` | Fires when the `expanded` property is toggled. | `CustomEvent<void>` |

## Methods

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/action-group/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The `calcite-action-group` is a wrapper for multiple `calcite-action`s and house
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
| `layout` | `layout` | <span style="color:red">**[DEPRECATED]**</span> Use the `layout` property on the component's parent instead.<br/><br/>Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
| `menuOpen` | `menu-open` | When `true`, the `calcite-action-menu` is open. | `boolean` | `false` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ more?: string; }` | `undefined` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionGroupMessages` | `undefined` |
| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
| `scale` | `scale` | Specifies the size of the `calcite-action-menu`. | `"l" \| "m" \| "s"` | `undefined` |

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/action-menu/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

| Event | Description | Type |
| ----------------------- | ------------------------------------------ | ------------------- |
| `calciteActionMenuOpen` | Emits when the `open` property is toggled. | `CustomEvent<void>` |
| `calciteActionMenuOpen` | Fires when the `open` property is toggled. | `CustomEvent<void>` |

## Methods

Expand Down
20 changes: 10 additions & 10 deletions packages/calcite-components/src/components/action-pad/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,21 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------------- | ------------------------- | ----------------------------------------------------------------------- | ----------------------------------------- | ------------ |
| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` |
| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` |
| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` |
| `layout` | `layout` | Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ expand?: string; collapse?: string; }` | `undefined` |
| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` |
| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | ------------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ |
| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` |
| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` |
| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` |
| `layout` | `layout` | Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionPadMessages` | `undefined` |
| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` |
| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` |

## Events

| Event | Description | Type |
| ------------------------ | ---------------------------------------------- | ------------------- |
| `calciteActionPadToggle` | Emits when the `expanded` property is toggled. | `CustomEvent<void>` |
| `calciteActionPadToggle` | Fires when the `expanded` property is toggled. | `CustomEvent<void>` |

## Methods

Expand Down
32 changes: 16 additions & 16 deletions packages/calcite-components/src/components/action/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,22 @@ Renders a `calcite-action` that displays only an icon.

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- |
| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` |
| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` |
| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` |
| `compact` | `compact` | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` |
| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ loading?: string; indicator?: string; }` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` |
| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------- |
| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` |
| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` |
| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` |
| `compact` | `compact` | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` |
| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionMessages` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` |
| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` |

## Methods

Expand Down
Loading

0 comments on commit caf8692

Please sign in to comment.