From 8ce01f064408ca9935d6e517a130ca828377a95d Mon Sep 17 00:00:00 2001 From: yonatankra Date: Wed, 5 May 2021 17:22:59 +0300 Subject: [PATCH 1/6] Some fixes --- components/toggle-button-group/readme.md | 6 +++--- .../toggle-button-group/src/vwc-toggle-button-group.scss | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/toggle-button-group/readme.md b/components/toggle-button-group/readme.md index ee6e91496..00d69e7ea 100644 --- a/components/toggle-button-group/readme.md +++ b/components/toggle-button-group/readme.md @@ -6,9 +6,9 @@ ``` - BUTTON - BUTTON - BUTTON + BUTTON + BUTTON + BUTTON ``` diff --git a/components/toggle-button-group/src/vwc-toggle-button-group.scss b/components/toggle-button-group/src/vwc-toggle-button-group.scss index e6e212cc4..3815c0f89 100644 --- a/components/toggle-button-group/src/vwc-toggle-button-group.scss +++ b/components/toggle-button-group/src/vwc-toggle-button-group.scss @@ -132,13 +132,13 @@ $sizes: ( ::slotted(vwc-#{$scope}:last-child:not(:first-child)) { padding-right: var(--vwc-#{$scope}-vertical-padding, 0); border-radius: 0 var(#{$vvd-toggle-button-group-shape}) var(#{$vvd-toggle-button-group-shape}) 0; - + :host(:not([accent])) & { --vvd-#{$scope}-shape: 0 var(#{$vvd-toggle-button-group-shape}) var(#{$vvd-toggle-button-group-shape}) 0; } } - :host([disabled]) ::slotted([group-button]) { + :host([disabled]) ::slotted([vwc-#{$scope}]) { --vvd-#{$scope}-background-color: var(#{scheme-variables.$vvd-color-neutral-30}); --vvd-#{$scope}-color: var(#{scheme-variables.$vvd-color-neutral-50}); pointer-events: none; From ae7b108c4019b1801642f7b76af12e86704e9800 Mon Sep 17 00:00:00 2001 From: yonatankra Date: Wed, 5 May 2021 18:00:09 +0300 Subject: [PATCH 2/6] Removed button-group prop --- .../src/vwc-toggle-button-group.scss | 26 +++++++++++++------ .../src/vwc-toggle-button-group.ts | 2 -- .../stories/toggle-buttons-group.stories.js | 10 +++++++ 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/components/toggle-button-group/src/vwc-toggle-button-group.scss b/components/toggle-button-group/src/vwc-toggle-button-group.scss index 3815c0f89..3e08f4187 100644 --- a/components/toggle-button-group/src/vwc-toggle-button-group.scss +++ b/components/toggle-button-group/src/vwc-toggle-button-group.scss @@ -28,20 +28,21 @@ $sizes: ( display: flex; } -::slotted([group-button]) { +// TODO::remove these when viv-485 is complete + +::slotted(vwc-button) { --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-base}); --mdc-ripple-color: var(#{scheme-variables.$vvd-color-on-base}); --mdc-ripple-focus-opacity: 0; } -// TODO::remove these when viv-485 is complete :host([accent]) { - ::slotted([group-button][selected]) { + ::slotted(vwc-button[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-primary}); --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-primary}); } - ::slotted([group-button]:hover:not([selected])) { + ::slotted(vwc-button:hover:not([selected])) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50}); } } @@ -50,20 +51,28 @@ $sizes: ( --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30}); } -::slotted([group-button][selected]) { +::slotted(vwc-button[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50}); } -::slotted([group-button]:hover:not([selected])) { +::slotted(vwc-button:hover:not([selected])) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-40}); } -:host([disabled]) ::slotted([group-button]) { +:host([disabled]) ::slotted(vwc-button), +:host([disabled]) ::slotted(vwc-button[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30}); --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-neutral-50}); pointer-events: none; } + +:host([disabled]) ::slotted(vwc-icon-button), +:host([disabled][accent]) ::slotted(vwc-icon-button[selected]) { + --vvd-icon-button-background-color: var(#{scheme-variables.$vvd-color-neutral-30}); + --vvd-icon-button-color: var(#{scheme-variables.$vvd-color-neutral-50}); + pointer-events: none; +} // End of viv-485 removal @each $scope in $scopes { @@ -138,9 +147,10 @@ $sizes: ( } } - :host([disabled]) ::slotted([vwc-#{$scope}]) { + :host([disabled]) ::slotted(vwc-#{$scope}), :host([disabled][accent]) ::slotted(vwc-#{$scope}[selected]) { --vvd-#{$scope}-background-color: var(#{scheme-variables.$vvd-color-neutral-30}); --vvd-#{$scope}-color: var(#{scheme-variables.$vvd-color-neutral-50}); pointer-events: none; } + } diff --git a/components/toggle-button-group/src/vwc-toggle-button-group.ts b/components/toggle-button-group/src/vwc-toggle-button-group.ts index aa50f4f8e..0cf651e08 100644 --- a/components/toggle-button-group/src/vwc-toggle-button-group.ts +++ b/components/toggle-button-group/src/vwc-toggle-button-group.ts @@ -13,7 +13,6 @@ export const VALID_BUTTON_ELEMENTS = ['vwc-button', 'vwc-icon-button']; const SELECTED_EVENT_NAME = 'selected'; const SELECTED_ATTRIBUTE_NAME = 'selected'; const MULTIPLE_ATTRIBUTE_NAME = 'multi'; -const GROUP_BUTTON_ATTRIBUTE = 'group-button'; function isValidButton(buttonElement: Element) { return VALID_BUTTON_ELEMENTS.includes(buttonElement.tagName.toLowerCase()); @@ -171,7 +170,6 @@ export class VwcToggleButtonGroup extends LitElement { private setNodeAttributes(buttonElement: Element) { buttonElement.setAttribute('layout', 'filled'); - buttonElement.setAttribute(GROUP_BUTTON_ATTRIBUTE, ''); } private setVwcButtonSize(buttonElement: Element) { diff --git a/components/toggle-button-group/stories/toggle-buttons-group.stories.js b/components/toggle-button-group/stories/toggle-buttons-group.stories.js index 1ac2cc388..bacc0c59c 100644 --- a/components/toggle-button-group/stories/toggle-buttons-group.stories.js +++ b/components/toggle-button-group/stories/toggle-buttons-group.stories.js @@ -44,6 +44,16 @@ const AccentTemplate = args => html` html` + + + + +`; + +export const Disabled = DisabledTemplate.bind({}); +Accent.args = { }; + const MultiTemplate = args => html` From 712fc083545a07e5510a4e5f4bfb853418ea2eb4 Mon Sep 17 00:00:00 2001 From: yonatankra Date: Thu, 6 May 2021 12:31:18 +0300 Subject: [PATCH 3/6] Update readme --- components/toggle-button-group/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/toggle-button-group/readme.md b/components/toggle-button-group/readme.md index a3d632d53..be6a850ed 100644 --- a/components/toggle-button-group/readme.md +++ b/components/toggle-button-group/readme.md @@ -65,4 +65,4 @@ * If you remove an item and not destroy it, remember that there’s a listener on this item * Selected items have the `selected` * In order to enforce styles, the following attributes are automatically removed: - * `layout=”outlined”` + * `layout` - will be set `layout="filled"` on load (note that changing this after initial load will change the way it looks) From c99d4b37688f75892f4fd59b7e2eed28ca563bbb Mon Sep 17 00:00:00 2001 From: yonatankra Date: Thu, 6 May 2021 13:49:59 +0300 Subject: [PATCH 4/6] Remove obsolete test --- .../test/toggle-buttons-group.test.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/components/toggle-button-group/test/toggle-buttons-group.test.js b/components/toggle-button-group/test/toggle-buttons-group.test.js index 6a8927524..2563ba152 100644 --- a/components/toggle-button-group/test/toggle-buttons-group.test.js +++ b/components/toggle-button-group/test/toggle-buttons-group.test.js @@ -12,7 +12,6 @@ chai.use(chaiDomDiff); const COMPONENT_NAME = 'vwc-toggle-button-group'; const SELECTED_EVENT_NAME = 'selected'; -const GROUP_BUTTON_ATTRIBUTE = 'group-button'; describe('Toggle-buttons-group', () => { const buttonValues = [ @@ -42,23 +41,6 @@ describe('Toggle-buttons-group', () => { .equalSnapshot(); }); - it(`should add group-button attr to group buttons`, function () { - const [actualElement] = addElement( - textToDomToParent(`<${COMPONENT_NAME}> -<${VALID_BUTTON_ELEMENTS[0]}>BUTTON -<${VALID_BUTTON_ELEMENTS[0]}>BUTTON -<${VALID_BUTTON_ELEMENTS[0]}>BUTTON -`) - ); - - const buttons = actualElement.children; - buttons.forEach((button, index) => { - expect(button.hasAttribute(GROUP_BUTTON_ATTRIBUTE)) - .to - .equal(true); - }); - }); - it(`should set click listeners on the buttons`, function () { const [actualElement] = addElement( textToDomToParent(`<${COMPONENT_NAME}> From 41b70baf684d609f73f46deb47dc555330753a35 Mon Sep 17 00:00:00 2001 From: yonatankra Date: Thu, 6 May 2021 13:51:09 +0300 Subject: [PATCH 5/6] Refine documentation --- components/toggle-button-group/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/toggle-button-group/readme.md b/components/toggle-button-group/readme.md index be6a850ed..dbfb3354a 100644 --- a/components/toggle-button-group/readme.md +++ b/components/toggle-button-group/readme.md @@ -64,5 +64,5 @@ * One can add more buttons dynamically * If you remove an item and not destroy it, remember that there’s a listener on this item * Selected items have the `selected` -* In order to enforce styles, the following attributes are automatically removed: +* In order to enforce styles, the following attributes are automatically altered: * `layout` - will be set `layout="filled"` on load (note that changing this after initial load will change the way it looks) From 6cf79265aeca7df7dc5b1467dd41b9f7e4738fc5 Mon Sep 17 00:00:00 2001 From: yonatankra Date: Thu, 6 May 2021 14:27:47 +0300 Subject: [PATCH 6/6] Fix scss linting issues --- .../src/vwc-toggle-button-group.scss | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/components/toggle-button-group/src/vwc-toggle-button-group.scss b/components/toggle-button-group/src/vwc-toggle-button-group.scss index 3e08f4187..4bfab781a 100644 --- a/components/toggle-button-group/src/vwc-toggle-button-group.scss +++ b/components/toggle-button-group/src/vwc-toggle-button-group.scss @@ -30,49 +30,38 @@ $sizes: ( // TODO::remove these when viv-485 is complete -::slotted(vwc-button) { +::slotted(#{vwc-button}) { + --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30}); --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-base}); --mdc-ripple-color: var(#{scheme-variables.$vvd-color-on-base}); --mdc-ripple-focus-opacity: 0; } :host([accent]) { - ::slotted(vwc-button[selected]) { + ::slotted(#{vwc-button}[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-primary}); --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-primary}); } - ::slotted(vwc-button:hover:not([selected])) { + ::slotted(#{vwc-button}:hover:not([selected])) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50}); } } -::slotted(vwc-button) { - --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30}); -} - -::slotted(vwc-button[selected]) { +::slotted(#{vwc-button}[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50}); } -::slotted(vwc-button:hover:not([selected])) { +::slotted(#{vwc-button}:hover:not([selected])) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-40}); } -:host([disabled]) ::slotted(vwc-button), -:host([disabled]) ::slotted(vwc-button[selected]) { +:host([disabled]) ::slotted(#{vwc-button}), +:host([disabled]) ::slotted(#{vwc-button}[selected]) { --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30}); --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-neutral-50}); pointer-events: none; } - - -:host([disabled]) ::slotted(vwc-icon-button), -:host([disabled][accent]) ::slotted(vwc-icon-button[selected]) { - --vvd-icon-button-background-color: var(#{scheme-variables.$vvd-color-neutral-30}); - --vvd-icon-button-color: var(#{scheme-variables.$vvd-color-neutral-50}); - pointer-events: none; -} // End of viv-485 removal @each $scope in $scopes {