From b7e00f0d01c22cabf0af25d9ff8ced9a59412c36 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 14:45:53 -0800 Subject: [PATCH 01/13] chore(storybook): set 9090 as default storybook port --- CONTRIBUTING.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ee488446..8e0af8ac 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -57,7 +57,7 @@ This project uses Storybook for UI development and "live" documentation. Run the following command to start the Storybook: ```bash -yarn start -p 9090 +yarn start ``` #### Component Format diff --git a/package.json b/package.json index c6471c70..1205e636 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "lib/index.js", "module": "lib/index.mjs", "scripts": { - "start": "start-storybook", + "start": "start-storybook -p 9090", "build": "rollup -c", "build:storybook": "build-storybook -o docs", "test": "jest --coverage", From dd5a39565974c2cd373f0174369c0a283bf682fa Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 14:46:26 -0800 Subject: [PATCH 02/13] fix(tooltip): support triggerText slot --- src/components/Tooltip/Tooltip.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.svelte b/src/components/Tooltip/Tooltip.svelte index b198f71f..c1ecd323 100644 --- a/src/components/Tooltip/Tooltip.svelte +++ b/src/components/Tooltip/Tooltip.svelte @@ -132,7 +132,7 @@
{#if showIcon}
- {triggerText} + {triggerText}
Date: Tue, 31 Dec 2019 14:54:37 -0800 Subject: [PATCH 03/13] refactor(tooltip): rename showIcon prop Remove triggerClass prop. --- src/components/Tooltip/Tooltip.Story.svelte | 2 +- src/components/Tooltip/Tooltip.stories.js | 3 +- src/components/Tooltip/Tooltip.svelte | 37 ++++++++++----------- 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/components/Tooltip/Tooltip.Story.svelte b/src/components/Tooltip/Tooltip.Story.svelte index ec9a1869..a45e68d6 100644 --- a/src/components/Tooltip/Tooltip.Story.svelte +++ b/src/components/Tooltip/Tooltip.Story.svelte @@ -58,7 +58,7 @@ Show
- +
My text wrapped with tooltip
Tooltip content diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js index 6beec04e..268d8f7b 100644 --- a/src/components/Tooltip/Tooltip.stories.js +++ b/src/components/Tooltip/Tooltip.stories.js @@ -23,7 +23,7 @@ export const NoIcon = () => ({ Component, props: { story: 'no icon', - showIcon: false, + hideIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabindex: text('Tab index (tabindex in )', '0') @@ -45,7 +45,6 @@ export const CustomIconOnly = () => ({ Component, props: { story: 'custom icon only', - showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), iconDescription: 'Helpful Information', tabindex: text('Tab index (tabindex in )', '0') diff --git a/src/components/Tooltip/Tooltip.svelte b/src/components/Tooltip/Tooltip.svelte index c1ecd323..0bc838c7 100644 --- a/src/components/Tooltip/Tooltip.svelte +++ b/src/components/Tooltip/Tooltip.svelte @@ -1,22 +1,21 @@ @@ -129,9 +128,9 @@ } }} /> -
- {#if showIcon} -
+
+ {#if !hideIcon} +
{triggerText}
From 23a0de3f2a75efbc93d8d7b0d95652c6fa5cb15a Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:19:47 -0800 Subject: [PATCH 04/13] fix(expandable-tile): use css to ensure max-height value --- src/components/Tile/ExpandableTile.svelte | 13 ++++++------- src/components/TooltipIcon/TooltipIcon.svelte | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte index f8a936da..83f4941b 100644 --- a/src/components/Tile/ExpandableTile.svelte +++ b/src/components/Tile/ExpandableTile.svelte @@ -3,17 +3,17 @@ export { className as class }; export let expanded = false; export let id = Math.random(); + export let light = false; + export let style = undefined; + export let tabindex = '0'; export let tileCollapsedIconText = 'Interact to expand Tile'; export let tileExpandedIconText = 'Interact to collapse Tile'; export let tileMaxHeight = 0; export let tilePadding = 0; - export let tabindex = '0'; - export let light = false; - export let style = undefined; import { onMount, afterUpdate } from 'svelte'; import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; - import { cx } from '../../lib'; + import { cx, css } from '../../lib'; let tile = undefined; let tileContent = undefined; @@ -37,8 +37,8 @@
{ expanded = !expanded; @@ -54,8 +54,7 @@ on:mouseenter on:mouseleave {tabindex} - {id} - {style}> + {id}>
diff --git a/src/components/TooltipIcon/TooltipIcon.svelte b/src/components/TooltipIcon/TooltipIcon.svelte index f3920d90..c1c8f7d5 100644 --- a/src/components/TooltipIcon/TooltipIcon.svelte +++ b/src/components/TooltipIcon/TooltipIcon.svelte @@ -1,11 +1,11 @@ From 10e6f1c79d3aba19d75244d0c835202db29288ef Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:20:14 -0800 Subject: [PATCH 05/13] refactor(tile-group): change defaultSelected to selected --- src/components/Tile/RadioTile.svelte | 18 ++++++------ src/components/Tile/Tile.Story.svelte | 10 +++---- src/components/Tile/TileGroup.svelte | 40 +++++++++------------------ 3 files changed, 27 insertions(+), 41 deletions(-) diff --git a/src/components/Tile/RadioTile.svelte b/src/components/Tile/RadioTile.svelte index 1f3e33f8..fd4c2c2c 100644 --- a/src/components/Tile/RadioTile.svelte +++ b/src/components/Tile/RadioTile.svelte @@ -2,23 +2,23 @@ let className = undefined; export { className as class }; export let checked = false; - export let id = Math.random(); - export let name = ''; export let iconDescription = 'Tile checkmark'; - export let value = ''; - export let tabindex = '0'; + export let id = Math.random(); export let light = false; + export let name = ''; export let style = undefined; + export let tabindex = '0'; + export let value = ''; import { getContext } from 'svelte'; import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16'; import { cx } from '../../lib'; - const { addTile, updateSelected, selected } = getContext('TileGroup'); + const { add, update, selectedValue } = getContext('TileGroup'); - addTile({ id, value, checked }); + add({ value, checked }); - $: checked = value === $selected.value; + $: checked = value === $selectedValue; { - updateSelected({ id, value }); + update(value); }} {id} {name} @@ -43,7 +43,7 @@ on:keydown={event => { if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); - updateSelected({ id, value }); + update(value); } }} {tabindex} diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte index c527a321..df08a77e 100644 --- a/src/components/Tile/Tile.Story.svelte +++ b/src/components/Tile/Tile.Story.svelte @@ -2,14 +2,14 @@ export let story = undefined; import Layout from '../../internal/ui/Layout.svelte'; - import Tile from './Tile.svelte'; import ClickableTile from './ClickableTile.svelte'; - import SelectableTile from './SelectableTile.svelte'; import ExpandableTile from './ExpandableTile.svelte'; + import RadioTile from './RadioTile.svelte'; + import SelectableTile from './SelectableTile.svelte'; + import Tile from './Tile.svelte'; import TileAboveTheFoldContent from './TileAboveTheFoldContent.svelte'; import TileBelowTheFoldContent from './TileBelowTheFoldContent.svelte'; import TileGroup from './TileGroup.svelte'; - import RadioTile from './RadioTile.svelte'; const radioTiles = [ { value: 'standard', id: 'tile-1', labelText: 'Selectable Tile' }, @@ -17,7 +17,7 @@ { value: 'selected', id: 'tile-3', labelText: 'Selectable Tile' } ]; - let defaultSelected = radioTiles[1]; + let selected = radioTiles[1].value; @@ -33,7 +33,7 @@ Multi-select Tile
{:else if story === 'selectable'} - + {#each radioTiles as { value, id, labelText }, i (id)} Selectable Tile {/each} diff --git a/src/components/Tile/TileGroup.svelte b/src/components/Tile/TileGroup.svelte index 6e0f87ae..2492ddf3 100644 --- a/src/components/Tile/TileGroup.svelte +++ b/src/components/Tile/TileGroup.svelte @@ -1,7 +1,7 @@
{#if legend} - {legend} + {legend} {/if}
From 359f99f682e95480de47fb8d23fdeab537605540 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:33:04 -0800 Subject: [PATCH 06/13] refactor(selectable-tile): dispatch select, unselect events Remove on:change event forwarding --- src/components/Tile/SelectableTile.svelte | 17 +++++++---------- src/components/Tile/Tile.Story.svelte | 16 +++++++++++++++- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/Tile/SelectableTile.svelte b/src/components/Tile/SelectableTile.svelte index 55488c60..123d754c 100644 --- a/src/components/Tile/SelectableTile.svelte +++ b/src/components/Tile/SelectableTile.svelte @@ -1,15 +1,15 @@ @@ -28,7 +30,19 @@ Clickable Tile {:else if story === 'multi-select'}
- Multi-select Tile + { + console.log('on:select', detail); + }} + on:deselect={({ detail }) => { + console.log('on:deselect', detail); + }}> + Multi-select Tile + Multi-select Tile Multi-select Tile
From e7bb051cab796e4475f36d1cddbc0b515f99bc3d Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:35:35 -0800 Subject: [PATCH 07/13] refactor(expandable-tile): include above, below the fold slots Remove TileAboveTheFoldContent, TileBelowTheFoldContent --- README.md | 2 - src/components/Tile/ExpandableTile.svelte | 38 +++++++++++++------ src/components/Tile/Tile.Story.svelte | 14 +------ .../Tile/TileAboveTheFoldContent.svelte | 17 --------- .../Tile/TileBelowTheFoldContent.svelte | 17 --------- src/components/Tile/index.js | 2 - src/index.js | 11 +----- 7 files changed, 29 insertions(+), 72 deletions(-) delete mode 100644 src/components/Tile/TileAboveTheFoldContent.svelte delete mode 100644 src/components/Tile/TileBelowTheFoldContent.svelte diff --git a/README.md b/README.md index 4b82976e..7c17045e 100644 --- a/README.md +++ b/README.md @@ -112,8 +112,6 @@ Currently, the following components are supported: - ClickableTile - SelectableTile - ExpandableTile - - TileAboveTheFoldContent - - TileBelowTheFoldContent - RadioTile - Tile - TileGroup diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte index 83f4941b..27cc7592 100644 --- a/src/components/Tile/ExpandableTile.svelte +++ b/src/components/Tile/ExpandableTile.svelte @@ -15,14 +15,14 @@ import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; import { cx, css } from '../../lib'; - let tile = undefined; - let tileContent = undefined; - let aboveTheFold = undefined; + let tileRef = undefined; + let contentRef = undefined; + let aboveRef = undefined; onMount(() => { - const style = window.getComputedStyle(tile); + const style = window.getComputedStyle(tileRef); - tileMaxHeight = aboveTheFold.getBoundingClientRect().height; + tileMaxHeight = aboveRef.getBoundingClientRect().height; tilePadding = parseInt(style.getPropertyValue('padding-top'), 10) + parseInt(style.getPropertyValue('padding-bottom'), 10); @@ -30,13 +30,13 @@ afterUpdate(() => { tileMaxHeight = expanded - ? tileContent.getBoundingClientRect().height - : aboveTheFold.getBoundingClientRect().height; + ? contentRef.getBoundingClientRect().height + : aboveRef.getBoundingClientRect().height; });
-
-
- +
+
+ + +
- + + +
diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte index e581580f..7119c2db 100644 --- a/src/components/Tile/Tile.Story.svelte +++ b/src/components/Tile/Tile.Story.svelte @@ -7,8 +7,6 @@ import RadioTile from './RadioTile.svelte'; import SelectableTile from './SelectableTile.svelte'; import Tile from './Tile.svelte'; - import TileAboveTheFoldContent from './TileAboveTheFoldContent.svelte'; - import TileBelowTheFoldContent from './TileBelowTheFoldContent.svelte'; import TileGroup from './TileGroup.svelte'; const radioTiles = [ @@ -54,16 +52,8 @@ {:else if story === 'expandable'} -
- -
Above the fold content here
- -
-
- -
Below the fold content here
- -
+
Above the fold content here
+
Below the fold content here
 {:else} Default Tile diff --git a/src/components/Tile/TileAboveTheFoldContent.svelte b/src/components/Tile/TileAboveTheFoldContent.svelte deleted file mode 100644 index 43cc4993..00000000 --- a/src/components/Tile/TileAboveTheFoldContent.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - - diff --git a/src/components/Tile/TileBelowTheFoldContent.svelte b/src/components/Tile/TileBelowTheFoldContent.svelte deleted file mode 100644 index 12ccd2e9..00000000 --- a/src/components/Tile/TileBelowTheFoldContent.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - - diff --git a/src/components/Tile/index.js b/src/components/Tile/index.js index 926396cc..b487a140 100644 --- a/src/components/Tile/index.js +++ b/src/components/Tile/index.js @@ -5,5 +5,3 @@ export { default as ClickableTile } from './ClickableTile.svelte'; export { default as ExpandableTile } from './ExpandableTile.svelte'; export { default as SelectableTile } from './SelectableTile.svelte'; export { default as TileGroup } from './TileGroup.svelte'; -export { default as TileAboveTheFoldContent } from './TileAboveTheFoldContent.svelte'; -export { default as TileBelowTheFoldContent } from './TileBelowTheFoldContent.svelte'; diff --git a/src/index.js b/src/index.js index 7ce8755c..109b2b3d 100644 --- a/src/index.js +++ b/src/index.js @@ -70,14 +70,7 @@ import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs'; import Tag, { TagSkeleton } from './components/Tag'; import TextArea, { TextAreaSkeleton } from './components/TextArea'; import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput'; -import Tile, { - ClickableTile, - ExpandableTile, - SelectableTile, - TileGroup, - TileAboveTheFoldContent, - TileBelowTheFoldContent -} from './components/Tile'; +import Tile, { ClickableTile, ExpandableTile, SelectableTile, TileGroup } from './components/Tile'; import TimePicker, { TimePickerSelect } from './components/TimePicker'; import Toggle, { ToggleSkeleton } from './components/Toggle'; import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall'; @@ -184,8 +177,6 @@ export { TextInput, TextInputSkeleton, Tile, - TileAboveTheFoldContent, - TileBelowTheFoldContent, TileGroup, ToastNotification, TimePicker, From 0b30250e57f173c17cf0a5ad5df68dfcae28dff1 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:47:45 -0800 Subject: [PATCH 08/13] refactor(structured-list): make StructuredListWrapper default component --- README.md | 1 - .../StructuredList.Story.svelte | 13 ++++++----- ...stWrapper.svelte => StructuredList.svelte} | 14 ++++++------ .../StructuredList/StructuredListInput.svelte | 22 +++++++++---------- .../StructuredList/StructuredListRow.svelte | 2 +- src/components/StructuredList/index.js | 5 ++++- src/index.js | 7 +++--- 7 files changed, 33 insertions(+), 31 deletions(-) rename src/components/StructuredList/{StructuredListWrapper.svelte => StructuredList.svelte} (78%) diff --git a/README.md b/README.md index 7c17045e..4e306e22 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,6 @@ Currently, the following components are supported: - StructuredListCell - StructuredListRow - StructuredListInput - - StructuredListWrapper - Tabs - Tab - TabContent diff --git a/src/components/StructuredList/StructuredList.Story.svelte b/src/components/StructuredList/StructuredList.Story.svelte index 75eaa452..593bf2e5 100644 --- a/src/components/StructuredList/StructuredList.Story.svelte +++ b/src/components/StructuredList/StructuredList.Story.svelte @@ -9,8 +9,10 @@ import StructuredListHead from './StructuredListHead.svelte'; import StructuredListInput from './StructuredListInput.svelte'; import StructuredListRow from './StructuredListRow.svelte'; - import StructuredListWrapper from './StructuredListWrapper.svelte'; import StructuredListSkeleton from './StructuredList.Skeleton.svelte'; + import StructuredList from './StructuredList.svelte'; + + let selected = 'row-1-value'; @@ -18,10 +20,9 @@ {#if story === 'skeleton'}
-
{:else if story === 'selection'} - + ColumnA @@ -54,9 +55,9 @@ {/each} - + {:else} - + ColumnA @@ -84,7 +85,7 @@ - + {/if}
diff --git a/src/components/StructuredList/StructuredListWrapper.svelte b/src/components/StructuredList/StructuredList.svelte similarity index 78% rename from src/components/StructuredList/StructuredListWrapper.svelte rename to src/components/StructuredList/StructuredList.svelte index b554d406..41d2629e 100644 --- a/src/components/StructuredList/StructuredListWrapper.svelte +++ b/src/components/StructuredList/StructuredList.svelte @@ -1,7 +1,7 @@ @@ -32,8 +32,8 @@ on:mouseover on:mouseenter on:mouseleave - class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)} aria-label={$$props['aria-label'] || 'Structured list section'} + class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)} {style}> diff --git a/src/components/StructuredList/StructuredListInput.svelte b/src/components/StructuredList/StructuredListInput.svelte index 449eb73d..bcf433c8 100644 --- a/src/components/StructuredList/StructuredListInput.svelte +++ b/src/components/StructuredList/StructuredListInput.svelte @@ -1,23 +1,23 @@ { update(value); }} - {value} - {name} - {title} - {style} + {checked} {id} - {checked} /> + {name} + {style} + {title} + {value} /> diff --git a/src/components/StructuredList/StructuredListRow.svelte b/src/components/StructuredList/StructuredListRow.svelte index 64c40317..71e79dc8 100644 --- a/src/components/StructuredList/StructuredListRow.svelte +++ b/src/components/StructuredList/StructuredListRow.svelte @@ -3,8 +3,8 @@ export { className as class }; export let head = false; export let label = false; - export let tabindex = '0'; export let style = undefined; + export let tabindex = '0'; import { cx } from '../../lib'; diff --git a/src/components/StructuredList/index.js b/src/components/StructuredList/index.js index 3236f9ed..b1580ea5 100644 --- a/src/components/StructuredList/index.js +++ b/src/components/StructuredList/index.js @@ -1,7 +1,10 @@ +import StructuredList from './StructuredList.svelte'; + +export default StructuredList; + export { default as StructuredListSkeleton } from './StructuredList.Skeleton.svelte'; export { default as StructuredListBody } from './StructuredListBody.svelte'; export { default as StructuredListHead } from './StructuredListHead.svelte'; export { default as StructuredListCell } from './StructuredListCell.svelte'; export { default as StructuredListRow } from './StructuredListRow.svelte'; export { default as StructuredListInput } from './StructuredListInput.svelte'; -export { default as StructuredListWrapper } from './StructuredListWrapper.svelte'; diff --git a/src/index.js b/src/index.js index 109b2b3d..20afa523 100644 --- a/src/index.js +++ b/src/index.js @@ -57,14 +57,13 @@ import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './component import SkeletonPlaceholder from './components/SkeletonPlaceholder'; import SkeletonText from './components/SkeletonText'; import Slider, { SliderSkeleton } from './components/Slider'; -import { +import StructuredList, { StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell, StructuredListRow, - StructuredListInput, - StructuredListWrapper + StructuredListInput } from './components/StructuredList'; import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs'; import Tag, { TagSkeleton } from './components/Tag'; @@ -159,13 +158,13 @@ export { Switch, Slider, SliderSkeleton, + StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell, StructuredListRow, StructuredListInput, - StructuredListWrapper, Tabs, Tab, TabContent, From 5e26510f4357c61267d4a64a4bad45b938d67174 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 31 Dec 2019 15:52:54 -0800 Subject: [PATCH 09/13] refactor(slider): remove formatLabel prop --- src/components/Slider/Slider.svelte | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte index d2d601ac..2d795a19 100644 --- a/src/components/Slider/Slider.svelte +++ b/src/components/Slider/Slider.svelte @@ -1,25 +1,23 @@
+ {selected} {#if story === 'skeleton'} {:else} -