mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #39 from metonym/refactor

Browse source 
refactor(code-snippet): fix multi-line copy button styling
This commit is contained in:
Eric Liu 2019-12-18 09:14:39 -08:00 • committed by GitHub
commit f048e9ea4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 142 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden], }</script><style>#root[hidden],
#docs-root[hidden] { #docs-root[hidden] {
display: none !important; display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.970eec03e30441a69853.bundle.js"></script><script src="vendors~main.970eec03e30441a69853.bundle.js"></script><script src="main.970eec03e30441a69853.bundle.js"></script></body></html> }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.a6ef337cb4dacecd69a9.bundle.js"></script><script src="vendors~main.a6ef337cb4dacecd69a9.bundle.js"></script><script src="main.a6ef337cb4dacecd69a9.bundle.js"></script></body></html>

2
docs/index.html
View file

@ -17,4 +17,4 @@
}</script><style>#root[hidden], }</script><style>#root[hidden],
#docs-root[hidden] { #docs-root[hidden] {
display: none !important; display: none !important;
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.de76cb4d691ff902e1d8.bundle.js"></script><script src="main.d19aceecbf99f4b72fa7.bundle.js"></script></body></html> }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.90220ada78163e544ba9.bundle.js"></script><script src="main.e7e683d3c4fc3d92da31.bundle.js"></script></body></html>

2
docs/main.970eec03e30441a69853.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.970eec03e30441a69853.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.970eec03e30441a69853.bundle.js","sources":["webpack:///main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.a6ef337cb4dacecd69a9.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.a6ef337cb4dacecd69a9.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.a6ef337cb4dacecd69a9.bundle.js","sources":["webpack:///main.a6ef337cb4dacecd69a9.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/main.d19aceecbf99f4b72fa7.bundle.js
View file

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{415:function(n,o,c){c(416),c(529),n.exports=c(878)},438:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[415,1,2]]]);

1
docs/main.e7e683d3c4fc3d92da31.bundle.js Normal file
View file

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{0:function(n,o,c){c(417),c(529),n.exports=c(878)},1:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[0,1,2]]]);

1
docs/runtime~main.970eec03e30441a69853.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"runtime~main.970eec03e30441a69853.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.970eec03e30441a69853.bundle.js → docs/runtime~main.a6ef337cb4dacecd69a9.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]); !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.970eec03e30441a69853.bundle.js.map //# sourceMappingURL=runtime~main.a6ef337cb4dacecd69a9.bundle.js.map

1
docs/runtime~main.a6ef337cb4dacecd69a9.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"runtime~main.a6ef337cb4dacecd69a9.bundle.js","sources":["webpack:///runtime~main.a6ef337cb4dacecd69a9.bundle.js"],"mappings":"AAAA","sourceRoot":""}

103
docs/vendors~main.90220ada78163e544ba9.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.970eec03e30441a69853.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.970eec03e30441a69853.bundle.js","sources":["webpack:///vendors~main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA;;;;;AAkkdA;;;;;AAmjGA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqgBA;;;;;;;AAfA","sourceRoot":""}

14
docs/vendors~main.970eec03e30441a69853.bundle.js → docs/vendors~main.a6ef337cb4dacecd69a9.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.a6ef337cb4dacecd69a9.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.a6ef337cb4dacecd69a9.bundle.js","sources":["webpack:///vendors~main.a6ef337cb4dacecd69a9.bundle.js"],"mappings":"AAAA;;;;;AAgkdA;;;;;AAmjGA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAygBA;;;;;;;AAfA","sourceRoot":""}

103
docs/vendors~main.de76cb4d691ff902e1d8.bundle.js
View file

File diff suppressed because one or more lines are too long

