From a303cf11e90fe36fff8d9b6dcd8f2eab6014caa6 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 07:28:05 -0500 Subject: [PATCH 01/12] add bgColor to StaticChip --- CHANGELOG.md | 2 ++ README.md | 2 +- components/StaticChip.svelte | 12 ++++++++---- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c06e21c7..5a9abcea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- bgColor to StaticChip ## [2.2.1](https://github.com/silinternational/ui-components/releases/tag/v2.2.1) - 2021-07-15 ### Fixed diff --git a/README.md b/README.md index eba28898..b5ef7b73 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,7 @@ Page (loading, title, layout, center, noProgress) [ Page.Subheader ] -StaticChip +StaticChip (bgColor) Tour (steps, data) diff --git a/components/StaticChip.svelte b/components/StaticChip.svelte index 305eb39d..991c4bd9 100644 --- a/components/StaticChip.svelte +++ b/components/StaticChip.svelte @@ -1,16 +1,20 @@ + + -
+
From 0f0a3e0d14543847b12d0caa243bd3c9aea34eb9 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 07:49:02 -0500 Subject: [PATCH 02/12] updated CHANGELOG --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a9abcea..57dcbfdc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - bgColor to StaticChip +### Changed +- README - updated component index + ## [2.2.1](https://github.com/silinternational/ui-components/releases/tag/v2.2.1) - 2021-07-15 ### Fixed - Excessive warnings from sass. Reverted to 1.32.12 From da54322a384ba2aa3335998f16323fae144c29f6 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 08:47:18 -0500 Subject: [PATCH 03/12] added borderRadius and padding props to Badge --- components/Badge.svelte | 10 +++++----- stories/Badge.stories.svelte | 9 ++++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/Badge.svelte b/components/Badge.svelte index 40ce2357..3e6f3a4b 100644 --- a/components/Badge.svelte +++ b/components/Badge.svelte @@ -1,17 +1,17 @@ - + diff --git a/stories/Badge.stories.svelte b/stories/Badge.stories.svelte index f4c93002..ad1e7fce 100644 --- a/stories/Badge.stories.svelte +++ b/stories/Badge.stories.svelte @@ -5,7 +5,9 @@ const args = { class: '', //only works for global classes - color: 'gray' + color: 'gray', + borderRadius: '50%', + padding: '.2em' } @@ -26,4 +28,9 @@ + + \ No newline at end of file From 97cd704ddea5937b71c04d23ffc3955461c94de7 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 08:51:01 -0500 Subject: [PATCH 04/12] updated CHANGELOG and README --- CHANGELOG.md | 2 ++ README.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c06e21c7..c4d88044 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- borderRadius and padding props to Badge ## [2.2.1](https://github.com/silinternational/ui-components/releases/tag/v2.2.1) - 2021-07-15 ### Fixed diff --git a/README.md b/README.md index eba28898..3dc3540c 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [ actions.js, title.js ] -Badge (color) +Badge (color, borderRadius, padding) CustomCard ( src, alt, title, icon, disabled, buttons, footerText From 2a40c0f9dc0812493baf748dd1cee6b60eb3b620 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 11:07:22 -0500 Subject: [PATCH 05/12] add bordered to Badge --- CHANGELOG.md | 2 +- README.md | 2 +- components/Badge.svelte | 15 ++++++++++++++- stories/Badge.stories.svelte | 5 +++++ 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f57f8ed..95193791 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] ### Added -- borderRadius and padding props to Badge +- borderRadius, padding and bordered props to Badge - bgColor to StaticChip ### Changed diff --git a/README.md b/README.md index 0a34dc16..074f02c5 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [ actions.js, title.js ] -Badge (color, borderRadius, padding) +Badge (color, borderRadius, padding, bordered) CustomCard ( src, alt, title, icon, disabled, buttons, footerText diff --git a/components/Badge.svelte b/components/Badge.svelte index 3e6f3a4b..f270f9fc 100644 --- a/components/Badge.svelte +++ b/components/Badge.svelte @@ -2,6 +2,11 @@ export let color = 'gray' export let borderRadius = '50%' export let padding = '.2em' + export let bordered = false + + let transparentColor = '' + + $: if (color.length == 7) transparentColor = color + '12' //sets transparent background color. only works with full hexadecimal color - + + + diff --git a/stories/Badge.stories.svelte b/stories/Badge.stories.svelte index ad1e7fce..36096446 100644 --- a/stories/Badge.stories.svelte +++ b/stories/Badge.stories.svelte @@ -33,4 +33,9 @@ + + \ No newline at end of file From 06ec6fe8f1aaae9f98edfcc7e6dd45bf8c4011d3 Mon Sep 17 00:00:00 2001 From: hobbitronics Date: Wed, 21 Jul 2021 12:36:07 -0500 Subject: [PATCH 06/12] check color with # and allow 3 digit hex colors --- components/Badge.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/Badge.svelte b/components/Badge.svelte index f270f9fc..60efc3d7 100644 --- a/components/Badge.svelte +++ b/components/Badge.svelte @@ -6,7 +6,11 @@ let transparentColor = '' - $: if (color.length == 7) transparentColor = color + '12' //sets transparent background color. only works with full hexadecimal color + $: if (color[0] == '#') { + color.length == 7 && (transparentColor = color + '12') + + color.length == 4 && (transparentColor = color + color.slice(1) + '12') + }