diff --git a/CHANGELOG.md b/CHANGELOG.md index eacef304f7..222fcf691b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,41 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [1.5.1](http://inindca///compare/v1.5.0...v1.5.1) (2020-09-18) + + +### Bug Fixes + +* **doc-site:** fix the sort order of components ([40fcb0c](http://inindca///commit/40fcb0c0beac68670ce87a225439089d951b4a4b)) + +## [1.5.0](http://inindca///compare/v1.4.0...v1.5.0) (2020-09-17) + + +### Features + +* **color-styles:** exporting common color variables ([eec3866](http://inindca///commit/eec3866d0734339b9fa3beace3102178c5f50303)) + + +### Bug Fixes + +* **gux-dropdown:** better handle asynchronously loaded options ([dcc1c13](http://inindca///commit/dcc1c13033025e723e4a3cf90967f95373f55d8f)) + +## [1.4.0](http://inindca///compare/v1.3.2...v1.4.0) (2020-09-16) + + +### Features + +* **gux-pagination:** added expanded layout ([524d98d](http://inindca///commit/524d98d09d0a21029151c0b5fc74b1f8914f3820)) + +### [1.3.2](http://inindca///compare/v1.3.1...v1.3.2) (2020-09-15) + + +### Bug Fixes + +* **gux-table:** resizeObserver not present in spec tests ([f9193a1](http://inindca///commit/f9193a1e542c87b06b8f64ca2ad83b3784fd9d43)) + +### [1.3.1](http://inindca///compare/v1.3.0...v1.3.1) (2020-09-14) + ## [1.3.0](http://inindca///compare/v1.2.0...v1.3.0) (2020-09-11) diff --git a/README.md b/README.md index 6c2f30322b..32c9d74706 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ The library provides a baseline set of CSS styles in the package under `dist/gen - Baseline styles for browser elements - Classes for specific typography patterns -- CSS variables for colors (coming soon) +- CSS variables for colors - CSS variables for spacing (coming soon) The best mechanism for importing the stylesheet into your project will depend on how you handle CSS in your project in general. Reach out to the Common UI Development group if you're having trouble with your specific integration. diff --git a/docs/package-lock.json b/docs/package-lock.json index 2f544313c5..2457fbef76 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -3957,13 +3957,6 @@ "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", "dev": true }, - "image-size": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", - "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", - "dev": true, - "optional": true - }, "import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", @@ -4327,31 +4320,6 @@ "resolved": "https://registry.npmjs.org/lemons/-/lemons-1.6.0.tgz", "integrity": "sha512-nMnKQjqWp2G3odsHtwZD//WStAYnqCA6bM3JXLTLsQ1Mwkj2iLuaNQTJ6axt7wGqrZHMSt6tKDlHdjjJt9Cgxg==" }, - "less": { - "version": "3.12.2", - "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz", - "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==", - "dev": true, - "requires": { - "errno": "^0.1.1", - "graceful-fs": "^4.1.2", - "image-size": "~0.5.0", - "make-dir": "^2.1.0", - "mime": "^1.4.1", - "native-request": "^1.0.5", - "source-map": "~0.6.0", - "tslib": "^1.10.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "optional": true - } - } - }, "less-loader": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz", @@ -4720,13 +4688,6 @@ "to-regex": "^3.0.1" } }, - "native-request": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.7.tgz", - "integrity": "sha512-9nRjinI9bmz+S7dgNtf4A70+/vPhnd+2krGpy4SUlADuOuSa24IDkNaZ+R/QT1wQ6S8jBdi6wE7fLekFZNfUpQ==", - "dev": true, - "optional": true - }, "negotiator": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", diff --git a/docs/src/component-listing/app.js b/docs/src/component-listing/app.js index eb9fe12b5c..d921af8f8d 100644 --- a/docs/src/component-listing/app.js +++ b/docs/src/component-listing/app.js @@ -7,7 +7,7 @@ export function bootstrap() { let components = Object.keys(COMPONENT_SPEC) .filter(component => !COMPONENT_SPEC[component].hidePage) .sort((a, b) => { - return a < b ? -1 : 1; + return shortName(a) < shortName(b) ? -1 : 1; }); document.body.appendChild( diff --git a/docs/src/components-spec.json b/docs/src/components-spec.json index 3e4ebeddda..7b9c0cb2e4 100644 --- a/docs/src/components-spec.json +++ b/docs/src/components-spec.json @@ -327,12 +327,16 @@ "attributes": { "compact": "checkbox", "object-table": "checkbox", - "epmty-message": "text" + "epmty-message": "text", + "columns-order": "text", + "resizable-columns": "checkbox", + "selectable-rows": "checkbox" }, - "events": {} + "events": { + "sortChanged": "Fired when sorting of the table column is changed", + "selectionChanged": "Fired when table row was selected/unselected" + } }, - "typography": { - "attributes": {}, - "events": {} - } + "typography": {}, + "color": {} } diff --git a/docs/webpack.config.js b/docs/webpack.config.js index 4d08439616..cf9e5b5f32 100644 --- a/docs/webpack.config.js +++ b/docs/webpack.config.js @@ -86,8 +86,7 @@ module.exports = { devServer: { compress: true, port: 8080, - serveIndex: true, - disableHostCheck: true + serveIndex: true } }; diff --git a/package-lock.json b/package-lock.json index d834ac5529..b0379cf509 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@genesys/common-webcomponents", - "version": "1.3.0", + "version": "1.5.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 575e496b85..02860f40d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@genesys/common-webcomponents", - "version": "1.3.0", + "version": "1.5.1", "description": "Common webcomponents", "main": "dist/stencil-wrapper.js", "types": "dist/types/index.d.ts", diff --git a/scripts/templates/component/component.less.hbs b/scripts/templates/component/component.less.hbs index df06676ead..bf393a59e7 100644 --- a/scripts/templates/component/component.less.hbs +++ b/scripts/templates/component/component.less.hbs @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style @@ -9,7 +11,7 @@ // Dark .{{componentName}}-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; }; .{{componentPrefix}}dark-theme { @@ -24,7 +26,7 @@ // Light .{{componentName}}-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .{{componentPrefix}}light-theme { @@ -40,4 +42,4 @@ // Default Theme {{componentName}} { .{{componentName}}-light-theme(); -} \ No newline at end of file +} diff --git a/src/common-utils.ts b/src/common-utils.ts index 9533910795..8d262bc315 100644 --- a/src/common-utils.ts +++ b/src/common-utils.ts @@ -137,3 +137,32 @@ const DATE_STRING_POSTFIX: string = 'Z'; // always use UTC export function fromIsoTimeString(timeStr: string): Date { return new Date(DATE_STRING_PREFIX + timeStr.trim() + DATE_STRING_POSTFIX); } + +/******************************************************** + * DOM/Event Utilities * + * * + * Helpers for components * + ********************************************************/ + +/** + * Checks to see if an event originated within an element matching a specific selector and + * if it did, passes the element to a handler function and returns the handler's result. + */ +export function whenEventIsFrom( + selector: string, + event: Event, + handler: (element: HTMLElement) => T +): T | null { + // Don't search for matches above the node where we captured the event; + const exitTarget = event.currentTarget as HTMLElement; + // Start with the oringal event target + let checkTarget = event.target as HTMLElement; + while (checkTarget !== exitTarget && checkTarget !== null) { + if (checkTarget.matches(selector)) { + return handler(checkTarget); + } else { + checkTarget = checkTarget.parentElement; + } + } + return null; +} diff --git a/src/components/beta/form/gux-form-field-beta/gux-form-field-beta.less b/src/components/beta/form/gux-form-field-beta/gux-form-field-beta.less index 93462a2b8d..cfca0103c4 100644 --- a/src/components/beta/form/gux-form-field-beta/gux-form-field-beta.less +++ b/src/components/beta/form/gux-form-field-beta/gux-form-field-beta.less @@ -1,3 +1,4 @@ +@import (reference) '../../../../style/color.less'; // Variables part @@ -40,7 +41,7 @@ gux-form-field-beta { // Dark .gux-form-field-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; }; .gux-dark-theme { @@ -55,7 +56,7 @@ gux-form-field-beta.gux-dark-theme { // Light .gux-form-field-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-error-message-beta/gux-error-message-beta.less b/src/components/beta/form/gux-form-field/components/gux-error-message-beta/gux-error-message-beta.less index df08358c9a..ebf5137045 100644 --- a/src/components/beta/form/gux-form-field/components/gux-error-message-beta/gux-error-message-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-error-message-beta/gux-error-message-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../style/color.less'; + // Style gux-error-message-beta { .container { @@ -16,7 +18,7 @@ gux-error-message-beta { // Dark .gux-error-message-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; }; .gux-dark-theme { @@ -31,7 +33,7 @@ gux-error-message-beta.gux-dark-theme { // Light .gux-error-message-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-checkbox-beta/gux-input-checkbox-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-checkbox-beta/gux-input-checkbox-beta.less index 32362e81d4..a2d4c76d37 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-checkbox-beta/gux-input-checkbox-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-checkbox-beta/gux-input-checkbox-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../style/color.less'; + @gux-icon-checkbox-unchecked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%2398a7b8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E"); @gux-icon-checkbox-unchecked-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E"); @gux-icon-checkbox-checked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M144 272l96 -64l224 224l32 -32l-256 -320l-128 160zM416 228l32 40v-268h-416v416h353l-32 -32h-289v-352h352v196z' /%3E%3C/svg%3E"); @@ -56,8 +58,8 @@ gux-input-checkbox-beta { position: absolute; left: 4px; top: 6px; - width: @gux-icon-size-default; - height: @gux-icon-size-default; + width: @gux-icon-size-default-global; + height: @gux-icon-size-default-global; } label.gux-unchecked::after { @@ -86,7 +88,7 @@ gux-input-checkbox-beta { } .gux-input-checkbox-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; label.gux-checked::after { background-image: @gux-icon-checkbox-checked-dark; @@ -113,7 +115,7 @@ gux-input-checkbox-beta.gux-dark-theme { // Light .gux-input-checkbox-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-color-beta/gux-input-color-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-color-beta/gux-input-color-beta.less index 37ee497832..0c513ab8eb 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-color-beta/gux-input-color-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-color-beta/gux-input-color-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../style/color.less'; + // Variables part @background: #f9fafb; @@ -25,15 +27,15 @@ gux-input-color-beta { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s; background-color: @background; - border: 1px solid @gux-border-alt; + border: 1px solid #dae1e8; border-radius: 2px; cursor: pointer; &:focus, &.opened { - border-color: @gux-dark-blue; + border-color: @gux-genesys-dark-blue; outline: none; - box-shadow: 0 0 4px fade(@gux-blue, 50%); + box-shadow: 0 0 4px fade(@gux-genesys-blue, 50%); } &:disabled { @@ -53,7 +55,7 @@ gux-input-color-beta { margin: 9px 0; float: left; font-size: 12px; - color: @gux-grey-2; + color: @gux-type; } .gux-input-color-color-select { @@ -92,25 +94,25 @@ gux-input-color-beta { // Dark .gux-input-color-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; .gux-input-color-main-element { - border-color: @gux-grey-1; - background-color: @gux-border-dark; + border-color: @gux-grey-global; + background-color: #555d66; } .gux-input-color-main-element:focus, .gux-input-color-opened { - border-color: @gux-blue; + border-color: @gux-genesys-blue; box-shadow: none; } .gux-input-color-color-name { - color: @gux-off-white; + color: @gux-type-dark; } gux-icon { - color: @gux-off-white; + color: @gux-type-dark; } } @@ -126,7 +128,7 @@ gux-input-color-beta.gux-dark-theme { // Light .gux-input-color-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-color-select-beta/gux-input-color-select-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-color-select-beta/gux-input-color-select-beta.less index 161a18a823..7992a33bdd 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-color-select-beta/gux-input-color-select-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-color-select-beta/gux-input-color-select-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../../../style/color.less'; + // Variables part // Style @@ -5,8 +7,8 @@ gux-input-color-select-beta { display: inline-block; > div { - border: 1px solid @gux-border-alt; - background-color: @gux-off-white; + border: 1px solid #dae1e8; + background-color: @gux-type-dark; padding: 20px 0 12px; box-shadow: 0 0 2px rgba(34, 37, 41, 0.24); box-sizing: border-box; @@ -34,7 +36,7 @@ gux-input-color-select-beta { // Dark .gux-input-color-select-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { @@ -49,7 +51,7 @@ gux-input-color-select-beta.gux-dark-theme { // Light .gux-input-color-select-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-input-color-option-beta/gux-input-color-option-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-input-color-option-beta/gux-input-color-option-beta.less index ad4bd6ee11..0ab2f1b292 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-input-color-option-beta/gux-input-color-option-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-color/components/gux-input-color-option-beta/gux-input-color-option-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../../../style/color.less'; + // Variables part // Style @@ -18,13 +20,13 @@ gux-input-color-option-beta { &:focus, &.gux-input-color-option-active, &:active { - outline: 1px solid @gux-dark-blue; + outline: 1px solid @gux-genesys-dark-blue; border: 1px white solid; } &:disabled { - background-color: @gux-off-white; - border: 1px solid @gux-grey-2; + background-color: @gux-type-dark; + border: 1px solid @gux-charcoal-grey; opacity: 0.5; cursor: default; } @@ -39,7 +41,7 @@ gux-input-color-option-beta { // Dark .gux-input-color-option-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { @@ -54,7 +56,7 @@ gux-input-color-option-beta.gux-dark-theme { // Light .gux-input-color-option-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-radio-beta/gux-input-radio-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-radio-beta/gux-input-radio-beta.less index ede4a646bc..4f3172992b 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-radio-beta/gux-input-radio-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-radio-beta/gux-input-radio-beta.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../../../style/color.less'; + // @gux-icon-radio-unchecked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='92 33 324 320'%3E%3Cpath d='M256 350q66 0 113 -46.5t47 -111.5t-47 -111.5t-113 -46.5t-113 46.5t-47 111.5t47 111.5t113 46.5zM256 62q53 0 90.5 37.5t37.5 90.5t-37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5z' fill='%2398a7b8'/%3E%3C/svg%3E"); @gux-icon-radio-unchecked-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='92 33 324 320'%3E%3Cpath d='M256 350q66 0 113 -46.5t47 -111.5t-47 -111.5t-113 -46.5t-113 46.5t-47 111.5t47 111.5t113 46.5zM256 62q53 0 90.5 37.5t37.5 90.5t-37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5z' fill='%232a60c8'/%3E%3C/svg%3E"); @@ -32,8 +34,8 @@ gux-input-radio-beta { position: absolute; left: 4px; top: 4px; - width: @gux-icon-size-default; - height: @gux-icon-size-default; + width: @gux-icon-size-default-global; + height: @gux-icon-size-default-global; } input:not(:checked) ~ label::after { @@ -57,7 +59,7 @@ gux-input-radio-beta { } .gux-input-radio-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; input:checked ~ label::after { background-image: @gux-icon-radio-checked-dark; @@ -80,7 +82,7 @@ gux-input-radio-beta.gux-dark-theme { // Light .gux-input-radio-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/form/gux-form-field/components/gux-input-range-beta/gux-input-range-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-range-beta/gux-input-range-beta.less index bc4b8e0337..b7e6b7100a 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-range-beta/gux-input-range-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-range-beta/gux-input-range-beta.less @@ -1,7 +1,9 @@ +@import (reference) '../../../../../../style/color.less'; + // Variables part -@range-active: @gux-dark-blue; +@range-active: @gux-genesys-dark-blue; @range-inactive: #e0e0e0; -@range-active-dark: @gux-blue; +@range-active-dark: @gux-genesys-blue; @range-inactive-dark: @gux-off-white; @thumb-diameter: 12px; @track-width: 100%; @@ -231,7 +233,7 @@ gux-input-range-beta.gux-light-theme { .display { border: 1px solid @range-inactive-dark; background-color: @range-inactive-dark; - color: @gux-grey-2; + color: @gux-type; &.active { border-color: @range-active-dark; diff --git a/src/components/beta/form/gux-form-field/components/gux-input-text-like-beta/gux-input-text-like-beta.less b/src/components/beta/form/gux-form-field/components/gux-input-text-like-beta/gux-input-text-like-beta.less index 3e2ee17d6d..dc6b6cd625 100644 --- a/src/components/beta/form/gux-form-field/components/gux-input-text-like-beta/gux-input-text-like-beta.less +++ b/src/components/beta/form/gux-form-field/components/gux-input-text-like-beta/gux-input-text-like-beta.less @@ -1,20 +1,20 @@ +@import (reference) '../../../../../../style/color.less'; + // Variables part -@background-color: @gux-off-white; -@text-color: @gux-grey-2; -@border: @gux-border-alt; -@placeholder: @gux-pale-gray-2; +@background-color: @gux-type-dark; +@text-color: @gux-type; +@border: #dae1e8; +@placeholder: #9baaba; @icon-color: #B1BECC; -@dark-background-color: @gux-grey-2; -@dark-text-color: @gux-off-white; -@dark-border: @gux-grey-1; -@dark-placeholder: @gux-pale-gray-2; +@dark-background-color: @gux-type; +@dark-text-color: @gux-type-dark; +@dark-border: @gux-grey-global; +@dark-placeholder: #9baaba; @dark-icon-color: #B1BECC; -@focus-outline: fade(@gux-blue, 50%); -@focus-border: @gux-dark-blue; -@alert-color: @gux-alert; -@alert-color-dark: @gux-alert-2; +@focus-outline: fade(@gux-genesys-blue, 50%); +@focus-border: @gux-genesys-dark-blue; gux-input-text-like-beta { display: block; @@ -74,8 +74,8 @@ gux-input-text-like-beta { color: @dark-placeholder; } &:focus { - border: 1px solid @gux-blue; - outline: 3px @gux-blue; + border: 1px solid @gux-genesys-blue; + outline: 3px @gux-genesys-blue; box-shadow: none; } } diff --git a/src/components/beta/gux-breadcrumbs/gux-breadcrumbs.less b/src/components/beta/gux-breadcrumbs/gux-breadcrumbs.less index e47342c8d9..f077f93c72 100644 --- a/src/components/beta/gux-breadcrumbs/gux-breadcrumbs.less +++ b/src/components/beta/gux-breadcrumbs/gux-breadcrumbs.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + gux-breadcrumbs-beta { nav.breadcrumbs { display: block; @@ -15,7 +17,7 @@ gux-breadcrumbs-beta { // Light theme .gux-breadcrumbs-light-theme { .separator { - color: @gux-grey-2; + color: @gux-type; } } .gux-light-theme { diff --git a/src/components/beta/gux-command-palette/gux-command-palette.less b/src/components/beta/gux-command-palette/gux-command-palette.less index b68795987c..0387e2aea6 100644 --- a/src/components/beta/gux-command-palette/gux-command-palette.less +++ b/src/components/beta/gux-command-palette/gux-command-palette.less @@ -1,5 +1,7 @@ +@import (reference) '../../../style/color.less'; + // Variables part -@palette-background-color: @gux-off-white; +@palette-background-color: @gux-type-dark; @palette-background-color-dark: #555d66; @palette-border-color: #dae1eb; @palette-details-color: #77828f; @@ -117,18 +119,18 @@ gux-command-palette-beta .gux-command-palette { .gux-command-palette-dark-theme { .gux-command-palette { background: @palette-background-color-dark; - color: @gux-off-white; + color: @gux-type-dark; gux-list gux-list-item:focus, gux-list gux-list-item:active, gux-list gux-list-item:hover { .list-item div { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } .list-item .details { - color: @gux-off-white; + color: @gux-type-dark; } } @@ -152,18 +154,18 @@ gux-command-palette-beta.gux-dark-theme { .gux-command-palette-light-theme { .gux-command-palette { background: @palette-background-color; - color: @gux-grey-2; + color: @gux-type; gux-list gux-list-item:focus, gux-list gux-list-item:active, gux-list gux-list-item:hover { .list-item div { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } .list-item .details { - color: @gux-off-white; + color: @gux-type-dark; } } diff --git a/src/components/beta/gux-panel-frame/gux-panel-frame.less b/src/components/beta/gux-panel-frame/gux-panel-frame.less index de193088d8..3aa825345a 100644 --- a/src/components/beta/gux-panel-frame/gux-panel-frame.less +++ b/src/components/beta/gux-panel-frame/gux-panel-frame.less @@ -1,10 +1,12 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style gux-panel-frame-beta { .panel-container { border: 1px solid @gux-border; - background-color: @gux-off-white; + background-color: @gux-type-dark; display: flex; flex-direction: column; padding: 8px 15px; @@ -41,12 +43,12 @@ gux-panel-frame-beta { // Dark .gux-panel-frame-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; > div, .gux-panel-header, .gux-panel-footer { - border-color: @gux-grey-1; - background-color: @gux-charcoal; + border-color: @gux-grey-global; + background-color: @gux-charcoal-grey; } } @@ -62,7 +64,7 @@ gux-panel-frame-beta.gux-dark-theme { // Light .gux-panel-frame-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/gux-rating/gux-rating.less b/src/components/beta/gux-rating/gux-rating.less index 86cc38754a..637e7e5959 100644 --- a/src/components/beta/gux-rating/gux-rating.less +++ b/src/components/beta/gux-rating/gux-rating.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part gux-rating-beta { @@ -24,14 +26,14 @@ gux-rating-beta { .gux-rating-dark-theme { .gux-rating-item-shape-default { &:hover { - stroke: @gux-blue; + stroke: @gux-genesys-blue; } &.gux-rating-item-shape-fill-percent-50 { - stroke: @gux-blue; + stroke: @gux-genesys-blue; } &.gux-rating-item-shape-fill-percent-100 { - fill: @gux-blue; - stroke: @gux-blue; + fill: @gux-genesys-blue; + stroke: @gux-genesys-blue; } } @@ -41,7 +43,7 @@ gux-rating-beta { &:focus { svg { .gux-rating-item-shape-default { - stroke: @gux-blue; + stroke: @gux-genesys-blue; } } } @@ -54,7 +56,7 @@ gux-rating-beta { stop-color: transparent; } stop:first-child { - stop-color: @gux-blue; + stop-color: @gux-genesys-blue; } } } @@ -73,13 +75,13 @@ gux-rating-beta.gux-dark-theme { // Light .gux-rating-light-theme { .gux-rating-item-shape-default { - stroke: @gux-icons; + stroke: #98a7b8; &.gux-rating-item-shape-fill-percent-50 { - stroke: @gux-grey-2; + stroke: @gux-charcoal-grey; } &.gux-rating-item-shape-fill-percent-100 { - fill: @gux-grey-2; - stroke: @gux-grey-2; + fill: @gux-charcoal-grey; + stroke: @gux-charcoal-grey; } } @@ -89,7 +91,7 @@ gux-rating-beta.gux-dark-theme { &:focus { svg { .gux-rating-item-shape-default { - stroke: @gux-grey-2; + stroke: @gux-charcoal-grey; } } } @@ -102,7 +104,7 @@ gux-rating-beta.gux-dark-theme { stop-color: transparent; } stop:first-child { - stop-color: @gux-grey-2; + stop-color: @gux-type; } } } diff --git a/src/components/beta/gux-search/gux-search.less b/src/components/beta/gux-search/gux-search.less index e3d8a04b12..821f410449 100644 --- a/src/components/beta/gux-search/gux-search.less +++ b/src/components/beta/gux-search/gux-search.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part @icon-color: #b1becc; @@ -40,7 +42,7 @@ gux-search-beta { // Dark .gux-search-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { @@ -55,7 +57,7 @@ gux-search-beta.gux-dark-theme { // Light .gux-search-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/gux-side-panel/buttons/gux-side-panel-button.less b/src/components/beta/gux-side-panel/buttons/gux-side-panel-button.less index dfbc1caca7..64de6a64bf 100644 --- a/src/components/beta/gux-side-panel/buttons/gux-side-panel-button.less +++ b/src/components/beta/gux-side-panel/buttons/gux-side-panel-button.less @@ -1,3 +1,4 @@ +@import (reference) '../../../../style/color.less'; gux-side-panel-button { @@ -6,22 +7,22 @@ gux-side-panel-button { height: 48px; border: none; border-bottom: 1px solid @gux-border; - color: @gux-grey-2; + color: @gux-type; cursor: pointer; - background-color: @gux-off-white; + background-color: @gux-type-dark; &.selected { - background-color: @gux-dark-blue; - color: @gux-off-white; + background-color: @gux-genesys-dark-blue; + color: @gux-type-dark; } &:hover, &:active, &:focus { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; &.selected { - color: @gux-off-white; + color: @gux-type-dark; } } @@ -40,21 +41,21 @@ gux-side-panel-button { // Dark .gux-side-panel-button-dark-theme { button { - color: @gux-off-white; - background-color: @gux-charcoal; - border-color: @gux-grey-1; + color: @gux-type-dark; + background-color: @gux-charcoal-grey; + border-color: @gux-grey-global; &.selected { - background-color: @gux-dark-blue; + background-color: @gux-genesys-dark-blue; } &:hover, &:active, &:focus { - color: @gux-blue; + color: @gux-genesys-blue; &.selected { - color: @gux-off-white; + color: @gux-type-dark; } } } @@ -72,7 +73,7 @@ gux-side-panel-button.gux-dark-theme { // Light .gux-side-panel-button-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .gux-light-theme { diff --git a/src/components/beta/gux-side-panel/gux-side-panel.less b/src/components/beta/gux-side-panel/gux-side-panel.less index 5d9f2a5599..f0ad9922c8 100644 --- a/src/components/beta/gux-side-panel/gux-side-panel.less +++ b/src/components/beta/gux-side-panel/gux-side-panel.less @@ -1,11 +1,13 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style gux-side-panel-beta { aside { height: 100%; - background-color: @gux-off-white; - color: @gux-grey-2; + background-color: @gux-type-dark; + color: @gux-type; display: flex; flex-direction: row-reverse; position: relative; @@ -54,13 +56,13 @@ gux-side-panel-beta { // Dark .gux-side-panel-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; aside { - background-color: @gux-charcoal; + background-color: @gux-charcoal-grey; .panel-icons { - border-color: @gux-grey-1; + border-color: @gux-grey-global; } } } @@ -77,7 +79,7 @@ gux-side-panel-beta.gux-dark-theme { // Light .gux-side-panel-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/beta/gux-switch/gux-switch.less b/src/components/beta/gux-switch/gux-switch.less index 44c38dda86..14750d8a5b 100644 --- a/src/components/beta/gux-switch/gux-switch.less +++ b/src/components/beta/gux-switch/gux-switch.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style @@ -23,9 +25,9 @@ &:hover, &:active, &:focus { cursor: pointer; - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } - + &:focus { outline: none; } @@ -46,7 +48,7 @@ &.selected { .display-text { - box-shadow: inset 0px -1px 0px 0px @gux-grey-2; + box-shadow: inset 0px -1px 0px 0px @gux-charcoal-grey; font-weight: bold; } } @@ -64,13 +66,13 @@ &.selected { .display-text { - box-shadow: inset 0px -4px 0px 0px @gux-blue; + box-shadow: inset 0px -4px 0px 0px @gux-genesys-blue; } } } &:hover, &:active { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } &.disabled { @@ -86,31 +88,31 @@ .gux-switch-dark-theme { .gux-switch { - box-shadow: inset 0px -1px 0px 0px @gux-grey-1; + box-shadow: inset 0px -1px 0px 0px @gux-grey-global; .switch-button { .display-text { - color: @gux-off-white; + color: @gux-type-dark; } &:hover, &:active { cursor: pointer; .display-text { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } } } &.selected { .display-text { - box-shadow: inset 0px -1px 0px 0px @gux-blue; + box-shadow: inset 0px -1px 0px 0px @gux-genesys-blue; font-weight: bold; } &.large { .display-text { - box-shadow: inset 0px -4px 0px 0px @gux-blue; + box-shadow: inset 0px -4px 0px 0px @gux-genesys-blue; } } } @@ -130,7 +132,7 @@ // Light .gux-switch-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .gux-light-theme { diff --git a/src/components/beta/gux-table/example.html b/src/components/beta/gux-table/example.html index 48731a7434..f0b8cf1ad8 100644 --- a/src/components/beta/gux-table/example.html +++ b/src/components/beta/gux-table/example.html @@ -1,11 +1,11 @@

Data table

- + - + - + @@ -36,10 +36,10 @@

Data table

First nameFirst name Last nameAgeAge Action
- +

Data table compact

- + @@ -76,10 +76,10 @@

Data table compact

- +

Object table

- + @@ -116,10 +116,10 @@

Object table

- +

Empty table

- + @@ -130,10 +130,10 @@

Empty table
- +

Data table with scroll

- + @@ -244,4 +244,164 @@

Data table with scroll

- \ No newline at end of file + + +

Data table with reordered columns

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast nameAgeAction
JohnDoe25Delete
JaneDoe23Delete
JaneDoe21Delete
JaneDoe23Delete
+ + +

Data table with sortable columns

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast nameAgeAction
JohnDoe25Delete
JaneDoe23Delete
JaneDoe21Delete
JaneDoe23Delete
+ + +

Data table with resizable columns

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast nameAgeAction
JohnDoe25Delete
JaneDoe23Delete
JaneDoe21Delete
JaneDoe23Delete
+ + +

Object table with rows selection

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast nameAgeAction
JohnDoe25Delete
JaneDoe23Delete
JaneDoe21Delete
JaneDoe23Delete
+ diff --git a/src/components/beta/gux-table/gux-table-constants.ts b/src/components/beta/gux-table/gux-table-constants.ts new file mode 100644 index 0000000000..f64844bd51 --- /dev/null +++ b/src/components/beta/gux-table/gux-table-constants.ts @@ -0,0 +1,5 @@ +export interface IColumnResizeState { + resizableColumn: HTMLElement; + resizableColumnInitialWidth: number; + columnResizeMouseStartX: number; +} diff --git a/src/components/beta/gux-table/gux-table.less b/src/components/beta/gux-table/gux-table.less index 21927fd90b..8d586cb899 100644 --- a/src/components/beta/gux-table/gux-table.less +++ b/src/components/beta/gux-table/gux-table.less @@ -1,13 +1,19 @@ +@import (reference) '../../../style/color.less'; + // Variables part -@gux-scroll-btn-border: #d5dce0; -@gux-scroll-btn-disabled-text:#c3cad4; -@gux-scroll-btn-shadow-left: 1px -1px 1px rgba(34, 37, 41, 0.08); -@gux-scroll-btn-shadow-right: -1px -1px 1px rgba(34, 37, 41, 0.08); -@gux-table-row-hover: rgba(117, 168, 255, .24); +@gux-table-scroll-btn-border: #d5dce0; +@gux-table-scroll-btn-disabled-text:#c3cad4; +@gux-table-scroll-btn-shadow-left: 1px -1px 1px rgba(34, 37, 41, 0.08); +@gux-table-scroll-btn-shadow-right: -1px -1px 1px rgba(34, 37, 41, 0.08); @gux-table-scroll-divider: rgba(34, 37, 41, 0.1); @gux-table-scroll-thumb: #B5B6B7; +@gux-table-scroll-thumb-hover: #555d66; +@gux-table-row-hover-selection: fade(@gux-genesys-blue, 24%); +@gux-table-background-secondary: #f8f8f8; +@gux-table-column-sort-hover: #98a7b8; +@gux-table-empty-message: #9baab8; -gux-table-beta { +gux-table { display: block; .gux-table { @@ -16,11 +22,11 @@ gux-table-beta { table { border-spacing: 0px; - color: @gux-grey-2; + color: @gux-charcoal-grey; font-size: 12px; white-space: nowrap; width: 100%; - + th, td { border-color: @gux-border; border-style: solid; @@ -30,7 +36,7 @@ gux-table-beta { height: 40px; text-align: left; } - + th[data-cell-numeric], td[data-cell-numeric], th[data-cell-action], @@ -39,6 +45,13 @@ gux-table-beta { padding-left: 24px; text-align: right; } + + th[data-cell-row-selection], + td[data-cell-row-selection] { + padding-left: 12px; + padding-right: 8px; + width: 16px; + } th:last-child, td:last-child { border-right-width: 0px; @@ -49,8 +62,8 @@ gux-table-beta { .gux-table-scroll-right { align-items: center; background: @gux-border; - border: 1px solid @gux-scroll-btn-border; - color: @gux-grey-2; + border: 1px solid @gux-table-scroll-btn-border; + color: @gux-charcoal-grey; cursor: pointer; display: flex; height: 38px; @@ -61,8 +74,8 @@ gux-table-beta { z-index: 1; &.disabled { - background: @gux-off-white-bg-2; - color: @gux-scroll-btn-disabled-text; + background: @gux-table-background-secondary; + color: @gux-table-scroll-btn-disabled-text; } gux-icon { @@ -74,13 +87,13 @@ gux-table-beta { .gux-table-scroll-left { border-bottom-right-radius: 2px; border-top-right-radius: 2px; - box-shadow: @gux-scroll-btn-shadow-left; + box-shadow: @gux-table-scroll-btn-shadow-left; } .gux-table-scroll-right { border-bottom-left-radius: 2px; border-top-left-radius: 2px; - box-shadow: @gux-scroll-btn-shadow-right; + box-shadow: @gux-table-scroll-btn-shadow-right; right: 0; } @@ -88,7 +101,7 @@ gux-table-beta { max-height: 100%; overflow-x: hidden; overflow-y: auto; - scrollbar-color: @gux-table-scroll-thumb @gux-off-white; + scrollbar-color: @gux-table-scroll-thumb @gux-background; scrollbar-width: thin; width: 100%; @@ -97,7 +110,7 @@ gux-table-beta { } &::-webkit-scrollbar-track { - background: @gux-off-white; + background: @gux-background; } &::-webkit-scrollbar-thumb { @@ -105,7 +118,7 @@ gux-table-beta { } &::-webkit-scrollbar-thumb:hover { - background: @gux-border-dark; + background: @gux-table-scroll-thumb-hover; } &.compact { @@ -113,33 +126,112 @@ gux-table-beta { height: 24px; } } - + &.object-table { tbody { th, td { border-width: 0px; } - + tr:hover { - background: @gux-table-row-hover; + background: @gux-table-row-hover-selection; + } + + tr[data-selected-row] { + td { + background: @gux-table-row-hover-selection; + } } } } table { - th { - position: sticky; - top: 0; - background: @gux-off-white; + thead { + th { + position: sticky; + top: 0; + background: @gux-background; + + .gux-column-sort-arrow-down, + .gux-column-sort-arrow-up { + display: none; + position: absolute; + right: 6px; + top: 13px; + } + + .gux-column-sort-highlight { + background: @gux-blue; + bottom: 0; + display: none; + height: 4px; + left: 0px; + position: absolute; + width: 100%; + } + + .gux-column-resize { + cursor: col-resize; + height: 100%; + position: absolute; + right: -1px; + top: 0; + width: 3px; + z-index: 99; + } + } + + th:hover { + .gux-column-sort-arrow-down { + color: @gux-table-column-sort-hover; + display: block; + } + } + + th[data-cell-action], + th[data-cell-numeric] { + .gux-column-sort-arrow-down, + .gux-column-sort-arrow-up { + left: 6px; + } + } + + th[data-sort-direction] { + .gux-column-sort-highlight { + display: block; + } + } + + th[data-sort-direction="asc"] { + .gux-column-sort-arrow-down { + color: @gux-type; + display: block; + } + + .gux-column-sort-arrow-up { + display: none !important; + } + } + + th[data-sort-direction="desc"] { + .gux-column-sort-arrow-up { + color: @gux-type; + display: block; + } + + .gux-column-sort-arrow-down { + display: none !important; + } + } } tbody { tr { - background: @gux-off-white-bg-2; + background: @gux-table-background-secondary; } - + tr:nth-child(2n) { - background: @gux-off-white; + background: @gux-background; } } } @@ -165,12 +257,23 @@ gux-table-beta { } } } + + &.column-resizing-hover, + &.column-resizing { + cursor: col-resize; + + .gux-column-sort-arrow-down, + .gux-column-sort-arrow-up, + .gux-column-sort-highlight { + display: none !important; + } + } } .empty-table { align-items: center; - background: @gux-off-white; - color: @gux-grey-bg-3; + background: @gux-background; + color: @gux-table-empty-message; display: flex; height: 150px; justify-content: center; diff --git a/src/components/beta/gux-table/gux-table.tsx b/src/components/beta/gux-table/gux-table.tsx index a90f747061..25170a8eea 100644 --- a/src/components/beta/gux-table/gux-table.tsx +++ b/src/components/beta/gux-table/gux-table.tsx @@ -1,6 +1,8 @@ import { Component, Element, + Event, + EventEmitter, h, Listen, Prop, @@ -9,18 +11,19 @@ import { } from '@stencil/core'; import { buildI18nForComponent, GetI18nValue } from '../../../i18n'; import tableResources from './i18n/en.json'; +import { IColumnResizeState } from './gux-table-constants'; @Component({ styleUrl: 'gux-table.less', - tag: 'gux-table-beta' + tag: 'gux-table' }) export class GuxTable { @Element() root: HTMLElement; private resizeObserver: ResizeObserver; - private i18n: GetI18nValue; + private columnResizeState: IColumnResizeState | null; /** * Indicates that vertical scroll is presented for table @@ -64,6 +67,34 @@ export class GuxTable { @Prop() emptyMessage: string; + /** + * Indicates columns in order they should be displayed + */ + @Prop() + columnOrder: string; + + /** + * Indicates that table should have resizable columns + */ + @Prop() + resizableColumns: boolean; + + /** + * Indicates that additional column for rows selection should be displayed + */ + @Prop() + selectableRows: boolean = false; + + /** + * Triggers when the sorting of the table column is changed. + */ + @Event() sortChanged: EventEmitter; + + /** + * Triggers when table row was selected/unselected + */ + @Event() selectionChanged: EventEmitter; + @Listen('scroll', { capture: true }) onScroll(): void { const scrollLeft = this.tableContainer.querySelector('.gux-table-container') @@ -74,11 +105,41 @@ export class GuxTable { if (scrollLeft === 0) { this.isScrolledToFirstCell = true; - } else if (maxScrollLeft - scrollLeft - this.tableScrollbarConstant === 0) { + } else if (maxScrollLeft - scrollLeft - this.tableScrollbarConstant <= 5) { this.isScrolledToLastCell = true; } } + @Listen('mouseup', { capture: true }) + onMouseUp(): void { + if (this.columnResizeState) { + this.tableContainer.classList.remove('column-resizing'); + + /** + * We need to use setTimeout here to prevent firing 'click' event logic, which + * change sort direction. It happens when user resize column and release + * mouse button outside of gux-column-resize div element + */ + setTimeout(() => { + this.columnResizeState = null; + }); + } + } + + @Listen('mousemove', { capture: true }) + onMouseMove(event: MouseEvent): void { + if (this.columnResizeState) { + this.columnResizeState.resizableColumn.style.minWidth = + this.columnResizeState.resizableColumnInitialWidth + + (event.pageX - this.columnResizeState.columnResizeMouseStartX) + + 'px'; + this.columnResizeState.resizableColumn.style.width = + this.columnResizeState.resizableColumnInitialWidth + + (event.pageX - this.columnResizeState.columnResizeMouseStartX) + + 'px'; + } + } + private get tableContainer(): HTMLElement { return this.root.children[0] as HTMLElement; } @@ -197,6 +258,146 @@ export class GuxTable { ).scrollLeft = Math.ceil(columnsWidth - containerWidth); } + private setRowsCellsNames(): void { + const columnsElements = Array.from( + this.tableContainer.querySelectorAll('thead th') + ); + const rowsElements = Array.from( + this.tableContainer.querySelectorAll('tbody tr') + ); + + rowsElements.map(row => { + Array.from(row.querySelectorAll('td')).forEach( + (cell: HTMLElement, cellIndex: number) => { + cell.setAttribute( + 'data-column-name', + columnsElements[cellIndex].getAttribute('data-column-name') + ); + } + ); + }); + } + + private prepareResizableColumns(): void { + const columnsElements = Array.from( + this.tableContainer.querySelectorAll('thead th') + ).slice(0, -1); + + const resizeElement = document.createElement('div'); + resizeElement.setAttribute('class', 'gux-column-resize'); + + columnsElements.forEach((column: HTMLElement) => { + const columnResizeElement = resizeElement.cloneNode(true); + + columnResizeElement.addEventListener('mouseover', () => { + this.tableContainer.classList.add('column-resizing-hover'); + }); + columnResizeElement.addEventListener('mouseleave', () => { + this.tableContainer.classList.remove('column-resizing-hover'); + }); + + columnResizeElement.addEventListener('mousedown', (event: MouseEvent) => { + const currentElement = event.target as HTMLElement; + const resizableColumn = currentElement.parentNode as HTMLElement; + + this.columnResizeState = { + resizableColumn, + columnResizeMouseStartX: event.pageX, + resizableColumnInitialWidth: resizableColumn.clientWidth - 12 - 24 + }; + + this.tableContainer.classList.add('column-resizing'); + }); + + column.appendChild(columnResizeElement); + }); + } + + private prepareSortableColumns(): void { + const columnsElements = Array.from( + this.tableContainer.querySelectorAll('thead th') + ); + const downArrow = document.createElement('gux-icon'); + const upArrow = document.createElement('gux-icon'); + const sortingHiglight = document.createElement('div'); + + downArrow.setAttribute('icon-name', 'ic-arrow-solid-down'); + downArrow.setAttribute('class', 'gux-column-sort-arrow-down'); + downArrow.setAttribute('decorative', ''); + upArrow.setAttribute('icon-name', 'ic-arrow-solid-up'); + upArrow.setAttribute('class', 'gux-column-sort-arrow-up'); + upArrow.setAttribute('decorative', ''); + sortingHiglight.setAttribute('class', 'gux-column-sort-highlight'); + + columnsElements.forEach((column: HTMLElement) => { + if (column.dataset.hasOwnProperty('sortable')) { + column.appendChild(downArrow.cloneNode(true)); + column.appendChild(upArrow.cloneNode(true)); + column.appendChild(sortingHiglight.cloneNode(true)); + column.onclick = (event: MouseEvent) => { + if (!this.columnResizeState) { + const columnElement = event.target as HTMLElement; + const sortDirection = columnElement.dataset.sortDirection || ''; + + switch (sortDirection) { + case '': + columnElement.setAttribute('data-sort-direction', 'asc'); + break; + case 'asc': + columnElement.setAttribute('data-sort-direction', 'desc'); + break; + case 'desc': + columnElement.removeAttribute('data-sort-direction'); + break; + } + + this.sortChanged.emit({ + columnName: columnElement.dataset.columnName, + sortDirection: columnElement.dataset.sortDirection || null + }); + } + }; + } + }); + } + + private reorderColumns(): void { + const columnOrder = this.columnOrder.split(' '); + const tableHead = this.tableContainer.querySelector('thead tr'); + const tableBody = this.tableContainer.querySelectorAll('tbody tr'); + const reorderedColumns = []; + + columnOrder.forEach((columnName: string) => { + reorderedColumns.push( + Array.from(tableHead.children).find(el => { + return el.getAttribute('data-column-name') === columnName; + }) + ); + }); + + tableHead.innerHTML = ''; + reorderedColumns.forEach((column: HTMLElement) => { + tableHead.appendChild(column); + }); + + tableBody.forEach((row: HTMLElement) => { + const reorderedRowCells = []; + + columnOrder.forEach((columnName: string) => { + reorderedRowCells.push( + Array.from(row.children).find((cell: HTMLElement) => { + return cell.getAttribute('data-column-name') === columnName; + }) + ); + }); + + row.innerHTML = ''; + reorderedRowCells.forEach((cell: HTMLElement) => { + row.appendChild(cell); + }); + }); + } + private checkHorizontalScroll(): void { const tableWidth = this.tableContainer .querySelector('.gux-table-container table') @@ -218,36 +419,164 @@ export class GuxTable { tableContainerElement.scrollHeight > tableContainerElement.clientHeight; } + private handleRowSelection(event: CustomEvent): void { + const checkboxElement = event.target as HTMLElement; + const currentRow = checkboxElement.parentElement + .parentElement as HTMLTableRowElement; + + if (event.detail) { + currentRow.setAttribute('data-selected-row', ''); + + this.selectionChanged.emit({ + rowsIndices: [currentRow.rowIndex - 1], + actionType: 'selected' + }); + } else { + currentRow.removeAttribute('data-selected-row'); + + this.selectionChanged.emit({ + rowsIndices: [currentRow.rowIndex - 1], + actionType: 'unselected' + }); + } + + const rowsSelectionCheckboxes = Array.from( + this.tableContainer.querySelectorAll('tbody gux-checkbox') + ); + const isAllCheckboxesSelected = rowsSelectionCheckboxes.every( + (checkbox: HTMLGuxCheckboxElement) => { + return checkbox.checked; + } + ); + const isSomeCheckboxUnselected = rowsSelectionCheckboxes.some( + (checkbox: HTMLGuxCheckboxElement) => { + return !checkbox.checked; + } + ); + + const allRowsSelectionCheckbox = this.tableContainer.querySelector( + 'thead gux-checkbox' + ) as HTMLGuxCheckboxElement; + if (isAllCheckboxesSelected) { + allRowsSelectionCheckbox.checked = true; + } else if (allRowsSelectionCheckbox.checked && isSomeCheckboxUnselected) { + allRowsSelectionCheckbox.checked = false; + } + } + + private handleAllRowsSelection(event: CustomEvent): void { + const rowSelectionCells = Array.from( + this.tableContainer.querySelectorAll('td[data-cell-row-selection]') + ); + const tableRows = Array.from( + this.tableContainer.querySelectorAll('tbody tr') + ); + + if (event.detail) { + rowSelectionCells.forEach((cell: HTMLElement) => { + cell.children[0].setAttribute('checked', ''); + }); + tableRows.forEach((row: HTMLElement) => { + row.setAttribute('data-selected-row', ''); + }); + + this.selectionChanged.emit({ + rowsIndices: [...Array(rowSelectionCells.length).keys()], + actionType: 'selected' + }); + } else { + rowSelectionCells.forEach((cell: HTMLElement) => { + cell.children[0].removeAttribute('checked'); + }); + tableRows.forEach((row: HTMLElement) => { + row.removeAttribute('data-selected-row'); + }); + + this.selectionChanged.emit({ + rowsIndices: [...Array(rowSelectionCells.length).keys()], + actionType: 'unselected' + }); + } + } + + private prepareSelectableRows(): void { + const tableHead = this.tableContainer.querySelector('thead tr'); + const tableBody = this.tableContainer.querySelectorAll('tbody tr'); + const rowsSelectionCheckbox = document.createElement('gux-checkbox'); + const rowsSelectionColumn = document.createElement('th'); + + rowsSelectionColumn.setAttribute('data-cell-row-selection', ''); + rowsSelectionColumn.appendChild(rowsSelectionCheckbox); + tableHead.prepend(rowsSelectionColumn); + + rowsSelectionCheckbox.addEventListener( + 'check', + this.handleAllRowsSelection.bind(this) + ); + + tableBody.forEach((row: HTMLElement) => { + const rowSelectionCell = document.createElement('td'); + const rowSelectionCheckbox = document.createElement('gux-checkbox'); + rowSelectionCell.setAttribute('data-cell-row-selection', ''); + rowSelectionCell.appendChild(rowSelectionCheckbox); + row.prepend(rowSelectionCell); + + rowSelectionCheckbox.addEventListener( + 'check', + this.handleRowSelection.bind(this) + ); + }); + } + async componentWillLoad(): Promise { this.i18n = await buildI18nForComponent(this.root, tableResources); - if (!this.emptyMessage) { this.emptyMessage = this.i18n('emptyMessage'); } + this.setRowsCellsNames(); + + if (this.columnOrder) { + this.reorderColumns(); + } + + if (this.selectableRows && this.objectTable) { + this.prepareSelectableRows(); + } + + this.prepareSortableColumns(); + + if (this.resizableColumns) { + this.prepareResizableColumns(); + } + setTimeout(() => { this.checkHorizontalScroll(); this.checkVerticalScroll(); if (!this.resizeObserver && window.ResizeObserver) { this.resizeObserver = new ResizeObserver(() => { - readTask(() => { + readTask((): void => { this.checkHorizontalScroll(); this.checkVerticalScroll(); }); }); } - this.resizeObserver.observe( - this.tableContainer.querySelector('.gux-table-container table') - ); + if (this.resizeObserver) { + this.resizeObserver.observe( + this.tableContainer.querySelector('.gux-table-container table') + ); + } }); } disconnectedCallback(): void { - this.resizeObserver.unobserve( - this.tableContainer.querySelector('.gux-table-container table') - ); + if (this.resizeObserver) { + this.resizeObserver.unobserve( + this.tableContainer.querySelector('.gux-table-container table') + ); + } } render() { diff --git a/src/components/beta/gux-table/readme.md b/src/components/beta/gux-table/readme.md index 9e1f847e74..4a636dda10 100644 --- a/src/components/beta/gux-table/readme.md +++ b/src/components/beta/gux-table/readme.md @@ -7,11 +7,22 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ---------------------------------------------------------------- | --------- | ----------- | -| `compact` | `compact` | Indicates table row density style | `boolean` | `false` | -| `emptyMessage` | `empty-message` | Represents info message that should be displayed for empty table | `string` | `undefined` | -| `objectTable` | `object-table` | Indicates that object table specific styles should be applied | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | --------- | ----------- | +| `columnOrder` | `column-order` | Indicates columns in order they should be displayed | `string` | `undefined` | +| `compact` | `compact` | Indicates table row density style | `boolean` | `false` | +| `emptyMessage` | `empty-message` | Represents info message that should be displayed for empty table | `string` | `undefined` | +| `objectTable` | `object-table` | Indicates that object table specific styles should be applied | `boolean` | `false` | +| `resizableColumns` | `resizable-columns` | Indicates that table should have resizable columns | `boolean` | `undefined` | +| `selectableRows` | `selectable-rows` | Indicates that additional column for rows selection should be displayed | `boolean` | `false` | + + +## Events + +| Event | Description | Type | +| ------------------ | --------------------------------------------------------- | ------------------ | +| `selectionChanged` | Triggers when table row was selected/unselected | `CustomEvent` | +| `sortChanged` | Triggers when the sorting of the table column is changed. | `CustomEvent` | ## Dependencies @@ -19,12 +30,14 @@ ### Depends on - [gux-icon](../../stable/gux-icon) +- [gux-checkbox](../../stable/gux-checkbox) ### Graph ```mermaid graph TD; - gux-table-beta --> gux-icon - style gux-table-beta fill:#f9f,stroke:#333,stroke-width:4px + gux-table --> gux-icon + gux-table --> gux-checkbox + style gux-table fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- diff --git a/src/components/beta/gux-table/tests/gux-table.e2e.ts b/src/components/beta/gux-table/tests/gux-table.e2e.ts index a625d664f1..7e12252cb1 100644 --- a/src/components/beta/gux-table/tests/gux-table.e2e.ts +++ b/src/components/beta/gux-table/tests/gux-table.e2e.ts @@ -10,7 +10,7 @@ describe('gux-table', () => { it('renders', async () => { await page.setContent(` - + @@ -25,9 +25,99 @@ describe('gux-table', () => {
- + `); - element = await page.find('gux-table-beta'); + element = await page.find('gux-table'); expect(element).toHaveClass('hydrated'); }); + + it('should show horizontal scroll buttons', async () => { + await page.setContent(` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast nameE-mailBiographyDate of birthOfficePositionDepartmentSalaryAgeAction
JohnDoetest@testmail.testLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor05/10/1980San FranciscoDeveloperJavascript150025Delete
+ + `); + const leftScrollButton = await page.find('.gux-table-scroll-left'); + const rightScrollButton = await page.find('.gux-table-scroll-right'); + expect(leftScrollButton).toBeTruthy(); + expect(rightScrollButton).toBeTruthy(); + }); + + it('should have sortable column', async () => { + await page.setContent(` + + + + + + + + + + + + + + +
First nameLast name
JohnDoe
+ + `); + const sortableColumn = await page.find('th[data-column-name="first-name"]'); + await sortableColumn.click(); + expect(sortableColumn.getAttribute('data-sort-direction')).toEqual('asc'); + await sortableColumn.click(); + expect(sortableColumn.getAttribute('data-sort-direction')).toEqual('desc'); + await sortableColumn.click(); + expect(sortableColumn.getAttribute('data-sort-direction')).toEqual(null); + }); + + it('should have empty table block', async () => { + await page.setContent(` + + + + + + + + + + +
First nameLast nameAgeAction
+ + `); + const emptyTableBlock = await page.find('.empty-table'); + expect(emptyTableBlock).toBeTruthy(); + }); }); diff --git a/src/components/beta/gux-table/tests/gux-table.spec.ts b/src/components/beta/gux-table/tests/gux-table.spec.ts index ab3627b28e..64791a39c3 100644 --- a/src/components/beta/gux-table/tests/gux-table.spec.ts +++ b/src/components/beta/gux-table/tests/gux-table.spec.ts @@ -8,7 +8,7 @@ describe('gux-table', () => { const page = await newSpecPage({ components: [GuxTable], html: ` - + diff --git a/src/components/beta/gux-tabs/gux-tab-dropdown-option/gux-tab-dropdown-option.less b/src/components/beta/gux-tabs/gux-tab-dropdown-option/gux-tab-dropdown-option.less index 04bc63a5d1..df58e45422 100644 --- a/src/components/beta/gux-tabs/gux-tab-dropdown-option/gux-tab-dropdown-option.less +++ b/src/components/beta/gux-tabs/gux-tab-dropdown-option/gux-tab-dropdown-option.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../style/color.less'; + // Variables part // Style @@ -31,12 +33,12 @@ gux-tab-dropdown-option { // Light .gux-tab-dropdown-option-light-theme { .tab-dropdown-option { - color: @gux-grey-2; + color: @gux-type; &:hover, &:focus { - background-color: @gux-dark-blue; - color: @gux-off-white; + background-color: @gux-genesys-dark-blue; + color: @gux-type-dark; } } } @@ -69,4 +71,4 @@ gux-tab-dropdown-option.gux-dark-theme { // Default gux-tab-dropdown-option { .gux-tab-dropdown-option-light-theme(); -} \ No newline at end of file +} diff --git a/src/components/beta/gux-tabs/gux-tab/gux-tab.less b/src/components/beta/gux-tabs/gux-tab/gux-tab.less index eb98eec4fb..8c9846480e 100644 --- a/src/components/beta/gux-tabs/gux-tab/gux-tab.less +++ b/src/components/beta/gux-tabs/gux-tab/gux-tab.less @@ -1,4 +1,6 @@ - @gux-off-tab-fill: #cfd1d1; +@import (reference) '../../../../style/color.less'; + +@gux-off-tab-fill: #cfd1d1; // Style .popover-content { @@ -91,7 +93,7 @@ background-color: @gux-off-tab-fill; .tab-title { - color: @gux-grey-2; + color: @gux-type; &:after { background: linear-gradient( @@ -103,29 +105,29 @@ } .tab-dropdown-container { - color: @gux-grey-2; + color: @gux-type; &:hover, &:focus { gux-icon { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } } } .tab-icon-container { - color: @gux-grey-2; + color: @gux-type; } &.selected { - background-color: @gux-off-white; + background-color: @gux-type-dark; &:active { - background-color: @gux-off-white; + background-color: @gux-type-dark; } .tab-title { - color: @gux-grey-2; + color: @gux-type; &:after { background: linear-gradient( @@ -137,11 +139,11 @@ } .tab-dropdown-container { - color: @gux-off-white-bg-3; + color: #98a7b8; } .tab-icon-container { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } } } diff --git a/src/components/beta/gux-tabs/gux-tabs.less b/src/components/beta/gux-tabs/gux-tabs.less index a12b002d51..da5b397565 100644 --- a/src/components/beta/gux-tabs/gux-tabs.less +++ b/src/components/beta/gux-tabs/gux-tabs.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part @gux-tabs-background: #e6e8e8; @gux-off-tab-fill: #cfd1d1; @@ -97,11 +99,11 @@ gux-tabs-beta { .arrow-button { background-color: @gux-tabs-background; - color: @gux-grey-2; + color: @gux-type; border-color: @gux-off-tab-fill; &:hover { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } &:active { @@ -111,11 +113,11 @@ gux-tabs-beta { .add-tab { background-color: @gux-tabs-background; - color: @gux-grey-2; + color: @gux-type; border-color: @gux-off-tab-fill; &:hover { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } &:active { @@ -126,23 +128,23 @@ gux-tabs-beta { .scrollable-section { &::-webkit-scrollbar-track { - background: @gux-off-white; + background: @gux-background; } &::-webkit-scrollbar-thumb { - background: @gux-pale-gray; + background: #77828f; } &::-webkit-scrollbar-thumb:hover { - background: @gux-grey-2; + background: @gux-charcoal-grey; } .add-tab { background-color: @gux-off-tab-fill; - color: @gux-grey-2; + color: @gux-type; &:hover { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } &:active { @@ -180,4 +182,4 @@ gux-tabs-beta.gux-dark-theme { // Default gux-tabs-beta { .gux-tabs-light-theme(); -} \ No newline at end of file +} diff --git a/src/components/beta/gux-tooltip/gux-tooltip.less b/src/components/beta/gux-tooltip/gux-tooltip.less index 8909c4d532..3812f6597e 100644 --- a/src/components/beta/gux-tooltip/gux-tooltip.less +++ b/src/components/beta/gux-tooltip/gux-tooltip.less @@ -1,11 +1,13 @@ +@import (reference) '../../../style/color.less'; + // Variables part gux-tooltip-beta { div.gux-tooltip { position: absolute; white-space: nowrap; - background-color: @gux-off-white-bg; - color: @gux-grey-2; + background-color: @gux-background; + color: @gux-type; height: 32px; line-height: 32px; font-size: 12px; @@ -32,8 +34,8 @@ gux-tooltip-beta { // Light .gux-tooltip-light-theme { div.gux-tooltip { - border: 1px solid @gux-border-alt; - box-shadow: 0 0 2px 0 fade(@gux-grey-1, 24); + border: 1px solid #dae1e8; + box-shadow: 0 0 2px 0 fade(@gux-grey-global, 24); } } .gux-light-theme { @@ -47,8 +49,8 @@ gux-tooltip-beta.gux-light-theme { // Dark .gux-tooltip-dark-theme { div.gux-tooltip { - border: 1px solid @gux-border-dark; - box-shadow: 0 0 2px 0 fade(@gux-grey-1, 100); + border: 1px solid #555d66; + box-shadow: 0 0 2px 0 fade(@gux-grey-global, 100); } } .gux-dark-theme { diff --git a/src/components/stable/gux-accordion/gux-accordion.less b/src/components/stable/gux-accordion/gux-accordion.less index fd84f8c846..70d10a10f5 100644 --- a/src/components/stable/gux-accordion/gux-accordion.less +++ b/src/components/stable/gux-accordion/gux-accordion.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part gux-accordion { @@ -59,14 +61,14 @@ gux-accordion { // Light .gux-accordion-light-theme { .gux-accordion { - background-color: @gux-off-white-bg; + background-color: @gux-background; .section { - color: @gux-grey-type; + coclor: @gux-charcoal-grey; .header { border-top: 1px solid @gux-border; &:hover { .toggle-arrow { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } } } @@ -97,31 +99,31 @@ gux-accordion.gux-light-theme { // Dark .gux-accordion-dark-theme { ul.gux-accordion { - background-color: @gux-panel; + background-color: @gux-background-dark; .section { - color: @gux-off-white-type; + color: @gux-type-dark; .header { - border-top: 1px solid @gux-grey-1; + border-top: 1px solid @gux-grey-global; .toggle-arrow { - color: @gux-off-white-type; + color: @gux-type-dark; } &:hover { .toggle-arrow { - color: @gux-blue; + color: @gux-genesys-blue; } } } &.opened { .header { - border-bottom: 1px solid @gux-grey-1; + border-bottom: 1px solid @gux-grey-global; } } &:last-of-type { .header { - border-bottom: 1px solid @gux-grey-1; + border-bottom: 1px solid @gux-grey-global; } .content { - border-bottom: 1px solid @gux-grey-1; + border-bottom: 1px solid @gux-grey-global; } } } diff --git a/src/components/stable/gux-action-button/gux-action-button.less b/src/components/stable/gux-action-button/gux-action-button.less index 8ecb348b1a..c86dae1846 100644 --- a/src/components/stable/gux-action-button/gux-action-button.less +++ b/src/components/stable/gux-action-button/gux-action-button.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part gux-action-button { @@ -11,7 +13,7 @@ gux-action-button { padding: 0; span[role='img'] { - font-size: @gux-icon-size-default; + font-size: @gux-icon-size-default-global; line-height: 30px; height: 30px; } @@ -53,7 +55,7 @@ gux-action-button { // Dark .gux-action-button-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { diff --git a/src/components/stable/gux-action-toast/gux-action-toast.less b/src/components/stable/gux-action-toast/gux-action-toast.less index a24c6140f3..6619d38dda 100644 --- a/src/components/stable/gux-action-toast/gux-action-toast.less +++ b/src/components/stable/gux-action-toast/gux-action-toast.less @@ -1,24 +1,28 @@ @import (reference) '../../../style/typography.less'; +@import (reference) '../../../style/color.less'; // Variables part -@primary-background-color: @gux-dark-blue; +// - Colors +@action-reqired-icon-color: @gux-aqua-green; + +@primary-background-color: @gux-genesys-dark-blue; @primary-border-color: #2455a3; -@primary-color: @gux-off-white; +@primary-color: @gux-type-dark; @primary-active-background-color: #275aad; -@primary-dark-background-color: @gux-dark-blue; -@primary-dark-border-color: @gux-grey-1; -@primary-dark-color: @gux-off-white; +@primary-dark-background-color: @gux-genesys-dark-blue; +@primary-dark-border-color: @gux-grey-global; +@primary-dark-color: @gux-type-dark; @primary-dark-hover-background-color: #3476f5; @secondary-background-color: @gux-border; @secondary-border-color: #d5dce0; -@secondary-color: @gux-grey-2; +@secondary-color: @gux-type; @secondary-active-background-color: #dce1e5; @secondary-dark-background-color: #555d66; -@secondary-dark-border-color: @gux-grey-1; -@secondary-dark-color: @gux-off-white; +@secondary-dark-border-color: @gux-grey-global; +@secondary-dark-color: @gux-type-dark; @secondary-dark-hover-background-color: #76818f; gux-action-toast { @@ -45,7 +49,7 @@ gux-action-toast { .h2(); .icon { - color: @gux-teal-sec; + color: @action-reqired-icon-color; order: 0; flex: 0 1 auto; align-self: auto; @@ -193,13 +197,13 @@ gux-action-toast { } .gux-action-toast-light-theme { - background: @gux-panel; - color: @gux-off-white; - border-color: @gux-grey-2; + background: @gux-background-dark; + color: @gux-type-dark; + border-color: @gux-type; .message { dt { - color: @gux-pale-gray-2; + color: #9baaba; } } @@ -288,13 +292,13 @@ gux-action-toast { } .gux-action-toast-dark-theme { - background: @gux-off-white; - color: @gux-grey-2; + background: @gux-background; + color: @gux-type; border-color: @gux-border; .message { dt { - color: @gux-pale-gray; + color: #77828f; } } diff --git a/src/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.less b/src/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.less index ae07f87e48..ba98f24815 100644 --- a/src/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.less +++ b/src/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.less @@ -1,22 +1,24 @@ +@import (reference) '../../../style/color.less'; + // Variables part @background-color: #f9fafb; @background-color-dark-theme: #555d66; -@text-color: @gux-grey-2; -@text-color-dark-theme: @gux-off-white; +@text-color: @gux-type; +@text-color-dark-theme: @gux-type-dark; -@placeholder: @gux-pale-gray-2; +@placeholder: #9baaba; -@border-color: @gux-border-alt; -@border-color-dark-theme: @gux-grey-1; +@border-color: #dae1e8; +@border-color-dark-theme: @gux-grey-global; -@focus-outline: fade(@gux-blue, 50%); -@focus-outline-dark-theme: @gux-blue; -@active-border: @gux-dark-blue; +@focus-outline: fade(@gux-genesys-blue, 50%); +@focus-outline-dark-theme: @gux-genesys-blue; +@active-border: @gux-genesys-dark-blue; @menu-shadow: rgba(34, 37, 41, 0.24); -@menu-background-color: @gux-off-white; +@menu-background-color: @gux-type-dark; @menu-border-color: #dae1eb; @divider-color: #c3cad4; @@ -59,7 +61,7 @@ gux-advanced-dropdown { &:focus { outline: none; - box-shadow: 0px 0px 0px 3px fade(@gux-blue, 50%); + box-shadow: 0px 0px 0px 3px fade(@gux-genesys-blue, 50%); } } @@ -95,7 +97,7 @@ gux-advanced-dropdown { position: absolute; width: 100%; z-index: 1; - background: @gux-off-white; + background: @gux-background; .gux-dropdown-menu-container { padding: 16px; @@ -147,14 +149,14 @@ gux-advanced-dropdown { &:not(.disabled) { &[selected] { - background: @gux-light-blue; + background: #deeaff; color: @text-color; } &:hover, &:focus { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } } } @@ -166,7 +168,7 @@ gux-advanced-dropdown { // Dark .gux-advanced-dropdown-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; div.gux-dropdown { .gux-select-field { @@ -204,7 +206,7 @@ gux-advanced-dropdown.gux-dark-theme { // Light .gux-advanced-dropdown-light-theme { - color: @gux-grey-2; + color: @gux-type; div.gux-dropdown { .gux-select-field { diff --git a/src/components/stable/gux-advanced-dropdown/i18n/ar.json b/src/components/stable/gux-advanced-dropdown/i18n/ar.json index d8c93150b8..ad9127d5cc 100644 --- a/src/components/stable/gux-advanced-dropdown/i18n/ar.json +++ b/src/components/stable/gux-advanced-dropdown/i18n/ar.json @@ -1,3 +1,3 @@ { - "searchAria": "Search" + "searchAria": "بحث" } diff --git a/src/components/stable/gux-button/gux-button.less b/src/components/stable/gux-button/gux-button.less index eb593feb98..f95dba3de8 100644 --- a/src/components/stable/gux-button/gux-button.less +++ b/src/components/stable/gux-button/gux-button.less @@ -1,22 +1,24 @@ +@import (reference) '../../../style/color.less'; + // Variables part -@primary-background-color: @gux-dark-blue; +@primary-background-color: @gux-genesys-dark-blue; @primary-border-color: #2455a3; -@primary-color: @gux-off-white; +@primary-color: @gux-type-dark; @primary-active-background-color: #275aad; -@primary-dark-background-color: @gux-dark-blue; -@primary-dark-border-color: @gux-grey-1; -@primary-dark-color: @gux-off-white; +@primary-dark-background-color: @gux-genesys-dark-blue; +@primary-dark-border-color: @gux-grey-global; +@primary-dark-color: @gux-type-dark; @primary-dark-hover-background-color: #3476f5; @secondary-background-color: @gux-border; @secondary-border-color: #d5dce0; -@secondary-color: @gux-grey-2; +@secondary-color: @gux-type; @secondary-active-background-color: #dce1e5; @secondary-dark-background-color: #555d66; -@secondary-dark-border-color: @gux-grey-1; -@secondary-dark-color: @gux-off-white; +@secondary-dark-border-color: @gux-grey-global; +@secondary-dark-color: @gux-type-dark; @secondary-dark-hover-background-color: #76818f; gux-button { diff --git a/src/components/stable/gux-calendar/gux-calendar.less b/src/components/stable/gux-calendar/gux-calendar.less index 4a0e26477d..411eee5278 100644 --- a/src/components/stable/gux-calendar/gux-calendar.less +++ b/src/components/stable/gux-calendar/gux-calendar.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style @@ -81,43 +83,43 @@ gux-calendar { // Light .gux-calendar-light-theme { div.gux-calendar { - border: 1px solid @gux-border-alt; + border: 1px solid #dae1e8; .header { - background-color: @gux-dark-blue; - color: @gux-off-white; + background-color: @gux-genesys-dark-blue; + color: @gux-type-dark; button { - color: @gux-off-white; + color: @gux-type-dark; &:focus { - outline: @gux-blue auto 5px; + outline: @gux-genesys-blue auto 5px; } } } .content { - background-color: @gux-off-white; - color: @gux-grey-2; + background-color: @gux-type-dark; + color: @gux-type; table { tr { td { &.hovered { - background-color: @gux-light-blue; + background-color: #deeaff; } &.selected { - background-color: @gux-dark-blue; - color: @gux-off-white; + background-color: @gux-genesys-dark-blue; + color: @gux-type-dark; } &:hover { - background-color: @gux-dark-blue; - color: @gux-off-white; + background-color: @gux-genesys-dark-blue; + color: @gux-type-dark; } &.disabled { opacity: 0.3; pointer-events: none; } &.not-in-month { - color: @gux-pale-gray-2; + color: #9baaba; &:hover { - background-color: @gux-border-alt; - color: @gux-grey-2; + background-color: #dae1e8; + color: @gux-type; } &.hidden { visibility: hidden; diff --git a/src/components/stable/gux-checkbox/gux-checkbox.less b/src/components/stable/gux-checkbox/gux-checkbox.less index 4eb63c12d8..7349dcb9fc 100644 --- a/src/components/stable/gux-checkbox/gux-checkbox.less +++ b/src/components/stable/gux-checkbox/gux-checkbox.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + @gux-icon-checkbox-unchecked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%2398a7b8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E"); @gux-icon-checkbox-unchecked-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E"); @gux-icon-checkbox-checked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M144 272l96 -64l224 224l32 -32l-256 -320l-128 160zM416 228l32 40v-268h-416v416h353l-32 -32h-289v-352h352v196z' /%3E%3C/svg%3E"); @@ -32,6 +34,7 @@ gux-checkbox { label { display: inline-block; + min-height: 24px; &:hover { cursor: pointer; @@ -56,8 +59,8 @@ gux-checkbox { position: absolute; left: 4px; top: 6px; - width: @gux-icon-size-default; - height: @gux-icon-size-default; + width: @gux-icon-size-default-global; + height: @gux-icon-size-default-global; } label.gux-unchecked::after { @@ -86,7 +89,7 @@ gux-checkbox { } .gux-checkbox-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; label.gux-checked::after { background-image: @gux-icon-checkbox-checked-dark; @@ -113,7 +116,7 @@ gux-checkbox.gux-dark-theme { // Light .gux-checkbox-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/stable/gux-checkbox/readme.md b/src/components/stable/gux-checkbox/readme.md index 013d124efa..74b1d8963a 100644 --- a/src/components/stable/gux-checkbox/readme.md +++ b/src/components/stable/gux-checkbox/readme.md @@ -42,6 +42,19 @@ This component represents a checkbox with three possible states: `unchecked`, `c | `check` | Emits when the checked state changes. | `CustomEvent` | +## Dependencies + +### Used by + + - [gux-table](../../beta/gux-table) + +### Graph +```mermaid +graph TD; + gux-table --> gux-checkbox + style gux-checkbox fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/stable/gux-color-picker/gux-color-picker.less b/src/components/stable/gux-color-picker/gux-color-picker.less index 5b175e5cc5..813b0f0348 100644 --- a/src/components/stable/gux-color-picker/gux-color-picker.less +++ b/src/components/stable/gux-color-picker/gux-color-picker.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part @background: #f9fafb; @@ -25,7 +27,7 @@ gux-color-picker { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s; background-color: @background; - border: 1px solid @gux-border-alt; + border: 1px solid #dae1e8; border-radius: 2px; cursor: pointer; @@ -38,9 +40,9 @@ gux-color-picker { .gux-color-picker-main-element:focus, .gux-color-picker-opened { - border-color: @gux-dark-blue; + border-color: @gux-genesys-dark-blue; outline: none; - box-shadow: 0 0 4px fade(@gux-blue, 50%); + box-shadow: 0 0 4px fade(@gux-genesys-blue, 50%); } .gux-color-picker-selected-color { @@ -53,7 +55,7 @@ gux-color-picker { margin: 9px 0; float: left; font-size: 12px; - color: @gux-grey-2; + color: @gux-type; } .gux-color-picker-color-select { @@ -87,25 +89,25 @@ gux-color-picker { // Dark .gux-color-picker-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; .gux-color-picker-main-element { - border-color: @gux-grey-1; - background-color: @gux-border-dark; + border-color: @gux-grey-global; + background-color: #555d66; } .gux-color-picker-main-element:focus, .gux-color-picker-opened { - border-color: @gux-blue; + border-color: @gux-genesys-blue; box-shadow: none; } .gux-color-picker-color-name { - color: @gux-off-white; + color: @gux-type-dark; } gux-icon { - color: @gux-off-white; + color: @gux-type-dark; } } @@ -121,7 +123,7 @@ gux-color-picker.gux-dark-theme { // Light .gux-color-picker-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/stable/gux-color-select/gux-color-select.less b/src/components/stable/gux-color-select/gux-color-select.less index f3eb304a35..a4c20f75b3 100644 --- a/src/components/stable/gux-color-select/gux-color-select.less +++ b/src/components/stable/gux-color-select/gux-color-select.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style @@ -5,8 +7,8 @@ gux-color-select { display: inline-block; > div { - border: 1px solid @gux-border-alt; - background-color: @gux-off-white; + border: 1px solid #dae1e8; + background-color: @gux-type-dark; padding: 20px 0 12px; box-shadow: 0 0 2px rgba(34, 37, 41, 0.24); box-sizing: border-box; @@ -34,7 +36,7 @@ gux-color-select { // Dark .gux-color-select-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { @@ -49,7 +51,7 @@ gux-color-select.gux-dark-theme { // Light .gux-color-select-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/stable/gux-color-select/option/gux-color-option.less b/src/components/stable/gux-color-select/option/gux-color-option.less index 9d1dc81f9a..bb9c864a11 100644 --- a/src/components/stable/gux-color-select/option/gux-color-option.less +++ b/src/components/stable/gux-color-select/option/gux-color-option.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../style/color.less'; + // Variables part // Style @@ -18,13 +20,13 @@ gux-color-option { &:focus, &.gux-color-option-active, &:active { - outline: 1px solid @gux-dark-blue; + outline: 1px solid @gux-genesys-dark-blue; border: 1px white solid; } &:disabled { - background-color: @gux-off-white; - border: 1px solid @gux-grey-2; + background-color: @gux-type-dark; + border: 1px solid @gux-charcoal-grey; opacity: 0.5; cursor: default; } @@ -39,7 +41,7 @@ gux-color-option { // Dark .gux-color-option-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; } .gux-dark-theme { @@ -54,7 +56,7 @@ gux-color-option.gux-dark-theme { // Light .gux-color-option-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/stable/gux-datepicker/gux-datepicker.less b/src/components/stable/gux-datepicker/gux-datepicker.less index 41d2d7d0a9..9abaf2b243 100644 --- a/src/components/stable/gux-datepicker/gux-datepicker.less +++ b/src/components/stable/gux-datepicker/gux-datepicker.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Style gux-datepicker { display: block; @@ -24,7 +26,7 @@ gux-datepicker { margin-left: 10px; } > button { - color: @gux-grey-2; + color: @gux-type; position: absolute; height: 32px; font-size: 16px; @@ -32,7 +34,7 @@ gux-datepicker { right: 0; z-index: 1; &:hover { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } } > div > div > button { @@ -42,7 +44,7 @@ gux-datepicker { } &.active { > div.gux-datepicker-field > gux-text-field > button { - color: @gux-dark-blue; + color: @gux-genesys-dark-blue; } gux-calendar { display: block; @@ -61,7 +63,7 @@ gux-datepicker { // Light .gux-datepicker-light-theme { - color: @gux-grey-2; + color: @gux-type; }; .gux-light-theme { @@ -80,12 +82,12 @@ gux-datepicker.gux-light-theme { > div.gux-datepicker-field { gux-text-field { label { - color: @gux-off-white; + color: @gux-type-dark; } > button { - color: @gux-off-white; + color: @gux-type-dark; &:hover { - color: @gux-off-white; + color: @gux-type-dark; } } } @@ -106,4 +108,4 @@ gux-datepicker.gux-dark-theme { // Default Theme gux-datepicker { .gux-datepicker-light-theme(); -} \ No newline at end of file +} diff --git a/src/components/stable/gux-datepicker/i18n/ar.json b/src/components/stable/gux-datepicker/i18n/ar.json index ce1cae7455..a3f7544342 100644 --- a/src/components/stable/gux-datepicker/i18n/ar.json +++ b/src/components/stable/gux-datepicker/i18n/ar.json @@ -1,4 +1,4 @@ { - "start": "Start", - "end": "End" + "start": "بدء", + "end": "إنهاء" } diff --git a/src/components/stable/gux-disclosure-button/gux-disclosure-button.less b/src/components/stable/gux-disclosure-button/gux-disclosure-button.less index ea83b2fcd3..1f24e250ca 100644 --- a/src/components/stable/gux-disclosure-button/gux-disclosure-button.less +++ b/src/components/stable/gux-disclosure-button/gux-disclosure-button.less @@ -1,3 +1,5 @@ +@import (reference) '../../../style/color.less'; + // Variables part // Style @@ -54,11 +56,11 @@ gux-disclosure-button { // Dark .gux-disclosure-button-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; .disclosure-button-container button { - border-color: @gux-grey-1; - color: @gux-off-white; + border-color: @gux-grey-global; + color: @gux-type-dark; } } @@ -74,11 +76,11 @@ gux-disclosure-button.gux-dark-theme { // Light .gux-disclosure-button-light-theme { - color: @gux-grey-2; + color: @gux-type; .disclosure-button-container button { border-color: @gux-border; - color: @gux-grey-2; + color: @gux-type; } } diff --git a/src/components/stable/gux-dropdown/gux-dropdown.less b/src/components/stable/gux-dropdown/gux-dropdown.less index 5cfad16a62..d52cd0a5e8 100644 --- a/src/components/stable/gux-dropdown/gux-dropdown.less +++ b/src/components/stable/gux-dropdown/gux-dropdown.less @@ -1,22 +1,23 @@ @import (reference) '../../../style/typography.less'; +@import (reference) '../../../style/color.less'; // Variables part @background-color: #f9fafb; @background-color-dark-theme: #555d66; -@text-color: @gux-grey-2; -@text-color-dark-theme: @gux-off-white; +@text-color: @gux-type; +@text-color-dark-theme: @gux-type-dark; -@placeholder: @gux-pale-gray-2; +@placeholder: #9baaba; -@border-color: @gux-border-alt; -@border-color-dark-theme: @gux-grey-1; +@border-color: #dae1e8; +@border-color-dark-theme: @gux-grey-global; -@focus-outline: fade(@gux-blue, 50%); -@focus-outline-dark-theme: @gux-blue; -@active-border: @gux-dark-blue; +@focus-outline: fade(@gux-genesys-blue, 50%); +@focus-outline-dark-theme: @gux-genesys-blue; +@active-border: @gux-genesys-dark-blue; -@menu-background-color: @gux-off-white; +@menu-background-color: @gux-type-dark; @menu-border-color: #dae1eb; // Style @@ -137,14 +138,14 @@ gux-dropdown { &:not([disabled]) { &[selected] { - background: @gux-light-blue; + background: #deeaff; color: @text-color; } &:hover, &:focus { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } } } @@ -175,7 +176,7 @@ gux-dropdown { &:focus { box-shadow: none; border: none; - border-bottom: 2px solid fade(@gux-blue, 50%); + border-bottom: 2px solid fade(@gux-genesys-blue, 50%); } } } @@ -183,7 +184,7 @@ gux-dropdown { &.active { .select-field gux-text-field input:focus { - border-bottom: 1px solid @gux-dark-blue; + border-bottom: 1px solid @gux-genesys-dark-blue; } } } @@ -212,7 +213,7 @@ gux-dropdown { &:focus { box-shadow: none; border: none; - border-bottom: 2px solid fade(@gux-blue, 50%); + border-bottom: 2px solid fade(@gux-genesys-blue, 50%); } } } @@ -220,7 +221,7 @@ gux-dropdown { &.active { .select-field gux-text-field input:focus { - border-bottom: 1px solid @gux-dark-blue; + border-bottom: 1px solid @gux-genesys-dark-blue; } } } @@ -264,8 +265,8 @@ gux-dropdown { &.page { .select-field { .ghost { - background-color: @gux-off-white-bg; - color: @gux-grey-bg-3; + background-color: @gux-background; + color: #9baab8; } gux-text-field input { @@ -275,15 +276,15 @@ gux-dropdown { &.active { gux-text-field input { - border-bottom: 1px solid @gux-blue; + border-bottom: 1px solid @gux-genesys-blue; } } } &.palette { .select-field { .ghost { - background-color: @gux-off-white-bg; - color: @gux-grey-bg-3; + background-color: @gux-background; + color: #9baab8; } gux-text-field { input { @@ -294,7 +295,7 @@ gux-dropdown { &.active { gux-text-field { input { - border-bottom: 1px solid @gux-blue; + border-bottom: 1px solid @gux-genesys-blue; } } } @@ -313,12 +314,12 @@ gux-dropdown { // Dark .gux-dropdown-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; div.gux-dropdown { .select-field { .ghost { background-color: @background-color-dark-theme; - color: @gux-pale-gray-2; + color: #9baaba; } gux-text-field input { @@ -355,42 +356,42 @@ gux-dropdown { &.page { .select-field { .ghost { - background-color: @gux-charcoal; + background-color: @gux-charcoal-grey; } gux-text-field input { - border-color: @gux-grey-1; + border-color: @gux-grey-global; &:focus { - border-color: fade(@gux-blue, 50%); + border-color: fade(@gux-genesys-blue, 50%); } } } &.active { gux-text-field input:focus { - border-bottom: 1px solid @gux-blue; + border-bottom: 1px solid @gux-genesys-blue; } } } &.palette { .select-field { .ghost { - background-color: @gux-charcoal; + background-color: @gux-charcoal-grey; } gux-text-field input { - border-color: @gux-grey-1; + border-color: @gux-grey-global; &:focus { - border-color: fade(@gux-blue, 50%); + border-color: fade(@gux-genesys-blue, 50%); } } } &.active { gux-text-field input:focus { - border-bottom: 1px solid @gux-blue; + border-bottom: 1px solid @gux-genesys-blue; } } } diff --git a/src/components/stable/gux-dropdown/gux-dropdown.tsx b/src/components/stable/gux-dropdown/gux-dropdown.tsx index e3c3a96e79..01e01cbdf6 100644 --- a/src/components/stable/gux-dropdown/gux-dropdown.tsx +++ b/src/components/stable/gux-dropdown/gux-dropdown.tsx @@ -10,6 +10,7 @@ import { State } from '@stencil/core'; import { KeyCode } from '../../../common-enums'; +import { whenEventIsFrom } from '../../../common-utils'; @Component({ styleUrl: 'gux-dropdown.less', @@ -17,7 +18,7 @@ import { KeyCode } from '../../../common-enums'; }) export class GuxDropdown { @Element() - root: HTMLGuxDropdownElement; + root: HTMLElement; textFieldElement: HTMLGuxTextFieldElement; /** @@ -49,9 +50,6 @@ export class GuxDropdown { @State() opened: boolean; - @State() - selectionOptions: HTMLGuxOptionElement[]; - @State() forcedGhostValue: string; @@ -82,40 +80,42 @@ export class GuxDropdown { this.textFieldElement.setLabelledBy(labeledBy); } + // TODO: Fix the keyboard navigation I broke onKeyDown(event: KeyboardEvent) { - const focusIndex = this.getFocusIndex(); + const selectionOptions = this.getSelectionOptions(); + const focusIndex = this.getFocusIndex(selectionOptions); switch (event.keyCode) { case KeyCode.Up: if (focusIndex > 0) { - this.selectionOptions[focusIndex - 1].focus(); + selectionOptions[focusIndex - 1].focus(); } break; case KeyCode.Down: if (this.inputIsFocused) { this.opened = true; } - if (focusIndex < this.selectionOptions.length - 1) { - this.selectionOptions[focusIndex + 1].focus(); + if (focusIndex < selectionOptions.length - 1) { + selectionOptions[focusIndex + 1].focus(); } break; case KeyCode.Home: - if (!this.selectionOptions.length) { + if (!selectionOptions.length) { return; } - this.selectionOptions[0].focus(); + selectionOptions[0].focus(); break; case KeyCode.End: - if (!this.selectionOptions.length) { + if (!selectionOptions.length) { return; } - this.selectionOptions[this.selectionOptions.length - 1].focus(); + selectionOptions[selectionOptions.length - 1].focus(); break; case KeyCode.Enter: case KeyCode.Space: break; default: if (!this.filterable) { - const arr = this.selectionOptions.filter(item => { + const arr = selectionOptions.filter(item => { return item.text.startsWith(event.key); }); if (arr[0]) { @@ -130,45 +130,69 @@ export class GuxDropdown { this.opened = false; this.emitChange(value); } + _clickHandler() { if (!this.disabled) { this.opened = !this.opened; } } + _focusHandler() { this.inputIsFocused = true; } - _focusOptionItemHandler(text: string) { - this.forcedGhostValue = this.value + text.substring(this.value.length); + + _optionFocusedHandler(e: FocusEvent) { + whenEventIsFrom('gux-option', e, elem => { + const option = elem as HTMLGuxOptionElement; + this.forcedGhostValue = + this.value + option.text.substring(this.value.length); + }); + } + + private _optionClickedHandler(e: MouseEvent) { + whenEventIsFrom('gux-option', e, elem => { + const option = elem as HTMLGuxOptionElement; + this.setValue(option.text, option.value || option.text); + }); } + + private _optionKeyDownHandler(e: KeyboardEvent) { + if (e.key === ' ' || e.key === 'Enter') { + whenEventIsFrom('gux-option', e, elem => { + const option = elem as HTMLGuxOptionElement; + this.setValue(option.text, option.value || option.text); + }); + } + } + _blurHandler() { this.inputIsFocused = false; this.forcedGhostValue = ''; } + _inputHandler(event: CustomEvent) { this.value = event.detail; this.opened = true; } - _showDropdownIcon() { - let match = []; - if (this.selectionOptions) { - match = this.selectionOptions.filter(item => { - return item.text === this.value; - }); - } + private _showDropdownIcon() { + const selectionOptions = this.getSelectionOptions(); + const match = selectionOptions.filter(item => { + return item.text === this.value; + }); const filterableBehavior = !this.value || !!match.length; return this.filterable ? filterableBehavior : true; } get filteredItems() { - if (this.filterable && this.selectionOptions) { - const arr = this.selectionOptions.filter(item => { + const selectionOptions = this.getSelectionOptions(); + if (this.filterable) { + const arr = selectionOptions.filter(item => { return item.text.toLowerCase().startsWith(this.value.toLowerCase()); }); return arr; } else { - return this.selectionOptions ? this.selectionOptions : []; + return selectionOptions; } } @@ -188,17 +212,26 @@ export class GuxDropdown { if (!this.filterable) { this.textFieldElement.readonly = true; } - this.selectionOptions = this.getSelectionOptions(); - for (const option of this.selectionOptions) { - option.addEventListener('selectedChanged', (e: CustomEvent) => { - const text = option.text; - this.setValue(text, e.detail); - }); + } - option.addEventListener('onFocus', (e: CustomEvent) => { - this._focusOptionItemHandler(e.detail); - }); + private getSelectionOptions(): HTMLGuxOptionElement[] { + const result: HTMLGuxOptionElement[] = []; + const options: HTMLElement = this.root.getElementsByClassName( + 'gux-options' + )[0] as HTMLElement; + + if (!options) { + return []; } + // Hack around TSX not supporting for..of on HTMLCollection, this + // needs to be tested in IE11 + const childrenElements: any = options.children; + for (const child of childrenElements) { + if (child.matches('gux-option')) { + result.push(child as HTMLGuxOptionElement); + } + } + return result; } render() { @@ -243,39 +276,28 @@ export class GuxDropdown { )} -
+
); } - private getSelectionOptions(): HTMLGuxOptionElement[] { - const result: HTMLGuxOptionElement[] = []; - const options: HTMLElement = this.root.getElementsByClassName( - 'gux-options' - )[0] as HTMLElement; - - // Hack around TSX not supporting for..of on HTMLCollection, this - // needs to be tested in IE11 - const childrenElements: any = options.children; - for (const child of childrenElements) { - if (child.matches('gux-option')) { - result.push(child as HTMLGuxOptionElement); - } - } - return result; - } - - private getFocusIndex(): number { - return this.selectionOptions.findIndex(option => { + private getFocusIndex(selectionOptions: HTMLGuxOptionElement[]): number { + return selectionOptions.findIndex(option => { return option.matches(':focus'); }); } private searchHighlightAndFilter(searchInput: string) { - if (this.selectionOptions) { - for (const option of this.selectionOptions) { + const selectionOptions = this.getSelectionOptions(); + if (selectionOptions) { + for (const option of selectionOptions) { option.shouldFilter(searchInput).then(isFiltered => { if (this.filterable && isFiltered) { option.classList.add('filtered'); diff --git a/src/components/stable/gux-dropdown/gux-option/gux-option.tsx b/src/components/stable/gux-dropdown/gux-option/gux-option.tsx index 274cbf00db..33adb80dab 100644 --- a/src/components/stable/gux-dropdown/gux-option/gux-option.tsx +++ b/src/components/stable/gux-dropdown/gux-option/gux-option.tsx @@ -1,13 +1,4 @@ -import { - Component, - Element, - Event, - EventEmitter, - h, - Method, - Prop, - State -} from '@stencil/core'; +import { Component, Element, h, Method, Prop, State } from '@stencil/core'; @Component({ styleUrl: 'gux-option.less', @@ -44,18 +35,6 @@ export class GuxOption { @State() highlight: string; - /** - * Occurs when the item has been selected. - */ - @Event() - selectedChanged: EventEmitter; - - /** - * Occurs when the item has been focused. - */ - @Event() - onFocus: EventEmitter; - /** * Determines if the search input matches this option. * @@ -78,22 +57,6 @@ export class GuxOption { } } - componentDidLoad() { - this.root.onfocus = () => this.onFocus.emit(this.text); - this.root.onclick = () => { - this.onItemClicked(); - }; - - this.root.onkeydown = (e: KeyboardEvent) => { - switch (e.key) { - case ' ': - case 'Enter': - this.selectedChanged.emit(this.value ? this.value : this.text); - break; - } - }; - } - hostData() { return { tabindex: '0' @@ -116,8 +79,4 @@ export class GuxOption { ); } - - private onItemClicked() { - this.selectedChanged.emit(this.value ? this.value : this.text); - } } diff --git a/src/components/stable/gux-dropdown/gux-option/readme.md b/src/components/stable/gux-dropdown/gux-option/readme.md index e31d8bed75..7bdac27bb9 100644 --- a/src/components/stable/gux-dropdown/gux-option/readme.md +++ b/src/components/stable/gux-dropdown/gux-option/readme.md @@ -14,14 +14,6 @@ | `value` | `value` | The content of this attribute represents the value to be submitted on 'input' changes, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element. | `string` | `undefined` | -## Events - -| Event | Description | Type | -| ----------------- | --------------------------------------- | --------------------- | -| `onFocus` | Occurs when the item has been focused. | `CustomEvent` | -| `selectedChanged` | Occurs when the item has been selected. | `CustomEvent` | - - ## Methods ### `shouldFilter(searchInput: string) => Promise` diff --git a/src/components/stable/gux-dropdown/tests/gux-dropdown.spec.ts b/src/components/stable/gux-dropdown/tests/gux-dropdown.spec.ts index bbce791355..fd3270f3e1 100644 --- a/src/components/stable/gux-dropdown/tests/gux-dropdown.spec.ts +++ b/src/components/stable/gux-dropdown/tests/gux-dropdown.spec.ts @@ -1,6 +1,7 @@ import { newSpecPage } from '@stencil/core/testing'; import { GuxDropdown } from '../gux-dropdown'; import { GuxOption } from '../gux-option/gux-option'; +import { whenEventIsFrom } from '../../../../common-utils'; describe('gux-dropdown', () => { let component: GuxDropdown; @@ -50,11 +51,23 @@ describe('gux-dropdown', () => { component._focusHandler(); expect(component.inputIsFocused).toEqual(true); }); - it('_focusListItemHandler', () => { + it('_focusListItemHandler responds to events from options', () => { const value = 'dummy'; - component._focusOptionItemHandler(value); + const option = document.createElement('gux-option'); + option.setAttribute('text', value); + const event = { target: option }; + component._optionFocusedHandler(event); expect(component.forcedGhostValue).toEqual(value); }); + it('_focusListItemHandler ignores events not from options', () => { + const value = 'dummy'; + const event = { + target: document.createElement('div') + }; + + component._optionFocusedHandler(event); + expect(component.forcedGhostValue).not.toEqual(value); + }); it('_blurHandler', () => { component._blurHandler(); expect(component.inputIsFocused).toEqual(false); diff --git a/src/components/stable/gux-icon/readme.md b/src/components/stable/gux-icon/readme.md index efc2443d50..206ebea4ee 100644 --- a/src/components/stable/gux-icon/readme.md +++ b/src/components/stable/gux-icon/readme.md @@ -39,7 +39,7 @@ - [gux-spin-button](../gux-spin-button) - [gux-tab](../../beta/gux-tabs/gux-tab) - [gux-tab-dropdown-option](../../beta/gux-tabs/gux-tab-dropdown-option) - - [gux-table-beta](../../beta/gux-table) + - [gux-table](../../beta/gux-table) - [gux-tabs-beta](../../beta/gux-tabs) - [gux-text-field](../gux-text-field) @@ -67,7 +67,7 @@ graph TD; gux-spin-button --> gux-icon gux-tab --> gux-icon gux-tab-dropdown-option --> gux-icon - gux-table-beta --> gux-icon + gux-table --> gux-icon gux-tabs-beta --> gux-icon gux-text-field --> gux-icon style gux-icon fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/components/stable/gux-list/gux-list.less b/src/components/stable/gux-list/gux-list.less index 3a1250d1f9..30483c6098 100644 --- a/src/components/stable/gux-list/gux-list.less +++ b/src/components/stable/gux-list/gux-list.less @@ -1,5 +1,7 @@ +@import (reference) '../../../style/color.less'; + // Variables part -@menu-background-color: @gux-off-white; +@menu-background-color: @gux-type-dark; @menu-border-color: #dae1eb; @menu-shadow: rgba(34, 37, 41, 0.24); @@ -15,7 +17,8 @@ gux-list { // Dark .gux-list-dark-theme { - color: @gux-grey-2; + color: @gux-type; + .list-items-container { background: @menu-background-color; box-shadow: 0px 0 2px 0px @menu-shadow; diff --git a/src/components/stable/gux-list/list-item/gux-list-item.less b/src/components/stable/gux-list/list-item/gux-list-item.less index f5769a4b32..c1c07a30c0 100644 --- a/src/components/stable/gux-list/list-item/gux-list-item.less +++ b/src/components/stable/gux-list/list-item/gux-list-item.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../style/color.less'; + // Variables part gux-list-item { @@ -22,19 +24,19 @@ gux-list-item { } } } - + // Theming - + // Dark .gux-list-item-dark-theme { &:focus, &:active, &:hover:not([disabled]) { .list-item { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } } } - + .gux-dark-theme { gux-list-item { .gux-list-item-dark-theme(); @@ -43,17 +45,17 @@ gux-list-item { gux-list-item.gux-dark-theme { .gux-list-item-dark-theme(); } - + // Light .gux-list-item-light-theme { &:focus, &:active, &:hover:not([disabled]) { .list-item { - background: @gux-dark-blue; - color: @gux-off-white; + background: @gux-genesys-dark-blue; + color: @gux-type-dark; } } } - + .gux-light-theme { gux-list-item { .gux-list-item-light-theme(); @@ -62,9 +64,8 @@ gux-list-item { gux-list-item.gux-light-theme { .gux-list-item-light-theme(); } - + // Default Theme gux-list-item { .gux-list-item-light-theme(); } - \ No newline at end of file diff --git a/src/components/stable/gux-modal/gux-modal.less b/src/components/stable/gux-modal/gux-modal.less index f608eebbb4..565bebaf5a 100644 --- a/src/components/stable/gux-modal/gux-modal.less +++ b/src/components/stable/gux-modal/gux-modal.less @@ -1,6 +1,7 @@ -// Variables part - @import (reference) '../../../style/typography.less'; +@import (reference) '../../../style/color.less'; + +// Variables part // Style gux-modal { @@ -24,7 +25,7 @@ gux-modal { width: 100%; padding: 40px; justify-content: space-between; - background: @gux-off-white; + background: @gux-background; box-shadow: 0 0 2px rgba(34, 37, 41, 0.24); &.small { @@ -54,7 +55,7 @@ gux-modal { border: none; background: transparent; font-size: 11px; - color: @gux-icons; + color: #98a7b8; cursor: pointer; gux-icon { width: 12px; @@ -112,10 +113,10 @@ gux-modal { // Dark .gux-modal-dark-theme { - color: @gux-off-white; + color: @gux-type-dark; .modal-container { - background: @gux-charcoal; + background: @gux-charcoal-grey; } } @@ -131,7 +132,7 @@ gux-modal.gux-dark-theme { // Light .gux-modal-light-theme { - color: @gux-grey-2; + color: @gux-type; } .gux-light-theme { diff --git a/src/components/stable/gux-modal/i18n/ar.json b/src/components/stable/gux-modal/i18n/ar.json index f5f7880c40..08d621a93b 100644 --- a/src/components/stable/gux-modal/i18n/ar.json +++ b/src/components/stable/gux-modal/i18n/ar.json @@ -1,3 +1,3 @@ { - "cancel": "Cancel" + "dismiss": "رفض" } diff --git a/src/components/stable/gux-notification-toast/gux-notification-toast.less b/src/components/stable/gux-notification-toast/gux-notification-toast.less index 062d13738f..2086ae2de3 100644 --- a/src/components/stable/gux-notification-toast/gux-notification-toast.less +++ b/src/components/stable/gux-notification-toast/gux-notification-toast.less @@ -1,3 +1,6 @@ +// Variables part +@import (reference) '../../../style/color.less'; + gux-notification-toast { padding: 16px 8px 16px 16px; width: 336px; @@ -76,42 +79,42 @@ gux-notification-toast { // Theming // Light .gux-notification-toast-light-theme { - background: @gux-panel; - color: @gux-off-white; - border-color: @gux-grey-2; + background: @gux-background-dark; + color: @gux-type-dark; + border-color: @gux-type; .icon{ &.alert { - color: @gux-alert-2; + color: @gux-alert-dark; } &.warning { - color: @gux-warning; + color: @gux-warning-dark; } &.positive { - color: @gux-positive; + color: @gux-positive-dark; } &.neutral { - color: @gux-neutral-2; + color: @gux-neutral-dark; } } .title{ - color: @gux-off-white; + color: @gux-type-dark; } .message{ - color: @gux-pale-gray-2; + color: #9baaba; } .dismiss-button { - color: @gux-off-white; + color: @gux-type-dark; } } // Dark .gux-notification-toast-dark-theme { - background: @gux-off-white; - color: @gux-grey-2; + background: @gux-background; + color: @gux-type; border-color: @gux-border; .icon { @@ -130,15 +133,15 @@ gux-notification-toast { } .title{ - color: @gux-grey-2; + color: @gux-type; } .message{ - color: @gux-pale-gray; + color: #77828f; } .dismiss-button { - color: @gux-grey-2; + color: @gux-type; } } diff --git a/src/components/stable/gux-notification-toast/i18n/ar.json b/src/components/stable/gux-notification-toast/i18n/ar.json index f8eada5b1e..08d621a93b 100644 --- a/src/components/stable/gux-notification-toast/i18n/ar.json +++ b/src/components/stable/gux-notification-toast/i18n/ar.json @@ -1,3 +1,3 @@ { - "dismiss": "Dismiss" + "dismiss": "رفض" } diff --git a/src/components/stable/gux-notification-toast/i18n/es-es.json b/src/components/stable/gux-notification-toast/i18n/es-es.json index f8eada5b1e..6603bfa82c 100644 --- a/src/components/stable/gux-notification-toast/i18n/es-es.json +++ b/src/components/stable/gux-notification-toast/i18n/es-es.json @@ -1,3 +1,3 @@ { - "dismiss": "Dismiss" + "dismiss": "Descartar" } diff --git a/src/components/stable/gux-notification-toast/i18n/fr-ca.json b/src/components/stable/gux-notification-toast/i18n/fr-ca.json index f8eada5b1e..e9101454ca 100644 --- a/src/components/stable/gux-notification-toast/i18n/fr-ca.json +++ b/src/components/stable/gux-notification-toast/i18n/fr-ca.json @@ -1,3 +1,3 @@ { - "dismiss": "Dismiss" + "dismiss": "Ignorer" } diff --git a/src/components/stable/gux-pagination/example.html b/src/components/stable/gux-pagination/example.html index fec7c98d4b..532523e024 100644 --- a/src/components/stable/gux-pagination/example.html +++ b/src/components/stable/gux-pagination/example.html @@ -2,27 +2,55 @@

English

Full

+
+

Expanded

+
+
+ +
+

Small

+

German

+

Japanese

+

No Options

+
+ + diff --git a/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-button.service.tsx b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-button.service.tsx new file mode 100644 index 0000000000..7cd5f5b45d --- /dev/null +++ b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-button.service.tsx @@ -0,0 +1,110 @@ +interface GuxPaginationButtonsExpandedPageListItem { + pageNumber: number; + display: string; + current: boolean; +} + +export class GuxPaginationButtonsService { + static getPageList( + currentPage: number, + totalPages: number + ): GuxPaginationButtonsExpandedPageListItem[] { + if (totalPages <= 10) { + return [...Array(totalPages).keys()].map(index => { + const pageNumber = index + 1; + + return { + pageNumber, + display: String(pageNumber), + current: pageNumber === currentPage + }; + }); + } + + if (currentPage <= 5) { + const startPageList = [...Array(6).keys()].map(index => { + const pageNumber = index + 1; + + return { + pageNumber, + display: String(pageNumber), + current: pageNumber === currentPage + }; + }); + + return [ + ...startPageList, + { + pageNumber: 7, + display: '...', + current: false + }, + { + pageNumber: totalPages, + display: String(totalPages), + current: false + } + ]; + } + + if (currentPage > totalPages - 5) { + const endPageList = [...Array(6).keys()].map(index => { + const pageNumber = index + totalPages - 5; + + return { + pageNumber, + display: String(pageNumber), + current: pageNumber === currentPage + }; + }); + + return [ + { + pageNumber: 1, + display: '1', + current: false + }, + { + pageNumber: totalPages - 6, + display: '...', + current: false + }, + ...endPageList + ]; + } + + const middlePageList = [...Array(5).keys()].map(index => { + const pageNumber = index + currentPage - 2; + + return { + pageNumber, + display: String(pageNumber), + current: pageNumber === currentPage + }; + }); + + return [ + { + pageNumber: 1, + display: '1', + current: false + }, + { + pageNumber: currentPage - 3, + display: '...', + current: false + }, + ...middlePageList, + { + pageNumber: currentPage + 3, + display: '...', + current: false + }, + { + pageNumber: totalPages, + display: String(totalPages), + current: false + } + ]; + } +} diff --git a/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.less b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.less index 4c7ab2c498..e6b7317ef7 100644 --- a/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.less +++ b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.less @@ -1,3 +1,5 @@ +@import (reference) '../../../../style/color.less'; + gux-pagination-buttons { .gux-pagination-buttons-container { display: flex; @@ -6,7 +8,10 @@ gux-pagination-buttons { justify-content: flex-end; align-content: stretch; align-items: center; - margin-left: 16px; + + &.expanded { + justify-content: center; + } & > div { order: 0; @@ -31,10 +36,6 @@ gux-pagination-buttons { align-content: stretch; align-items: center; - &.small { - display: none; - } - & > div { order: 0; flex: 0 1 auto; @@ -52,14 +53,74 @@ gux-pagination-buttons { } } - .gux-pagination-buttons-small-spacer { - width: 10px; - display: none; + .gux-pagination-buttons-list-container { + margin: 0 16px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-content: stretch; + align-items: center; + + .gux-pagination-buttons-list-current, + .gux-pagination-buttons-list-target { + margin: 0; + padding: 0 8px; + border: none; + background: inherit; + height: 32px; + } + + .gux-pagination-buttons-list-current { + color: @gux-type; + font-weight: 600; + } - &.small { - display: block; + .gux-pagination-buttons-list-target { + color: @gux-dark-blue; + cursor: pointer; } } + + .gux-pagination-buttons-spacer { + width: 10px; + } + } +} + +// Theming + +// Dark +.gux-pagination-buttons-dark-theme { + color: @gux-off-white; +}; + +.gux-dark-theme { + gux-pagination-buttons { + .gux-pagination-buttons-dark-theme(); + } +} + +gux-pagination-buttons.gux-dark-theme { + .gux-pagination-buttons-dark-theme(); +} + +// Light +.gux-pagination-buttons-light-theme { + color: @gux-type; +}; + +.gux-light-theme { + gux-pagination-buttons { + .gux-pagination-buttons-light-theme(); } +} + +gux-pagination-buttons.gux-light-theme { + .gux-pagination-buttons-light-theme(); +} +// Default Theme +gux-pagination-buttons { + .gux-pagination-buttons-light-theme(); } diff --git a/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.tsx b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.tsx index 9a9bc0204f..4cf9a668c8 100644 --- a/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.tsx +++ b/src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.tsx @@ -9,8 +9,9 @@ import { } from '@stencil/core'; import { buildI18nForComponent, GetI18nValue } from '../../../../i18n'; -import paginationResources from './i18n/en.json'; import { GuxPaginationLayout } from '../gux-pagination'; +import paginationResources from './i18n/en.json'; +import { GuxPaginationButtonsService } from './gux-pagination-button.service'; @Component({ styleUrl: 'gux-pagination-buttons.less', @@ -60,6 +61,10 @@ export class GuxPaginationButtons { this.internalcurrentpagechange.emit(this.totalPages); } + private handleClickPage(pageNumber: number): void { + this.internalcurrentpagechange.emit(pageNumber); + } + private setPageFromInput(value: string): void { const page = parseInt(value, 10); @@ -70,14 +75,82 @@ export class GuxPaginationButtons { } } + private getPageListEnteries( + currentPage: number, + totalPages: number + ): JSX.Element[] { + return GuxPaginationButtonsService.getPageList( + currentPage, + totalPages + ).reduce((acc, cv) => { + if (cv.current) { + return acc.concat( + + ); + } + + return acc.concat( + + ); + }, []); + } + + private getSmallPagePicker(): JSX.Element { + return
; + } + + private getExpandedPagePicker(): JSX.Element { + return ( +
+ {this.getPageListEnteries(this.currentPage, this.totalPages)} +
+ ); + } + + private getFullPagePicker(): JSX.Element { + return ( +
+
{this.i18n('page')}
+
+ (this.textFieldRef = ref)} + use-clear-button="false" + onChange={() => this.setPageFromInput(this.textFieldRef.value)} + /> +
+
{this.i18n('totalPages', { totalPages: this.totalPages })}
+
+ ); + } + + private getPagePicker(layout: GuxPaginationLayout): JSX.Element { + if (layout === 'small') { + return this.getSmallPagePicker(); + } + + if (layout === 'expanded') { + return this.getExpandedPagePicker(); + } + + return this.getFullPagePicker(); + } + async componentWillLoad(): Promise { this.i18n = await buildI18nForComponent(this.element, paginationResources); } render(): JSX.Element { return ( -
-
+
+
-
-
{this.i18n('page')}
-
- (this.textFieldRef = ref)} - use-clear-button="false" - onChange={() => this.setPageFromInput(this.textFieldRef.value)} - /> -
-
{this.i18n('totalPages', { totalPages: this.totalPages })}
-
- -
+ {this.getPagePicker(this.layout)} -
+
gux-text-field gux-pagination-buttons --> gux-button gux-pagination-buttons --> gux-icon - gux-pagination-buttons --> gux-text-field gux-text-field --> gux-icon gux-pagination --> gux-pagination-buttons style gux-pagination-buttons fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/components/stable/gux-pagination/gux-pagination-buttons/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap b/src/components/stable/gux-pagination/gux-pagination-buttons/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap index fd4e4f1771..f09c44094e 100644 --- a/src/components/stable/gux-pagination/gux-pagination-buttons/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap +++ b/src/components/stable/gux-pagination/gux-pagination-buttons/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap @@ -2,8 +2,8 @@ exports[`gux-pagination-item-counts #render should render as expected (1) 1`] = ` -
-
+
+
-
+
Page
@@ -34,8 +34,7 @@ exports[`gux-pagination-item-counts #render should render as expected (1) 1`] = of 0
-
-
+
-
+
Page
@@ -87,8 +86,7 @@ exports[`gux-pagination-item-counts #render should render as expected (2) 1`] = of 10
-
-
+
-
+
Page
@@ -140,8 +138,7 @@ exports[`gux-pagination-item-counts #render should render as expected (3) 1`] = of 10
-
-
+
-
-
- Page -
-
- -
-
- -
-
- -
-
- of 0 -
-
-
-
+
+
-
-
- Page -
-
- -
-
- -
-
- -
-
- of 10 -
-
-
-
+
+
-
-
- Page -
-
- -
-
- -
-
- -
-
- of 10 -
+
+
+ + + + + + + + +
+
+ +`; + +exports[`gux-pagination-item-counts #render should render as expected (7) 1`] = ` + +
+
+ + + + + + + + +
+
+
+ + + + + + + + +
+
+ +`; + +exports[`gux-pagination-item-counts #render should render as expected (8) 1`] = ` + +
+
+ + + + + + + + +
+
+ + + + + + + + + + +
+
+ + + + + + + + +
+
+ +`; + +exports[`gux-pagination-item-counts #render should render as expected (9) 1`] = ` + +
+
+ + + + + + + + +
+
+ + + + + + + + + +
-
-
+
@@ -66,7 +66,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`] 50 - +
@@ -75,7 +75,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`] 75 - +
@@ -84,7 +84,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`] 100 - +
@@ -155,7 +155,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`] 25 - +
@@ -164,7 +164,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`] 50 - +
@@ -173,7 +173,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`] 75 - +
@@ -182,7 +182,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`] 100 - +
@@ -253,7 +253,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`] 25 - +
@@ -262,7 +262,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`] 50 - +
@@ -271,7 +271,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`] 75 - +
@@ -280,7 +280,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`] 100 - +
@@ -351,7 +351,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`] 25 - +
@@ -360,7 +360,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`] 50 - + @@ -369,7 +369,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`] 75 - + @@ -378,7 +378,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`] 100 - + diff --git a/src/components/stable/gux-pagination/gux-pagination.less b/src/components/stable/gux-pagination/gux-pagination.less index 296576833f..a754e7fc39 100644 --- a/src/components/stable/gux-pagination/gux-pagination.less +++ b/src/components/stable/gux-pagination/gux-pagination.less @@ -12,25 +12,16 @@ gux-pagination { align-content: stretch; align-items: center; - &.small { - gux-pagination-items-per-page { - display: none; - } - } - - & > div { - order: 0; - flex: 0 1 auto; - align-self: auto; - } - - .gux-pagination-container-left { + .gux-pagination-info { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: center; + order: 0; + flex: 1 1 auto; + align-self: auto; & > * { order: 0; @@ -38,5 +29,16 @@ gux-pagination { align-self: auto; } } + + .gux-pagination-change { + margin-left: 16px; + order: 0; + flex: 1 1 auto; + align-self: auto; + } + + .gux-pagination-change:first-child { + margin-left: 0; + } } } diff --git a/src/components/stable/gux-pagination/gux-pagination.tsx b/src/components/stable/gux-pagination/gux-pagination.tsx index 0f9ad43561..221a2c8beb 100644 --- a/src/components/stable/gux-pagination/gux-pagination.tsx +++ b/src/components/stable/gux-pagination/gux-pagination.tsx @@ -11,7 +11,7 @@ import { import { GuxItemsPerPage } from './gux-pagination-items-per-page/gux-pagination-items-per-page'; -export type GuxPaginationLayout = 'small' | 'full'; +export type GuxPaginationLayout = 'small' | 'expanded' | 'full'; export type GuxPaginationState = { currentPage: number; itemsPerPage: number; @@ -87,6 +87,33 @@ export class GuxPagination implements ComponentInterface { this.setPage(event.detail); } + private getPaginationInfoElement(layout: GuxPaginationLayout): JSX.Element[] { + if (layout === 'expanded') { + return null; + } + + const content = [ + + ]; + + if (layout === 'full') { + content.push( + + ); + } + + return
{content}
; + } + componentWillRender(): void { this.totalPages = this.calculatTotalPages(); this.currentPage = Math.min(this.currentPage, this.totalPages); @@ -94,21 +121,9 @@ export class GuxPagination implements ComponentInterface { render(): JSX.Element { return ( -
-
- - -
-
+
+ {this.getPaginationInfoElement(this.layout)} +
gux-icon gux-text-field --> gux-icon gux-option --> gux-text-highlight + gux-pagination-buttons --> gux-text-field gux-pagination-buttons --> gux-button gux-pagination-buttons --> gux-icon - gux-pagination-buttons --> gux-text-field style gux-pagination fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.e2e.ts.snap b/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.e2e.ts.snap index 5683c5e5d3..0d776b0aee 100644 --- a/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.e2e.ts.snap +++ b/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.e2e.ts.snap @@ -1,21 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gux-pagination #render should render as expected (1) 1`] = `"
1 - 25 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; +exports[`gux-pagination #render should render as expected (1) 1`] = `"
1 - 25 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; -exports[`gux-pagination #render should render as expected (2) 1`] = `"
1 - 50 of 1,000
2525
5050
7575
100100
per page
Page
of 20
"`; +exports[`gux-pagination #render should render as expected (2) 1`] = `"
1 - 50 of 1,000
2525
5050
7575
100100
per page
Page
of 20
"`; -exports[`gux-pagination #render should render as expected (3) 1`] = `"
1 - 75 of 1,000
2525
5050
7575
100100
per page
Page
of 14
"`; +exports[`gux-pagination #render should render as expected (3) 1`] = `"
1 - 75 of 1,000
2525
5050
7575
100100
per page
Page
of 14
"`; -exports[`gux-pagination #render should render as expected (4) 1`] = `"
1 - 100 of 1,000
2525
5050
7575
100100
per page
Page
of 10
"`; +exports[`gux-pagination #render should render as expected (4) 1`] = `"
1 - 100 of 1,000
2525
5050
7575
100100
per page
Page
of 10
"`; -exports[`gux-pagination #render should render as expected (5) 1`] = `"
1 - 25 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; +exports[`gux-pagination #render should render as expected (5) 1`] = `"
1 - 25 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; -exports[`gux-pagination #render should render as expected (6) 1`] = `"
226 - 250 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; +exports[`gux-pagination #render should render as expected (6) 1`] = `"
226 - 250 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; -exports[`gux-pagination #render should render as expected (7) 1`] = `"
451 - 500 of 1,000
2525
5050
7575
100100
per page
Page
of 20
"`; +exports[`gux-pagination #render should render as expected (7) 1`] = `"
451 - 500 of 1,000
2525
5050
7575
100100
per page
Page
of 20
"`; -exports[`gux-pagination #render should render as expected (8) 1`] = `"
676 - 750 of 1,000
2525
5050
7575
100100
per page
Page
of 14
"`; +exports[`gux-pagination #render should render as expected (8) 1`] = `"
676 - 750 of 1,000
2525
5050
7575
100100
per page
Page
of 14
"`; -exports[`gux-pagination #render should render as expected (9) 1`] = `"
901 - 1,000 of 1,000
2525
5050
7575
100100
per page
Page
of 10
"`; +exports[`gux-pagination #render should render as expected (9) 1`] = `"
901 - 1,000 of 1,000
2525
5050
7575
100100
per page
Page
of 10
"`; -exports[`gux-pagination #render should render as expected (10) 1`] = `"
1 - 25 of 1,000
2525
5050
7575
100100
per page
Page
of 40
"`; +exports[`gux-pagination #render should render as expected (10) 1`] = `"
1 - 25 of 1,000
"`; + +exports[`gux-pagination #render should render as expected (11) 1`] = `"
"`; diff --git a/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.spec.ts.snap b/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.spec.ts.snap index a1330ee6e7..48f1325d2b 100644 --- a/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.spec.ts.snap +++ b/src/components/stable/gux-pagination/tests/__snapshots__/gux-pagination.spec.ts.snap @@ -2,8 +2,8 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` -
-
+
+
@@ -40,7 +40,7 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` 25 - +
@@ -49,7 +49,7 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` 50 - +
@@ -58,7 +58,7 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` 75 - +
@@ -67,7 +67,7 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` 100 - +
@@ -80,10 +80,10 @@ exports[`gux-pagination #render should render as expected (1) 1`] = `
-
+
-
-
+
+
-
+
Page
@@ -114,8 +114,7 @@ exports[`gux-pagination #render should render as expected (1) 1`] = ` of 40
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -250,8 +249,7 @@ exports[`gux-pagination #render should render as expected (2) 1`] = ` of 20
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -386,8 +384,7 @@ exports[`gux-pagination #render should render as expected (3) 1`] = ` of 14
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -522,8 +519,7 @@ exports[`gux-pagination #render should render as expected (4) 1`] = ` of 10
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -658,8 +654,7 @@ exports[`gux-pagination #render should render as expected (5) 1`] = ` of 40
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -794,8 +789,7 @@ exports[`gux-pagination #render should render as expected (6) 1`] = ` of 40
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -930,8 +924,7 @@ exports[`gux-pagination #render should render as expected (7) 1`] = ` of 20
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -1066,8 +1059,7 @@ exports[`gux-pagination #render should render as expected (8) 1`] = ` of 14
-
-
+
-
+
-
-
+
+
-
+
Page
@@ -1202,8 +1194,7 @@ exports[`gux-pagination #render should render as expected (9) 1`] = ` of 10
-
-
+
-
-
- - -
- - 25 - - -
- - - -
- - 50 - - -
- - - -
- - 75 - - -
- - - -
- - 100 - - -
- -
-
- + + + + + +
-
- per page +
+
+ + + + + + + +
- +
-
+
+ +`; + +exports[`gux-pagination #render should render as expected (11) 1`] = ` + +
+
-
-
+
+
-
-
- Page -
-
- -
-
- -
-
- -
-
- of 40 -
+
+ + + + + + + +
-
-
+