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<