diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b7ef82be..355627b0 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4285,7 +4285,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- | -| direction | let | No | "end" | "front" | "end" | -- | +| clamp | let | No | "end" | "front" | "end" | -- | ### Slots diff --git a/actions/truncate.js b/actions/truncate.js index d9a4841f..b886728b 100644 --- a/actions/truncate.js +++ b/actions/truncate.js @@ -1,24 +1,25 @@ /** * Svelte action that applies single-line text truncation to an element * @param {HTMLElement} node - * @param {{ direction?: "end" | "front" }} params + * @param {{ clamp?: "end" | "front" }} params * @example * * *

...

+ *

...

*/ export function truncate(node, params = {}) { function toggleClass(front = false) { node.className = `bx--text-truncate--${front ? "front" : "end"}`; } - toggleClass(params.direction === "front"); + toggleClass(params.clamp === "front"); return { update(params) { - toggleClass(params.direction === "front"); + toggleClass(params.clamp === "front"); }, }; } diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 95e3aca9..2bbc6bc8 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -10669,7 +10669,7 @@ "filePath": "src/Truncate/Truncate.svelte", "props": [ { - "name": "direction", + "name": "clamp", "kind": "let", "type": "\"end\" | \"front\"", "value": "\"end\"", @@ -10681,7 +10681,7 @@ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "rest_props": { "type": "Element", "name": "p" } }, { "moduleName": "UnorderedList", diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx index 8f15b19b..41c0ce4a 100644 --- a/docs/src/pages/components/Truncate.svx +++ b/docs/src/pages/components/Truncate.svx @@ -5,7 +5,7 @@ import Preview from "../../components/Preview.svelte"; -This is a utility component that wraps the `.bx--text-truncate--*` CSS selector from `carbon-components` for single line text truncation. +This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation. ### Default @@ -15,11 +15,11 @@ By default, text will be clamped at the end of the line. Text is wrapped with a Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. -### Direction (front) +### Clamp front -Set `direction` to `"front"` to clamp the text from the front. +Set `clamp` to `"front"` to clamp the text from the front. - + Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. @@ -32,6 +32,6 @@ Import path: `import { truncate } from "carbon-components-svelte/actions";`

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

-

+

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

\ No newline at end of file diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte index 63fc5a70..465d66d8 100644 --- a/src/Truncate/Truncate.svelte +++ b/src/Truncate/Truncate.svelte @@ -1,11 +1,11 @@

diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte index 9e34961a..35e90c8b 100644 --- a/tests/Truncate.test.svelte +++ b/tests/Truncate.test.svelte @@ -8,7 +8,7 @@ Carbon Design System, an open source design system by IBM. - + Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. @@ -17,7 +17,7 @@ Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. -

+

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

diff --git a/types/Truncate/Truncate.d.ts b/types/Truncate/Truncate.d.ts index 9a2c1ef3..9977769b 100644 --- a/types/Truncate/Truncate.d.ts +++ b/types/Truncate/Truncate.d.ts @@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte"; export interface TruncateProps - extends svelte.JSX.HTMLAttributes { + extends svelte.JSX.HTMLAttributes { /** * @default "end" */ - direction?: "end" | "front"; + clamp?: "end" | "front"; } export default class Truncate extends SvelteComponentTyped<