diff --git a/src/components/stable/gux-dropdown/example.html b/src/components/stable/gux-dropdown/example.html
index 4244a8093e..5559a1e290 100644
--- a/src/components/stable/gux-dropdown/example.html
+++ b/src/components/stable/gux-dropdown/example.html
@@ -1,35 +1,41 @@
-
-
- American English
- Latin American Spanish
- European Spanish
- UK English
- American French
-
- Dutch
-
+
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ American French
+
+ Dutch
+
-
- American English
- Latin American Spanish
- European Spanish
- UK English
- American French
-
- Dutch
-
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ American French
+
+ Dutch
+
-
- American English
- Latin American Spanish
- European Spanish
- UK English
- American French
-
- Dutch
-
+
+ American English
+ Latin American Spanish
+ European Spanish
+ UK English
+ American French
+
+ Dutch
+
diff --git a/src/components/stable/gux-dropdown/gux-dropdown.less b/src/components/stable/gux-dropdown/gux-dropdown.less
index d52cd0a5e8..68179a756f 100644
--- a/src/components/stable/gux-dropdown/gux-dropdown.less
+++ b/src/components/stable/gux-dropdown/gux-dropdown.less
@@ -25,14 +25,17 @@ gux-dropdown {
div.gux-dropdown {
position: relative;
margin: 4px 0;
+
&.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
+
&.left {
display: flex;
}
+
.select-field {
position: relative;
height: 32px;
@@ -84,6 +87,7 @@ gux-dropdown {
overflow: hidden;
pointer-events: none;
}
+
&.top {
.ghost {
margin-top: 32px;
@@ -111,7 +115,7 @@ gux-dropdown {
position: relative;
height: 32px;
line-height: 32px;
- padding: 0px 16px;
+ padding: 0 16px;
display: flex;
cursor: pointer;
@@ -158,21 +162,27 @@ gux-dropdown {
overflow: hidden;
.h1();
+
line-height: 1.66666667;
height: 48px;
padding: 2px 25px 4px 11px;
}
+
height: 48px;
+
gux-text-field {
div.gux-field {
height: 48px;
}
+
input {
.h1();
+
line-height: 1.66666667;
height: 48px;
border: none;
border-bottom: 2px solid transparent;
+
&:focus {
box-shadow: none;
border: none;
@@ -188,6 +198,7 @@ gux-dropdown {
}
}
}
+
&.palette {
.select-field {
.ghost {
@@ -195,21 +206,27 @@ gux-dropdown {
overflow: hidden;
.h2();
+
line-height: 1.66666667;
height: 52px;
padding: 9px 25px 4px 11px;
}
+
height: 52px;
+
gux-text-field {
div.gux-field {
height: 52px;
}
+
input {
.h2();
+
line-height: 1.66666667;
height: 52px;
border: none;
border-bottom: 2px solid transparent;
+
&:focus {
box-shadow: none;
border: none;
@@ -242,7 +259,7 @@ gux-dropdown {
color: @text-color;
&:focus {
- box-shadow: 0px 0px 0px 3px @focus-outline;
+ box-shadow: 0 0 0 3px @focus-outline;
}
}
@@ -256,7 +273,7 @@ gux-dropdown {
.gux-field {
input:focus {
border: 1px solid @active-border;
- box-shadow: 0px 0px 4px @focus-outline;
+ box-shadow: 0 0 4px @focus-outline;
}
}
}
@@ -280,18 +297,21 @@ gux-dropdown {
}
}
}
+
&.palette {
.select-field {
.ghost {
background-color: @gux-background;
color: #9baab8;
}
+
gux-text-field {
input {
border-bottom: 1px solid @gux-border;
}
}
}
+
&.active {
gux-text-field {
input {
@@ -308,6 +328,7 @@ gux-dropdown {
.gux-dropdown-light-theme;
}
}
+
.gux-dropdown.gux-light-theme {
.gux-dropdown-light-theme;
}
@@ -315,6 +336,7 @@ gux-dropdown {
// Dark
.gux-dropdown-dark-theme {
color: @gux-type-dark;
+
div.gux-dropdown {
.select-field {
.ghost {
@@ -336,7 +358,7 @@ gux-dropdown {
.select-field {
gux-text-field input {
&:focus {
- box-shadow: 0px 0px 1px 3px @focus-outline-dark-theme;
+ box-shadow: 0 0 1px 3px @focus-outline-dark-theme;
}
}
}
@@ -346,7 +368,7 @@ gux-dropdown {
.gux-field {
input:focus {
border-color: @border-color-dark-theme;
- box-shadow: 0px 0px 1px 3px @focus-outline-dark-theme;
+ box-shadow: 0 0 1px 3px @focus-outline-dark-theme;
}
}
}
@@ -374,6 +396,7 @@ gux-dropdown {
}
}
}
+
&.palette {
.select-field {
.ghost {
@@ -397,11 +420,13 @@ gux-dropdown {
}
}
}
+
.gux-dark-theme {
gux-dropdown {
.gux-dropdown-dark-theme;
}
}
+
.gux-dropdown.gux-dark-theme {
.gux-dropdown-dark-theme;
}
diff --git a/src/components/stable/gux-icon/example.html b/src/components/stable/gux-icon/example.html
index 9754ae812d..e143c991ec 100644
--- a/src/components/stable/gux-icon/example.html
+++ b/src/components/stable/gux-icon/example.html
@@ -21,10 +21,7 @@
Accessibility
information to the user that would not otherwise be available
-
+
If neither decorative or screenreader-text
are set an error will be logged in the console
@@ -40,38 +37,79 @@
Styling
Caching
-
-
+
+
-
+
-
-
+
+
-
+
-
-
+
+
-
+
-
-
+
+
-
+
-
-
+
+
Duplicated icons should not require additional newtwork calls
-
\ No newline at end of file
+
diff --git a/src/components/stable/gux-icon/gux-icon.less b/src/components/stable/gux-icon/gux-icon.less
index 8dfb4b2ed5..65663fe973 100644
--- a/src/components/stable/gux-icon/gux-icon.less
+++ b/src/components/stable/gux-icon/gux-icon.less
@@ -6,7 +6,7 @@ gux-icon {
width: 1em;
height: 1em;
- .container {
+ .gux-icon-container {
width: 100%;
svg {
diff --git a/src/components/stable/gux-icon/gux-icon.tsx b/src/components/stable/gux-icon/gux-icon.tsx
index b8f381bb16..3a0cbb1a29 100644
--- a/src/components/stable/gux-icon/gux-icon.tsx
+++ b/src/components/stable/gux-icon/gux-icon.tsx
@@ -50,7 +50,9 @@ export class GuxIcon {
render() {
return (
- this.svgHtml &&
+ this.svgHtml && (
+
+ )
);
}
diff --git a/src/components/stable/gux-icon/readme.md b/src/components/stable/gux-icon/readme.md
index efc2443d50..bcd21a57c7 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](../../beta/gux-table-beta)
- [gux-tabs-beta](../../beta/gux-tabs)
- [gux-text-field](../gux-text-field)
diff --git a/src/components/stable/gux-list/example.html b/src/components/stable/gux-list/example.html
index f910abec50..170e5bc124 100644
--- a/src/components/stable/gux-list/example.html
+++ b/src/components/stable/gux-list/example.html
@@ -1,12 +1,16 @@
-
-
- Some detail
-
-
-
-
- Add User
-
-
+
+
+ Some detail
+
+
+
+
+ Add User
+
+
diff --git a/src/components/stable/gux-list/gux-list.less b/src/components/stable/gux-list/gux-list.less
index 30483c6098..572e877a2b 100644
--- a/src/components/stable/gux-list/gux-list.less
+++ b/src/components/stable/gux-list/gux-list.less
@@ -21,7 +21,7 @@ gux-list {
.list-items-container {
background: @menu-background-color;
- box-shadow: 0px 0 2px 0px @menu-shadow;
+ box-shadow: 0 0 2px 0 @menu-shadow;
}
}
@@ -30,6 +30,7 @@ gux-list {
.gux-list-dark-theme();
}
}
+
gux-list.gux-dark-theme {
.gux-list-dark-theme();
}
@@ -38,7 +39,7 @@ gux-list.gux-dark-theme {
.gux-list-light-theme {
.list-items-container {
background: @menu-background-color;
- box-shadow: 0px 0 2px 0px @menu-shadow;
+ box-shadow: 0 0 2px 0 @menu-shadow;
}
}
@@ -47,6 +48,7 @@ gux-list.gux-dark-theme {
.gux-list-light-theme();
}
}
+
gux-list.gux-light-theme {
.gux-list-light-theme();
}
diff --git a/src/components/stable/gux-list/list-divider/gux-list-divider.less b/src/components/stable/gux-list/list-divider/gux-list-divider.less
index 811b4baaec..f07c493f26 100644
--- a/src/components/stable/gux-list/list-divider/gux-list-divider.less
+++ b/src/components/stable/gux-list/list-divider/gux-list-divider.less
@@ -5,7 +5,7 @@ gux-list-divider {
position: relative;
height: 32px;
line-height: 32px;
- padding: 0px 16px;
+ padding: 0 16px;
display: flex;
cursor: pointer;
height: 1px;
@@ -25,6 +25,7 @@ gux-list-divider {
.gux-list-divider-dark-theme();
}
}
+
gux-list-divider.gux-dark-theme {
.gux-list-divider-dark-theme();
}
@@ -39,6 +40,7 @@ gux-list-divider.gux-dark-theme {
.gux-list-divider-light-theme();
}
}
+
gux-list-divider.gux-light-theme {
.gux-list-divider-light-theme();
}
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 c1c07a30c0..01cdf3396d 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
@@ -3,69 +3,74 @@
// Variables part
gux-list-item {
+ .list-item {
+ height: max-content;
+ word-wrap: break-word;
+ padding: 8px 16px;
+ display: flex;
+ cursor: pointer;
- .list-item {
- height: max-content;
- word-wrap: break-word;
- padding: 8px 16px;
- display: flex;
- cursor: pointer;
-
- gux-text-highlight {
- width: 100%;
- }
+ gux-text-highlight {
+ width: 100%;
}
+ }
- &[disabled] {
- .list-item {
- opacity: 0.5;
- pointer-events: none;
- cursor: default;
- }
+ &[disabled] {
+ .list-item {
+ opacity: 0.5;
+ pointer-events: none;
+ cursor: default;
}
}
+}
- // Theming
+// Theming
- // Dark
- .gux-list-item-dark-theme {
- &:focus, &:active, &:hover:not([disabled]) {
- .list-item {
- background: @gux-genesys-dark-blue;
- color: @gux-type-dark;
- }
+// Dark
+.gux-list-item-dark-theme {
+ &:focus,
+ &:active,
+ &:hover:not([disabled]) {
+ .list-item {
+ background: @gux-genesys-dark-blue;
+ color: @gux-type-dark;
}
}
+}
- .gux-dark-theme {
- gux-list-item {
- .gux-list-item-dark-theme();
- }
- }
- gux-list-item.gux-dark-theme {
+.gux-dark-theme {
+ gux-list-item {
.gux-list-item-dark-theme();
}
+}
- // Light
- .gux-list-item-light-theme {
- &:focus, &:active, &:hover:not([disabled]) {
- .list-item {
- background: @gux-genesys-dark-blue;
- color: @gux-type-dark;
- }
- }
- }
+gux-list-item.gux-dark-theme {
+ .gux-list-item-dark-theme();
+}
- .gux-light-theme {
- gux-list-item {
- .gux-list-item-light-theme();
+// Light
+.gux-list-item-light-theme {
+ &:focus,
+ &:active,
+ &:hover:not([disabled]) {
+ .list-item {
+ background: @gux-genesys-dark-blue;
+ color: @gux-type-dark;
}
}
- gux-list-item.gux-light-theme {
- .gux-list-item-light-theme();
- }
+}
- // Default Theme
+.gux-light-theme {
gux-list-item {
.gux-list-item-light-theme();
}
+}
+
+gux-list-item.gux-light-theme {
+ .gux-list-item-light-theme();
+}
+
+// Default Theme
+gux-list-item {
+ .gux-list-item-light-theme();
+}
diff --git a/src/components/stable/gux-modal/example.html b/src/components/stable/gux-modal/example.html
index edd0694ebf..182d87ff1b 100644
--- a/src/components/stable/gux-modal/example.html
+++ b/src/components/stable/gux-modal/example.html
@@ -1,64 +1,102 @@
+
+
-
Typical Modal
-
Open
-
- Modal Title
- This contains the modal content.
-
- Cancel
-
-
- Accept
-
-
+
Typical Modal
+
Open
-
No title
-
Open
-
- This contains the modal content.
-
- Cancel
-
-
- Don't save
- Save
-
-
+
No title
+
Open
-
Scrolling modal
-
Open
-
- Modal Title
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis, purus id viverra tincidunt, diam dui iaculis metus, a vestibulum tortor leo sed lorem. Cras eget purus condimentum, eleifend quam sit amet, pharetra leo. Nulla facilisi. Integer sollicitudin risus sit amet magna gravida consectetur. Phasellus tempor erat ex, in mollis nisi fringilla id. Fusce quis elit et nisi efficitur consequat et ut tortor. Etiam mauris orci, iaculis id enim eu, ornare scelerisque risus. Suspendisse aliquet mauris fringilla felis sollicitudin scelerisque. Etiam id arcu rhoncus, fringilla tellus id, finibus purus. Fusce fermentum laoreet suscipit. Curabitur a erat finibus, mattis leo et, pretium nisl. Sed dictum magna mauris, et semper dolor aliquet eget.
+
Scrolling modal
+ Cancel
-
-
- Accept
-
-
+ Nulla facilisi. Fusce sit amet quam congue, sodales purus vitae, pretium lorem. Curabitur quis volutpat augue, non efficitur quam. Curabitur leo est, feugiat eu ligula quis, gravida convallis tortor. In consectetur justo at faucibus rhoncus. Quisque pellentesque dolor lectus, ac malesuada nibh fermentum ut. Nunc libero dolor, laoreet tincidunt urna a, cursus vestibulum elit. Pellentesque sed ornare massa, non blandit est. Vestibulum semper sem at mauris iaculis pulvinar.
+
+
+ Cancel
+
+
+ Accept
+
+
+ `);
+
+ document.getElementById("modal-container").appendChild(html);
+ })()'
+ >Open
diff --git a/src/components/stable/gux-modal/gux-modal.less b/src/components/stable/gux-modal/gux-modal.less
index 565bebaf5a..f1d82aba8c 100644
--- a/src/components/stable/gux-modal/gux-modal.less
+++ b/src/components/stable/gux-modal/gux-modal.less
@@ -5,7 +5,7 @@
// Style
gux-modal {
- .modal {
+ .gux-modal {
display: flex;
justify-content: center;
align-items: center;
@@ -17,7 +17,7 @@ gux-modal {
background: rgba(34, 37, 41, 0.8);
z-index: 1;
- .modal-container {
+ .gux-modal-container {
display: flex;
flex-direction: column;
position: relative;
@@ -28,26 +28,26 @@ gux-modal {
background: @gux-background;
box-shadow: 0 0 2px rgba(34, 37, 41, 0.24);
- &.small {
+ &.gux-small {
max-height: 368px;
width: 416px;
- .modal-content {
+ .gux-modal-content {
max-height: 160px;
}
}
- &.medium {
+ &.gux-medium {
max-height: 640px;
width: 672px;
}
- &.large {
+ &.gux-large {
max-height: 640px;
width: 940px;
}
- .dismiss-button {
+ .gux-dismiss-button {
position: absolute;
top: 15px;
right: 15px;
@@ -57,38 +57,40 @@ gux-modal {
font-size: 11px;
color: #98a7b8;
cursor: pointer;
+
gux-icon {
width: 12px;
height: 12px;
}
}
- .modal-header {
+ .gux-modal-header {
margin: 0;
padding-bottom: 24px;
.h1();
}
- .modal-content {
+ .gux-modal-content {
margin: 0 8px 24px 8px;
max-height: 432px;
overflow-y: auto;
- &.no-buttons {
+ &.gux-no-buttons {
margin-bottom: 0;
}
}
- .button-footer {
+
+ .gux-button-footer {
display: flex;
justify-content: space-between;
- .left-align-buttons {
+ .gux-left-align-buttons {
gux-button {
padding-right: 5px;
}
}
- .right-align-buttons {
+ .gux-right-align-buttons {
gux-button {
padding-left: 5px;
}
@@ -96,11 +98,11 @@ gux-modal {
}
}
- .modal-container {
+ .gux-modal-container {
@media (max-width: 416px) {
- &.small,
- &.medium,
- &.large {
+ &.gux-small,
+ &.gux-medium,
+ &.gux-large {
height: 100%;
width: 100%;
}
@@ -115,7 +117,7 @@ gux-modal {
.gux-modal-dark-theme {
color: @gux-type-dark;
- .modal-container {
+ .gux-modal-container {
background: @gux-charcoal-grey;
}
}
diff --git a/src/components/stable/gux-modal/gux-modal.tsx b/src/components/stable/gux-modal/gux-modal.tsx
index afcb7c7b03..a10850391b 100644
--- a/src/components/stable/gux-modal/gux-modal.tsx
+++ b/src/components/stable/gux-modal/gux-modal.tsx
@@ -32,7 +32,7 @@ export class GuxModal {
size: GuxModalSize = 'small';
/**
- * Fired when a user dismisses the modal
+ * Fired when a user dismisses the modal (The default behaviour is to remove the component from the DOM)
*/
@Event()
guxdismiss: EventEmitter