6
src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -2,7 +2,7 @@
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let type = 'single'; export let type = 'single';
export let props = {}; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
@ -16,13 +16,13 @@
</script> </script>
{#if type === 'single'} {#if type === 'single'}
<div {...props} class={_class}> <div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
<div class={cx('--snippet-container')}> <div class={cx('--snippet-container')}>
<span /> <span />
</div> </div>
</div> </div>
{:else if type === 'multi'} {:else if type === 'multi'}
<div {...props} class={_class}> <div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
<div class={cx('--snippet-container')}> <div class={cx('--snippet-container')}>
<span /> <span />
<span /> <span />

20
src/components/CodeSnippet/CodeSnippet.Story.svelte
View file

@ -5,31 +5,27 @@
import Layout from '../../internal/ui/Layout.svelte'; import Layout from '../../internal/ui/Layout.svelte';
import CodeSnippet from './CodeSnippet.svelte'; import CodeSnippet from './CodeSnippet.svelte';
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
const inlineProps = { light, feedback, copyLabel };
const singleLineProps = {
feedback,
copyButtonDescription,
'aria-label': $$props['aria-label']
};
const multiLineProps = { feedback, showLessText, showMoreText };
</script> </script>
<Layout> <Layout>
<div> <div>
{#if story === 'skeleton'} {#if story === 'skeleton'}
<div style="width: 800px"> <div style="width: 800px">
<CodeSnippetSkeleton type="single" props={{ style: 'margin-bottom: 8px' }} /> <CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
<CodeSnippetSkeleton type="multi" /> <CodeSnippetSkeleton type="multi" />
</div> </div>
{:else if story === 'inline'} {:else if story === 'inline'}
<CodeSnippet type="inline" {...inlineProps}>{'node -v'}</CodeSnippet> <CodeSnippet type="inline" {light} {feedback} {copyLabel}>{'node -v'}</CodeSnippet>
{:else if story === 'single line'} {:else if story === 'single line'}
<CodeSnippet type="single" {...singleLineProps}> <CodeSnippet
type="single"
{feedback}
{copyButtonDescription}
aria-label={$$props['aria-label']}>
{'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'} {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
</CodeSnippet> </CodeSnippet>
{:else if story === 'multi line'} {:else if story === 'multi line'}
<CodeSnippet type="multi" {...multiLineProps}> <CodeSnippet type="multi" {feedback} {showLessText} {showMoreText}>
{`@mixin grid-container { {`@mixin grid-container {
width: 100%; width: 100%;
padding-right: padding(mobile); padding-right: padding(mobile);

19
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -10,7 +10,6 @@
export let light = false; export let light = false;
export let props = {}; export let props = {};
import { onMount } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib'; import { cx } from '../../lib';
import Button from '../Button'; import Button from '../Button';
@ -20,18 +19,16 @@
const id = Math.random(); const id = Math.random();
let codeRef = undefined; let codeRef = undefined;
let expandedCode = false; let expandedCode = false;
let shouldShowMoreLessBtn = false; let showMoreLessBtn = false;
onMount(() => { $: if (codeRef) {
if (codeRef) {
const { height } = codeRef.getBoundingClientRect(); const { height } = codeRef.getBoundingClientRect();
shouldShowMoreLessBtn = type === 'multi' && height > 255; showMoreLessBtn = type === 'multi' && height > 255;
} }
});
$: _class = cx( $: _class = cx(
'--snippet', '--snippet',
type && `--snippet--${type}`, type && `--snippet--${type}`,
type === 'inline' && '--btn--copy',
expandedCode && '--snippet--expand', expandedCode && '--snippet--expand',
light && '--snippet--light', light && '--snippet--light',
className className
@ -64,8 +61,12 @@
</pre> </pre>
</code> </code>
</div> </div>
<CopyButton on:click {feedback} iconDescription={copyButtonDescription} /> <CopyButton
{#if shouldShowMoreLessBtn} on:click
class={cx('--snippet-button')}
{feedback}
iconDescription={copyButtonDescription} />
{#if showMoreLessBtn}
<Button <Button
kind="ghost" kind="ghost"
size="small" size="small"

1
src/components/TextInput/TextInput.Story.svelte
View file

@ -11,7 +11,6 @@
</script> </script>
<Layout> <Layout>
{value}
{#if story === 'skeleton'} {#if story === 'skeleton'}
<div aria-label="loading text input" aria-live="assertive" role="status" tabindex="0"> <div aria-label="loading text input" aria-live="assertive" role="status" tabindex="0">
<TextInputSkeleton /> <TextInputSkeleton />