mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Fixes #1536

If `showMoreLess` is explicitly `false` for multi-line code snippets, the button should not be shown at all.
This commit is contained in:
Eric Liu 2024-02-24 10:15:45 -08:00 • committed by metonym
commit 4085536189
4 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -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. |

4
docs/src/COMPONENT_API.json
View file

@ -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,

20
src/CodeSnippet/CodeSnippet.svelte
View file

@ -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(() => {

6
types/CodeSnippet/CodeSnippet.svelte.d.ts vendored
View file

@ -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;