Skip to content

fix(code-snippet): showMoreLess={false} should hide button #1917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
metonym merged 3 commits into from
Feb 24, 2024
Merged

fix(code-snippet): showMoreLess={false} should hide button #1917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a884a38
fix(code-snippet): `showMoreLess={false}` should hide button
metonym Feb 24, 2024
94641f9
docs(code-snippet): add "Hidden show more button" example
metonym Feb 24, 2024
e612684
docs(code-snippet): add "Hidden copy, show more buttons" example
metonym Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
4 changes: 2 additions & 2 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions docs/src/pages/components/CodeSnippet.svx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,16 @@ Set `hideCopyButton` to `true` to hide the copy button.

<CodeSnippet type="multi" {code} hideCopyButton />

## Hidden show more button

Only multi-line code snippets have a "Show more" button by default. Set `showMoreLess` to `false` to hide it.

<CodeSnippet type="multi" {code} showMoreLess={false} />

## Hidden copy, show more buttons

<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />

## Disabled

The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
Expand Down
20 changes: 16 additions & 4 deletions src/CodeSnippet/CodeSnippet.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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(() => {
Expand Down
6 changes: 4 additions & 2 deletions types/CodeSnippet/CodeSnippet.svelte.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down