From 40855361891c2388c2b775803bcac937fbd6c1d6 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 24 Feb 2024 10:15:45 -0800
Subject: [PATCH] fix(code-snippet): `showMoreLess={false}` should hide button

Fixes #1536

If `showMoreLess` is explicitly `false` for multi-line code snippets, the button should not be shown at all.
---
 COMPONENT_INDEX.md                        |  2 +-
 docs/src/COMPONENT_API.json               |  4 ++--
 src/CodeSnippet/CodeSnippet.svelte        | 20 ++++++++++++++++----
 types/CodeSnippet/CodeSnippet.svelte.d.ts |  6 ++++--
 4 files changed, 23 insertions(+), 9 deletions(-)

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       | <code>let</code> | Yes      | <code>null &#124; HTMLPreElement</code>              | <code>null</code>                                                                                                 | Obtain a reference to the pre HTML element                                                                                                                                                                            |
-| showMoreLess          | No       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to enable the show more/less button                                                                                                                                                                     |
+| showMoreLess          | No       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>true</code>                                                                                                 | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant                                                                                                |
 | expanded              | No       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to expand a multi-line code snippet (type="multi")                                                                                                                                                      |
 | type                  | No       | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                                                                                             | Set the type of code snippet                                                                                                                                                                                          |
 | code                  | No       | <code>let</code> | No       | <code>string</code>                                  | <code>undefined</code>                                                                                            | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />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;