diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 43843528..a24ddfd7 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -541,7 +541,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | let
| Yes | null | HTMLPreElement
| null
| Obtain a reference to the pre HTML element |
-| showMoreLess | No | let
| Yes | boolean
| false
| Set to `true` to enable the show more/less button |
+| showMoreLess | No | let
| Yes | boolean
| true
| Set to `false` to hide the show more/less button
NOTE: this prop only works with the `type="multi"` variant |
| expanded | No | let
| Yes | boolean
| false
| Set to `true` to expand a multi-line code snippet (type="multi") |
| type | No | let
| No | "single" | "inline" | "multi"
| "single"
| Set the type of code snippet |
| code | No | let
| No | string
| undefined
| Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index f9058608..dc16dc50 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1193,9 +1193,9 @@
{
"name": "showMoreLess",
"kind": "let",
- "description": "Set to `true` to enable the show more/less button",
+ "description": "Set to `false` to hide the show more/less button\n\nNOTE: this prop only works with the `type=\"multi\"` variant",
"type": "boolean",
- "value": "false",
+ "value": "true",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 3928f23d..3c93a31a 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -91,8 +91,12 @@
*/
export let showMoreText = "Show more";
- /** Set to `true` to enable the show more/less button */
- export let showMoreLess = false;
+ /**
+ * Set to `false` to hide the show more/less button
+ *
+ * NOTE: this prop only works with the `type="multi"` variant
+ */
+ export let showMoreLess = true;
/** Set an id for the code element */
export let id = "ccs-" + Math.random().toString(36);
@@ -120,10 +124,18 @@
$: expandText = expanded ? showLessText : showMoreText;
$: minHeight = expanded ? 16 * 15 : 48;
$: maxHeight = expanded ? "none" : 16 * 15 + "px";
+
+ // Show more/less only applies to multi-line code snippets
+ $: if (type !== "multi") showMoreLess = false;
+
$: if (type === "multi" && ref) {
- if (code === undefined) setShowMoreLess();
- if (code) tick().then(setShowMoreLess);
+ if (showMoreLess) {
+ // Only compute the show more/less button if the consumer has not opted out
+ if (code === undefined) setShowMoreLess();
+ if (code) tick().then(setShowMoreLess);
+ }
}
+
$: if (type === "multi") dispatch(expanded ? "expand" : "collapse");
onMount(() => {
diff --git a/types/CodeSnippet/CodeSnippet.svelte.d.ts b/types/CodeSnippet/CodeSnippet.svelte.d.ts
index 0fa4c0fa..a5c74456 100644
--- a/types/CodeSnippet/CodeSnippet.svelte.d.ts
+++ b/types/CodeSnippet/CodeSnippet.svelte.d.ts
@@ -104,8 +104,10 @@ export interface CodeSnippetProps {
showMoreText?: string;
/**
- * Set to `true` to enable the show more/less button
- * @default false
+ * Set to `false` to hide the show more/less button
+ *
+ * NOTE: this prop only works with the `type="multi"` variant
+ * @default true
*/
showMoreLess?: boolean;