From a7f50a9782c51b7144943d5c18a0d87f910ac5b5 Mon Sep 17 00:00:00 2001 From: Rezak OTMANI <34196038+rezak-otmani@users.noreply.github.com> Date: Fri, 4 May 2018 17:56:33 +0200 Subject: [PATCH 01/18] fix(data-table-v2): fix the icon that becomes small when column header wraps, resolves #720 (#742) --- src/components/data-table-v2/_data-table-v2-sort.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/data-table-v2/_data-table-v2-sort.scss b/src/components/data-table-v2/_data-table-v2-sort.scss index c8460f103349..b56b4637ab47 100644 --- a/src/components/data-table-v2/_data-table-v2-sort.scss +++ b/src/components/data-table-v2/_data-table-v2-sort.scss @@ -54,6 +54,6 @@ height: rem(9px); padding: $spacing-3xs; width: auto; - max-width: 14px; + min-width: 14px; } } From bf85e2c2faccf6e18551288358d05c5964daecb4 Mon Sep 17 00:00:00 2001 From: bkrissIBM <33705160+bkrissIBM@users.noreply.github.com> Date: Fri, 4 May 2018 11:14:36 -0500 Subject: [PATCH 02/18] fix(tooltip): Firefox overflowing text when you have a long enough string without spaces (#737) --- docs/contributing.md | 2 +- src/components/tooltip/_tooltip.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/contributing.md b/docs/contributing.md index 52a3a5a914bb..6370c1ded411 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -210,7 +210,7 @@ When you're at a good stopping place and you're ready for feedback from other co > - `` The scope could be anything specifying place of the commit change or the thing(s) that changed. > > __Commit message format:__ -> ``` +``` (): diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss index 5fbaee8c252e..ee6f170377f6 100644 --- a/src/components/tooltip/_tooltip.scss +++ b/src/components/tooltip/_tooltip.scss @@ -51,6 +51,7 @@ padding: $spacing-lg; border: 1px solid $ui-03; z-index: z('floating'); + word-wrap: break-word; p { @include font-family; From 7781dc9ab225885c83c0b84b2303f9d6aee7318a Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Fri, 4 May 2018 11:33:29 -0500 Subject: [PATCH 03/18] feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js --- src/components/data-table-v2/README.md | 2 +- src/components/dropdown/_dropdown.scss | 57 +++++++++++++++++++ src/components/dropdown/dropdown--inline.html | 27 +++++++++ src/components/dropdown/dropdown.js | 6 +- src/components/select/README.md | 5 ++ 5 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 src/components/dropdown/dropdown--inline.html diff --git a/src/components/data-table-v2/README.md b/src/components/data-table-v2/README.md index d9964f38532b..fed4973cac7b 100644 --- a/src/components/data-table-v2/README.md +++ b/src/components/data-table-v2/README.md @@ -69,7 +69,7 @@ The update to tables splits out the `scss` files into multiple partial files wit ### FAQ **How do I sort the tables** -The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action `here`. +The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action [in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel). **How do I use the expandable rows** If you would like to programmatically expand table rows, you can add the `bx--expandable-row-v2` to the `selectorParentRows` elements. diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss index 9212deac8cd8..9d623ed843be 100644 --- a/src/components/dropdown/_dropdown.scss +++ b/src/components/dropdown/_dropdown.scss @@ -109,6 +109,7 @@ display: block; color: currentColor; text-decoration: none; + font-weight: normal; padding: $spacing-md $spacing-lg $spacing-md $spacing-md; text-overflow: ellipsis; overflow: hidden; @@ -152,4 +153,60 @@ outline: none; } } + + .#{$prefix}--dropdown--inline { + background-color: transparent; + + &:focus { + outline: none; + } + + &:focus .#{$prefix}--dropdown-text { + @include focus-outline('border'); + } + + &[data-value=''] .#{$prefix}--dropdown-text { + color: $brand-01; + } + + .#{$prefix}--dropdown-text { + display: inline-block; + padding-right: 1.5rem; + overflow: visible; + color: $brand-01; + } + + .#{$prefix}--dropdown-text:hover { + background-color: $field-01; + } + + &.#{$prefix}--dropdown--open:focus { + box-shadow: none; + } + + &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list { + @include layer('overlay'); + } + + &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-text { + outline: none; + } + + .#{$prefix}--dropdown__arrow { + position: relative; + top: -2px; + left: 8px; + right: 0; + bottom: 0; + } + + .#{$prefix}--dropdown-link { + font-weight: normal; + } + + .#{$prefix}--dropdown-link:hover { + background-color: $field-01; + color: $text-01; + } + } } diff --git a/src/components/dropdown/dropdown--inline.html b/src/components/dropdown/dropdown--inline.html new file mode 100644 index 000000000000..ca92b5258498 --- /dev/null +++ b/src/components/dropdown/dropdown--inline.html @@ -0,0 +1,27 @@ + diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 4c3e41b85964..d5a3d37308fb 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -143,7 +143,9 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur) if (this.element.dispatchEvent(eventStart)) { if (this.element.dataset.dropdownType !== 'navigation') { - const text = this.element.querySelector(this.options.selectorText); + const selectorText = + this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner; + const text = this.element.querySelector(selectorText); if (text) { text.innerHTML = itemToSelect.innerHTML; } @@ -189,6 +191,7 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur) * @type {Object} * @property {string} selectorInit The CSS selector to find selectors. * @property {string} [selectorText] The CSS selector to find the element showing the selected item. + * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode. * @property {string} [selectorItem] The CSS selector to find clickable areas in dropdown items. * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item. * @property {string} [classSelected] The CSS class for the selected dropdown item. @@ -204,6 +207,7 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur) return { selectorInit: '[data-dropdown]', selectorText: `.${prefix}--dropdown-text`, + selectorTextInner: `.${prefix}--dropdown-text__inner`, selectorItem: `.${prefix}--dropdown-link`, selectorItemSelected: `.${prefix}--dropdown--selected`, classSelected: `${prefix}--dropdown--selected`, diff --git a/src/components/select/README.md b/src/components/select/README.md index c5e58c35f934..e04c7f8bb189 100644 --- a/src/components/select/README.md +++ b/src/components/select/README.md @@ -1,3 +1,8 @@ +#### Inline Select width + +The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding. +There should be 10px of padding between the placeholder text and the caret. + #### Using Form Validation Carbon Components provides HTML attributes and CSS to enable form validation for each input or control. From 1b20ce06cd14ae49136a7038be5d8636bd182721 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Sat, 5 May 2018 02:05:57 +0900 Subject: [PATCH 04/18] docs(components): add component model explainer (#739) --- src/globals/js/mixins/README.md | 59 +++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/src/globals/js/mixins/README.md b/src/globals/js/mixins/README.md index 692b076fb9a4..4ef7f7b0dbd8 100644 --- a/src/globals/js/mixins/README.md +++ b/src/globals/js/mixins/README.md @@ -1,3 +1,58 @@ +# Carbon component model + +Carbon has a very simple component model for vanilla JavaScript, like below, covering basic lifecycle of [creation](#creation)/[clean-up](#clean-up). +Most of the interface is implemented in [`create-component.js`](./create-component.js) mixin, explained [later](#component-lifecycle-create-componentjs). + +```typescript +interface Handle { + // Clean things up, e.g. event handlers + release(): null; +} + +// No mandatory properties in component options at bare-bone component model +// (But mix-ins define ones, e.g. `.selectorInit` used for most components) +interface ComponentOptions {} + +interface Component extends Handle { + // The constructor takes the DOM element to work with, and instance-specific options + new (element: Element, options: ComponentOptions = {}); + + // List of components instantiated by this component + // `.release()` in this component should release them + children: Component[]; + + // Factory method, checks for existing instance before calling the constructor + static create(element: Element, options: ComponentOptions = {}): Component; + + // Registry of component instances + static WeakMap components; + + // Default options + static ComponentOptions options; +} +``` + +## Example + +```javascript +import { Loading } from `carbon-components`; + +// Where HTML snippet like one in http://carbondesignsystem.com/components/loading/code is +const element = document.querySelector('[data-loading]'); + +// Instantiates `Loading` (spinner) without making it spinning +const loading = Loading.create(element, { active: false }); + +loading.set(true); // Starts the spinner +loading.set(false); // Stops the spinner + +// Returns an existing instance if there is one, creates a new instance otherwise +console.log(Loading.create(element) === loading); // `true` + +// Looks for an existing instance +console.log(Loading.components.get(element) === loading); // `true` +``` + # Carbon component mixins Carbon component mixins, based on [Subclass Factory Pattern](https://github.com/justinfagnani/proposal-mixins#subclass-factory-pattern), provides the basis for Carbon component classes by allowing component implementation to compose small pieces of functionalities to base them on, instead of introducing "fat base class". @@ -8,7 +63,7 @@ Carbon component mixins, based on [Subclass Factory Pattern](https://github.com/ - [Component lifecycle (`create-component.js`)](#component-lifecycle-create-componentjs) - [Creation](#creation) - [Clean-up](#clean-up) - - [Component registry](#component-registry) + - [Registry of component instances](#registry-of-component-instances) - [Sugar layers for component instantiation](#sugar-layers-for-component-instantiation) - [Searching for DOM nodes to intantiate components on (`init-component-by-search.js`)](#searching-for-dom-nodes-to-intantiate-components-on-init-component-by-searchjs) - [Lazily instantiating a component upon an event on a root element (`init-component-by-event.js`)](#lazily-instantiating-a-component-upon-an-event-on-a-root-element-init-component-by-eventjs) @@ -63,7 +118,7 @@ If a Carbon component has other things to clean-up (e.g. event listeners), it ca `.release()` method should return `null` to allow the caller of `.release()` e.g. to assign the return value to a variable referring to Carbon component instance, marking that the instance is gone. -### Component registry +### Registry of component instances Every component must define static `components` property, which is an instance of [`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap). The constructor in `create-component.js` [sets the component instance to static `.components` property](https://github.com/carbon-design-system/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L37), mapped with the DOM element the component is instantiated on. This allows application code to grab a Carbon component instance associated with the root element. From 084423ca718bc1b184916a3fc79ed03c2b5210ac Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 4 May 2018 12:30:39 -0500 Subject: [PATCH 05/18] fix(grid): center grid at largest breakpoint (#747) --- src/globals/grid/classic/_classic.scss | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/globals/grid/classic/_classic.scss b/src/globals/grid/classic/_classic.scss index 618f97eed9f4..ee443e6bd559 100644 --- a/src/globals/grid/classic/_classic.scss +++ b/src/globals/grid/classic/_classic.scss @@ -3,9 +3,21 @@ $max-width: 1600px; $columns: 12; -$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px); -$gutter-breakpoints: (xs: 5px, sm: 10px); -$grid-gutter-breakpoints: (xs: 3%, sm: 5%); +$grid-breakpoints: ( + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1600px +); +$gutter-breakpoints: ( + xs: 5px, + sm: 10px +); +$grid-gutter-breakpoints: ( + xs: 3%, + sm: 5% +); @mixin grid { .#{$prefix}--grid { @@ -21,6 +33,10 @@ $grid-gutter-breakpoints: (xs: 3%, sm: 5%); padding-right: gutter('sm'); } + @media (min-width: breakpoint('xxl')) { + margin: 0 auto; + } + &.max { max-width: $max-width; } From 3bff67a4473c050cc1789f05897533a7088a0c03 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 4 May 2018 12:37:56 -0500 Subject: [PATCH 06/18] fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin --- demo/js/components/PageHeader/page-header.scss | 2 +- demo/scss/_markdown-page.scss | 15 ++++----------- demo/scss/_page.scss | 6 +++--- src/components/button/_button.scss | 2 +- src/components/data-table/_data-table.scss | 1 - src/components/modal/_modal.scss | 2 +- src/components/module/_module.scss | 2 +- .../notification/_toast-notification.scss | 2 +- .../unified-header/_account-switcher.scss | 2 +- src/globals/scss/_typography.scss | 6 +++--- 10 files changed, 16 insertions(+), 24 deletions(-) diff --git a/demo/js/components/PageHeader/page-header.scss b/demo/js/components/PageHeader/page-header.scss index 992946f5c8af..13bb4625603f 100644 --- a/demo/js/components/PageHeader/page-header.scss +++ b/demo/js/components/PageHeader/page-header.scss @@ -34,11 +34,11 @@ .page-header__title { @include typescale('mega'); + @include letter-spacing; color: $text-01; font-weight: 300; margin: -1.15rem 0 0 -3px; line-height: 1.25; - letter-spacing: 0; padding: 0; transition: $transition--base $bx--standard-easing; diff --git a/demo/scss/_markdown-page.scss b/demo/scss/_markdown-page.scss index 89647a073e86..88fa65223651 100644 --- a/demo/scss/_markdown-page.scss +++ b/demo/scss/_markdown-page.scss @@ -58,11 +58,11 @@ margin-bottom: 4rem; strong { + @include letter-spacing; font-size: 1.125rem; line-height: 1.5; font-weight: 600; word-wrap: break-word; - letter-spacing: 0; } } @@ -187,7 +187,7 @@ line-height: 1.25; strong { - letter-spacing: 0; + @include letter-spacing; } &:first-child { @@ -216,14 +216,7 @@ } } - main[data-page='style-overview-typography'] - & - hr - + hr - + table - tbody - tr - td:nth-child(2) { + main[data-page='style-overview-typography'] & hr + hr + table tbody tr td:nth-child(2) { @media all and (max-width: 600px) { text-align: left; font-size: 3rem; @@ -456,12 +449,12 @@ margin-bottom: 3rem; strong { + @include letter-spacing; position: absolute; top: 0; left: 0; z-index: 2; color: $color__white; - letter-spacing: 0; font-size: 1.625rem; top: 2.2rem; left: 1.625rem; diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss index 70a0211319b1..54801ad61312 100644 --- a/demo/scss/_page.scss +++ b/demo/scss/_page.scss @@ -61,6 +61,7 @@ td { .page__desc { @include font-smoothing; + @include letter-spacing; max-width: 38rem; color: $text-01; word-wrap: break-word; @@ -68,7 +69,6 @@ td { line-height: 1.5; font-weight: 600; padding-bottom: 1rem; - letter-spacing: 0; span { color: $brand-01; @@ -95,9 +95,9 @@ td { h1 { @include typescale('mega'); + @include letter-spacing; font-weight: 300; line-height: 1.25; - letter-spacing: 0px; &#helvetica-neue-light { font-weight: 300; @@ -170,10 +170,10 @@ td { h3 { @include typescale('delta'); + @include letter-spacing; color: $brand-01; padding: 4rem 0 1rem; font-weight: 600; - letter-spacing: 0; & + h4 { padding-top: 0; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index f5cb78ce4d93..d1f951b46595 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -135,9 +135,9 @@ } .#{$prefix}--btn--sm { + @include letter-spacing; height: 2rem; padding: $button-padding-sm; - letter-spacing: 0; } .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary, diff --git a/src/components/data-table/_data-table.scss b/src/components/data-table/_data-table.scss index ad3fc9296f16..52a92ed9e7e6 100644 --- a/src/components/data-table/_data-table.scss +++ b/src/components/data-table/_data-table.scss @@ -99,7 +99,6 @@ @include reset; @include typescale('omega'); font-weight: 600; - letter-spacing: 1px; text-align: left; text-transform: $data-table-heading-transform; height: rem(40px); diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index e3fbad710e8a..b28eae0cf3d6 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -80,10 +80,10 @@ .#{$prefix}--modal-header__label { @include reset; @include typescale('omega'); + @include letter-spacing; color: $text-01; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; margin-bottom: $spacing-xs; } diff --git a/src/components/module/_module.scss b/src/components/module/_module.scss index db36e1f66908..b3e9c875a786 100644 --- a/src/components/module/_module.scss +++ b/src/components/module/_module.scss @@ -41,7 +41,7 @@ .#{$prefix}--module__title { @include typescale('zeta'); @include font-smoothing; - letter-spacing: 0; + @include letter-spacing; font-weight: 600; color: $text-01; } diff --git a/src/components/notification/_toast-notification.scss b/src/components/notification/_toast-notification.scss index 883a034d823e..ae4c0de4671c 100644 --- a/src/components/notification/_toast-notification.scss +++ b/src/components/notification/_toast-notification.scss @@ -74,8 +74,8 @@ .#{$prefix}--toast-notification__title { @include typescale('zeta'); + @include letter-spacing; font-weight: 600; - letter-spacing: 0; line-height: 1; padding-bottom: $spacing-3xs; } diff --git a/src/components/unified-header/_account-switcher.scss b/src/components/unified-header/_account-switcher.scss index 5f54e10b6062..9541a13612b7 100644 --- a/src/components/unified-header/_account-switcher.scss +++ b/src/components/unified-header/_account-switcher.scss @@ -54,7 +54,7 @@ .#{$prefix}--account-switcher__toggle--text { @include typescale('legal'); - letter-spacing: 0.5px; + @include letter-spacing; overflow: hidden; display: inline-flex; white-space: nowrap; diff --git a/src/globals/scss/_typography.scss b/src/globals/scss/_typography.scss index 09358f319673..b8167dad5b50 100644 --- a/src/globals/scss/_typography.scss +++ b/src/globals/scss/_typography.scss @@ -68,7 +68,7 @@ $typescale-map: ( } @mixin letter-spacing { - letter-spacing: 0.5px; + letter-spacing: 0; } $font-size-map: ( @@ -81,8 +81,8 @@ $font-size-map: ( '16' : 1rem, '14' : 0.875rem, '12' : 0.75rem, - '11' : 0.6875rem, - ); + '11' : 0.6875rem +); @mixin font-size($size) { @if map-has-key($font-size-map, $size) { From 157cf651cca2bc42dd653f754d870ea3278ffffb Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Fri, 4 May 2018 17:07:11 -0500 Subject: [PATCH 07/18] fix(select): added disabled styling to option in select (#751) * fix(select): added disabled styling to select item * fix(select): removed disabled * fix(select): added cursor not allowed --- src/components/select/_select.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss index 92b5fc6cf1a1..1f3e7baf146a 100644 --- a/src/components/select/_select.scss +++ b/src/components/select/_select.scss @@ -98,6 +98,11 @@ color: $text-01; // For the options to show in IE11 } + .#{$prefix}--select-option[disabled] { + opacity: 0.5; + cursor: not-allowed; + } + // Override some Firefox user-agent styles @-moz-document url-prefix() { .#{$prefix}--select-option { From 24b8a5bd11675bea03ad7353d2a609cd63eb97be Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Fri, 4 May 2018 17:26:44 -0500 Subject: [PATCH 08/18] fix(dropdown): added tabindex logic to dropdown (#749) --- src/components/dropdown/dropdown.hbs | 10 +++++----- src/components/dropdown/dropdown.js | 8 ++++++++ src/components/order-summary/order-summary.hbs | 16 ++++++++++++---- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/dropdown/dropdown.hbs b/src/components/dropdown/dropdown.hbs index 3079353f1fbf..866604497c4a 100644 --- a/src/components/dropdown/dropdown.hbs +++ b/src/components/dropdown/dropdown.hbs @@ -6,19 +6,19 @@
    • diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index d5a3d37308fb..f1c84186177e 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -94,6 +94,14 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur) this.element.focus(); } }); + const listItems = [...this.element.querySelectorAll(this.options.selectorItem)]; + listItems.forEach(item => { + if (this.element.classList.contains(this.options.classOpen)) { + item.tabIndex = 0; + } else { + item.tabIndex = -1; + } + }); } } diff --git a/src/components/order-summary/order-summary.hbs b/src/components/order-summary/order-summary.hbs index 977ecf98ce72..70d22bdb0611 100644 --- a/src/components/order-summary/order-summary.hbs +++ b/src/components/order-summary/order-summary.hbs @@ -8,10 +8,18 @@
    • From 45a70d040041d9d34da755b225f2b0754b3fe213 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 7 May 2018 10:35:34 -0500 Subject: [PATCH 09/18] fix(input): remove red focus ring when input marked as required firefox (#750) --- src/components/form/_form.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index 7a18745b7248..e9c56a4d1c45 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -52,6 +52,11 @@ } } + // Fix for red ring when input is marked required in Firefox, refs #744 + input:not(output):not([data-invalid]):-moz-ui-invalid { + box-shadow: none; + } + .#{$prefix}--form-requirement { @include reset; @include typescale('omega'); From 50e7a18ea6c5e08b1c2fad28425f41449a70ee00 Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Mon, 7 May 2018 11:07:01 -0500 Subject: [PATCH 10/18] fix(multi-select): fixed width and hover color (#752) --- src/components/list-box/_list-box.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/list-box/_list-box.scss b/src/components/list-box/_list-box.scss index 8497d26c5c75..3b357d4762b0 100644 --- a/src/components/list-box/_list-box.scss +++ b/src/components/list-box/_list-box.scss @@ -73,18 +73,13 @@ $list-box-menu-width: rem(300px); .#{$prefix}--list-box__field { @include button-reset; position: relative; - display: flex; + display: inline-flex; align-items: center; - width: 100%; height: 100%; padding: 0 1rem; cursor: pointer; } - .#{$prefix}--list-box__field:hover { - background: $field-01; - } - .#{$prefix}--list-box__field:focus, .#{$prefix}--list-box__field[aria-expanded='true'] { outline: 1px solid $brand-01; From 425815fe0c5317ed9cc6c40f2c45210cdc7c72d6 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 7 May 2018 11:20:22 -0500 Subject: [PATCH 11/18] feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table --- src/components/accordion/_accordion.scss | 56 ++++++-- src/components/breadcrumb/_breadcrumb.scss | 7 + src/components/button/_button.scss | 6 + src/components/checkbox/_checkbox.scss | 12 ++ .../code-snippet/_code-snippet.scss | 20 +++ .../_data-table-v2-skeleton.scss | 45 +++++++ .../data-table-v2/_data-table-v2.scss | 1 + src/components/date-picker/_date-picker.scss | 17 +++ src/components/dropdown/_dropdown.scss | 5 + src/components/form/_form.scss | 7 + .../number-input/_number-input.scss | 11 ++ src/components/pagination/_pagination.scss | 6 + .../_progress-indicator.scss | 7 + .../radio-button/_radio-button.scss | 11 ++ src/components/search/_search.scss | 10 ++ src/components/skeleton/_skeleton-icon.scss | 10 ++ src/components/skeleton/_skeleton-text.scss | 15 +++ src/components/skeleton/_skeleton.scss | 6 + src/components/skeleton/skeleton.hbs | 124 ++++++++++++++++++ src/components/slider/_slider.scss | 18 +++ .../structured-list/_structured-list.scss | 34 +++++ src/components/tabs/_tabs.scss | 21 +++ src/components/tag/_tag.scss | 13 ++ src/components/text-area/_text-area.scss | 10 ++ src/components/text-input/_text-input.scss | 10 ++ src/components/toggle/_toggle.scss | 33 +++++ src/globals/scss/_helper-mixins.scss | 85 +++++++++++- src/globals/scss/_vars.scss | 4 + src/globals/scss/styles.scss | 1 + 29 files changed, 590 insertions(+), 15 deletions(-) create mode 100644 src/components/data-table-v2/_data-table-v2-skeleton.scss create mode 100644 src/components/skeleton/_skeleton-icon.scss create mode 100644 src/components/skeleton/_skeleton-text.scss create mode 100644 src/components/skeleton/_skeleton.scss create mode 100644 src/components/skeleton/skeleton.hbs diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 6fb6cbfcd136..ece3d869d341 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -82,22 +82,52 @@ @include typescale('zeta'); } } -} -.#{$prefix}--accordion__item--active { - overflow: visible; + .#{$prefix}--accordion__item--active { + overflow: visible; - .#{$prefix}--accordion__content { - padding-top: $spacing-md; - padding-bottom: $spacing-lg; - height: auto; - visibility: visible; - opacity: 1; - transition: all $transition--expansion $carbon--ease-in; + .#{$prefix}--accordion__content { + padding-top: $spacing-md; + padding-bottom: $spacing-lg; + height: auto; + visibility: visible; + opacity: 1; + transition: all $transition--expansion $carbon--ease-in; + } + + .#{$prefix}--accordion__arrow { + transform: rotate(90deg); + fill: $brand-01; + } } - .#{$prefix}--accordion__arrow { - transform: rotate(90deg); - fill: $brand-01; + // Skeleton state + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading, + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button { + cursor: default; + } + + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow { + pointer-events: none; + fill: $ui-05; + cursor: default; + + &:hover, + &:focus, + &:active { + border: none; + outline: none; + cursor: default; + } + } + + .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow { + border: none; + outline: none; + cursor: default; + } + + .#{$prefix}--accordion__title.#{$prefix}--skeleton__text { + margin-bottom: 0; } } diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss index 2ae4b06bbece..ef45d98e48c5 100644 --- a/src/components/breadcrumb/_breadcrumb.scss +++ b/src/components/breadcrumb/_breadcrumb.scss @@ -63,4 +63,11 @@ } } } + + // Skeleton State + .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link { + @include skeleton; + width: rem(100px); + height: 1rem; + } } diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index d1f951b46595..3ce734a66283 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -144,4 +144,10 @@ .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger--primary { margin-left: $spacing-md; } + + // Skeleton State + .#{$prefix}--btn.#{$prefix}--skeleton { + @include skeleton; + width: rem(150px); + } } diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss index 378d2f8dda74..1ec7567e6546 100644 --- a/src/components/checkbox/_checkbox.scss +++ b/src/components/checkbox/_checkbox.scss @@ -160,4 +160,16 @@ } } } + + // Skeleton state + .#{$prefix}--checkbox-label.#{$prefix}--skeleton { + @include skeleton; + width: rem(100px); + height: rem(18px); + + &:after, + &:before { + border: none; + } + } } diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss index 4cef5686e137..7461abe3284e 100644 --- a/src/components/code-snippet/_code-snippet.scss +++ b/src/components/code-snippet/_code-snippet.scss @@ -208,4 +208,24 @@ .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback { right: auto; } + + // Skeleton State + .#{$prefix}--snippet--code.#{$prefix}--skeleton { + height: rem(98px); + } + + .#{$prefix}--snippet--terminal.#{$prefix}--skeleton { + height: rem(56px); + } + + .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container { + height: 100%; + } + + .#{$prefix}--snippet.#{$prefix}--skeleton code { + @include skeleton; + width: 100%; + height: 1rem; + display: block; + } } diff --git a/src/components/data-table-v2/_data-table-v2-skeleton.scss b/src/components/data-table-v2/_data-table-v2-skeleton.scss new file mode 100644 index 000000000000..f1f5faf7b601 --- /dev/null +++ b/src/components/data-table-v2/_data-table-v2-skeleton.scss @@ -0,0 +1,45 @@ +@import '../../globals/scss/import-once'; + +@include exports('data-table-v2-skeleton') { + .#{$prefix}--data-table-v2.#{$prefix}--skeleton { + th { + border-bottom: 1px solid $brand-01; + + &:nth-child(3n + 1) { + width: 10%; + } + + &:nth-child(3n + 2) { + width: 30%; + } + + &:nth-child(3n + 3) { + width: 15%; + } + } + + th span, + td span { + @include skeleton; + width: 75%; + height: 1rem; + display: block; + } + + tr:hover { + td { + border-color: $ui-04; + background: transparent; + + &:first-of-type, + &:last-of-type { + border-color: $ui-04; + } + } + } + } + + .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 { + pointer-events: none; + } +} diff --git a/src/components/data-table-v2/_data-table-v2.scss b/src/components/data-table-v2/_data-table-v2.scss index 11cdccd04b07..7aef754bef24 100644 --- a/src/components/data-table-v2/_data-table-v2.scss +++ b/src/components/data-table-v2/_data-table-v2.scss @@ -7,3 +7,4 @@ @import 'data-table-v2-expandable'; @import 'data-table-v2-sort'; @import 'data-table-v2-inline-edit'; +@import 'data-table-v2-skeleton'; diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss index e7e39215b300..c921585f3328 100644 --- a/src/components/date-picker/_date-picker.scss +++ b/src/components/date-picker/_date-picker.scss @@ -405,4 +405,21 @@ .flatpickr-next-month { padding-top: 5px; } + + // Skeleton State + .#{$prefix}--date-picker.#{$prefix}--skeleton input, + .#{$prefix}--date-picker__input.#{$prefix}--skeleton { + @include skeleton; + width: 100%; + + &::-webkit-input-placeholder { + color: transparent; + } + } + + .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label { + @include skeleton; + width: rem(75px); + height: rem(14px); + } } diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss index 9d623ed843be..625371aa587c 100644 --- a/src/components/dropdown/_dropdown.scss +++ b/src/components/dropdown/_dropdown.scss @@ -209,4 +209,9 @@ color: $text-01; } } + + // Skeleton State + .#{$prefix}--dropdown-v2.#{$prefix}--skeleton { + @include skeleton; + } } diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index e9c56a4d1c45..e92666dd74f8 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -42,6 +42,13 @@ opacity: 0.5; } + // Skeleton State + .#{$prefix}--label.#{$prefix}--skeleton { + @include skeleton; + width: rem(75px); + height: rem(14px); + } + input[data-invalid], textarea[data-invalid], select[data-invalid] { diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss index ce581948820b..72bc4712c72f 100644 --- a/src/components/number-input/_number-input.scss +++ b/src/components/number-input/_number-input.scss @@ -151,4 +151,15 @@ .#{$prefix}--number--light input[type='number'] { background: $field-02; } + + // Skeleton State + .#{$prefix}--number.#{$prefix}--skeleton { + @include skeleton; + width: 100%; + height: 2.5rem; + + input[type='number'] { + display: none; + } + } } diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index 438357cc3bd2..8c987efb70b0 100644 --- a/src/components/pagination/_pagination.scss +++ b/src/components/pagination/_pagination.scss @@ -175,4 +175,10 @@ $css--helpers: true; right: 0.3rem; } } + + // Skeleton state + .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text { + margin-right: 1rem; + margin-bottom: 0; + } } diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss index a16c9cfebe19..1b736f2cb8bd 100644 --- a/src/components/progress-indicator/_progress-indicator.scss +++ b/src/components/progress-indicator/_progress-indicator.scss @@ -108,4 +108,11 @@ background-color: $brand-01; } } + + // Skeleton State + .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label { + @include skeleton; + height: rem(12px); + width: rem(40px); + } } diff --git a/src/components/radio-button/_radio-button.scss b/src/components/radio-button/_radio-button.scss index 081fb4964a4b..4eb84be1b15b 100644 --- a/src/components/radio-button/_radio-button.scss +++ b/src/components/radio-button/_radio-button.scss @@ -67,4 +67,15 @@ .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance { @include focus-outline('blurred'); } + + // Skeleton State + .#{$prefix}--radio-button__label.#{$prefix}--skeleton { + @include skeleton; + width: rem(100px); + height: rem(18px); + } + + .#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance { + display: none; + } } diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss index e7774551f9cb..dc75d7762d7e 100644 --- a/src/components/search/_search.scss +++ b/src/components/search/_search.scss @@ -155,4 +155,14 @@ .#{$prefix}--search-view--hidden { display: none; } + + .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input, + .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input { + @include skeleton; + width: 100%; + + &::-webkit-input-placeholder { + color: transparent; + } + } } diff --git a/src/components/skeleton/_skeleton-icon.scss b/src/components/skeleton/_skeleton-icon.scss new file mode 100644 index 000000000000..ef59f7c5b5e6 --- /dev/null +++ b/src/components/skeleton/_skeleton-icon.scss @@ -0,0 +1,10 @@ +@import '../../globals/scss/import-once'; + +@include exports('skeleton-icon') { + .#{$prefix}--icon--skeleton { + @include skeleton; + display: inline-block; + width: rem(16px); + height: rem(16px); + } +} diff --git a/src/components/skeleton/_skeleton-text.scss b/src/components/skeleton/_skeleton-text.scss new file mode 100644 index 000000000000..dc04c4cfb3a4 --- /dev/null +++ b/src/components/skeleton/_skeleton-text.scss @@ -0,0 +1,15 @@ +@import '../../globals/scss/import-once'; + +@include exports('skeleton-text') { + .#{$prefix}--skeleton__text { + @include skeleton; + width: 100%; + height: 1rem; + margin-bottom: $spacing-xs; + } + + .#{$prefix}--skeleton__heading { + height: 1.5rem; + margin-bottom: $spacing-sm; + } +} diff --git a/src/components/skeleton/_skeleton.scss b/src/components/skeleton/_skeleton.scss new file mode 100644 index 000000000000..d0cd65e39524 --- /dev/null +++ b/src/components/skeleton/_skeleton.scss @@ -0,0 +1,6 @@ +@import '../../globals/scss/vars'; +@import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; + +@import 'skeleton-text'; +@import 'skeleton-icon'; diff --git a/src/components/skeleton/skeleton.hbs b/src/components/skeleton/skeleton.hbs new file mode 100644 index 000000000000..9853f6f3a993 --- /dev/null +++ b/src/components/skeleton/skeleton.hbs @@ -0,0 +1,124 @@ + +

    Skeleton Text

    +
    +
    + +

    Button

    + +  +  + +

    Label

    + + +

    Breadcrumb

    +
    +
    +   +
    +
    +   +
    +
    +   +
    +
    + +

    Dropdown

    +
    +
    + +
    +
    + +

    Progress Indicator

    +
      +
    • + + + + + +

      + +
      • +
    • + + + + + +

      + +
      • +
    • + + + + + +

      + +
      • +
    • + + + + + +

      + +
      • +
    + +

    Toggle

    +
    + + +
    + +

    Small Toggle

    +
    + + +
    + +

    Slider

    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +

    Tag

    + + +

    Tabs

    + + +

    Icon

    +
    \ No newline at end of file diff --git a/src/components/slider/_slider.scss b/src/components/slider/_slider.scss index b3c0555f590f..51da5ae4143c 100644 --- a/src/components/slider/_slider.scss +++ b/src/components/slider/_slider.scss @@ -124,4 +124,22 @@ display: none; } } + + // Skeleton state + .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__range-label { + @include skeleton; + width: rem(20px); + height: rem(12px); + } + + .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__track { + cursor: default; + pointer-events: none; + } + + .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb { + left: 50%; + cursor: default; + pointer-events: none; + } } diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss index 57a68296d247..7422e4de1561 100644 --- a/src/components/structured-list/_structured-list.scss +++ b/src/components/structured-list/_structured-list.scss @@ -128,6 +128,40 @@ } } + // Skeleton State + .#{$prefix}--structured-list.#{$prefix}--skeleton { + .#{$prefix}--structured-list-th { + &:first-child { + width: 8%; + } + + &:nth-child(3n + 2) { + width: 30%; + } + + &:nth-child(3n + 3) { + width: 15%; + } + } + + .bx--structured-list-th span { + @include skeleton; + width: 75%; + height: 1rem; + display: block; + } + } + + .#{$prefix}--structured-list.#{$prefix}--structured-list--border.#{$prefix}--skeleton { + .#{$prefix}--structured-list-th:first-child { + width: 5%; + + span { + display: none; + } + } + } + // Deprecated class .#{$prefix}--structured-list-content { @include typescale('zeta'); diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index bb8ae340c8ca..1f754e3fd986 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -179,4 +179,25 @@ } } } + + // Skeleton state + .#{$prefix}--tabs.#{$prefix}--skeleton { + pointer-events: none; + cursor: default; + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link { + @include skeleton; + width: rem(75px); + height: rem(12px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger { + @include skeleton; + width: rem(100px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg { + @include hidden; + } } diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 0693e1af5f51..278e10127cd2 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -50,4 +50,17 @@ .#{$prefix}--tag--private { @include tag-theme($color__yellow-10, $color__yellow-60); } + + // Skeleton state + .#{$prefix}--tag.#{$prefix}--skeleton { + @include tag-theme($color__gray-1, $color__navy-gray-4); + width: rem(60px); + + &:after { + @include skeleton; + content: ''; + height: rem(6px); + width: 100%; + } + } } diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss index 894ee8bd6b27..ddf38dd0d770 100644 --- a/src/components/text-area/_text-area.scss +++ b/src/components/text-area/_text-area.scss @@ -76,4 +76,14 @@ .#{$prefix}--text-area--light { background: $field-02; } + + // Skeleton State + #{$prefix}--text-area.#{$prefix}--skeleton { + @include skeleton; + height: rem(100px); + + &::-webkit-input-placeholder { + color: transparent; + } + } } diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss index a8472e6a8e9c..8b04f043de71 100644 --- a/src/components/text-input/_text-input.scss +++ b/src/components/text-input/_text-input.scss @@ -77,4 +77,14 @@ .#{$prefix}--text-input--light { background: $field-02; } + + // Skeleton State + .#{$prefix}--text-input.#{$prefix}--skeleton { + @include skeleton; + width: 100%; + + &::-webkit-input-placeholder { + color: transparent; + } + } } diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss index c8ad3419fb0c..11c51b6d863f 100644 --- a/src/components/toggle/_toggle.scss +++ b/src/components/toggle/_toggle.scss @@ -174,4 +174,37 @@ transition: $transition--base $carbon--standard-easing; } } + + // Skeleton state + .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label { + cursor: default; + } + + .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance { + &:before, + &:after { + background-color: $brand-01; + border-color: $brand-01; + cursor: default; + } + } + + .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left, + .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right { + @include skeleton; + width: rem(20px); + height: rem(12px); + } + + .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance { + &:before { + background: transparent; + border-color: $ui-05; + } + + &:after { + background-color: $ui-05; + border: none; + } + } } diff --git a/src/globals/scss/_helper-mixins.scss b/src/globals/scss/_helper-mixins.scss index 28831b9b3ccd..fce392bed627 100644 --- a/src/globals/scss/_helper-mixins.scss +++ b/src/globals/scss/_helper-mixins.scss @@ -105,12 +105,93 @@ $deprecations--reasons: append($deprecations--reasons, $reason) !global; @content; } @else { - @warn 'Deprecated code was found, this code will be removed before the next release of Carbon. -REASON: #{$reason}'; + @warn 'Deprecated code was found, this code will be removed before the next release of Carbon. REASON: #{$reason}'; @content; } } +// 💀 Skeleton loading animation + +@mixin skeleton { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: $skeleton; + + &:hover, + &:focus, + &:active { + border: none; + outline: none; + cursor: default; + } + + &:before { + content: ''; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + opacity: 0.3; + background: $skeleton; + animation: 3000ms ease-in-out skeleton infinite; + } +} + +@keyframes skeleton { + 0% { + width: 0%; + left: 0; + right: auto; + opacity: 0.3; + } + 20% { + width: 100%; + left: 0; + right: auto; + opacity: 1; + } + 28% { + width: 100%; + left: auto; + right: 0; + } + 51% { + width: 0%; + left: auto; + right: 0; + } + 58% { + width: 0%; + left: auto; + right: 0; + } + 82% { + width: 100%; + left: auto; + right: 0; + } + 83% { + width: 100%; + left: 0; + right: auto; + } + 96% { + width: 0%; + left: 0; + right: auto; + } + 100% { + width: 0%; + left: 0; + right: auto; + opacity: 0.3; + } +} + //---------------------------------------------- // Deprecated // --------------------------------------------- diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss index d94fece39d81..a5eef158d188 100644 --- a/src/globals/scss/_vars.scss +++ b/src/globals/scss/_vars.scss @@ -110,3 +110,7 @@ $radio-border-width: 2px !default; // Structured Theme Variables $structured-list-padding: 2rem !default; $structured-list-text-transform: none !default; + +// Skeleton Loading + +$skeleton: rgba($color__blue-51, 0.1) !default; //old $field-01 diff --git a/src/globals/scss/styles.scss b/src/globals/scss/styles.scss index 9fa964a35a65..970ea3665c25 100644 --- a/src/globals/scss/styles.scss +++ b/src/globals/scss/styles.scss @@ -98,6 +98,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be @import '../../components/tile/tile'; @import '../../components/lightbox/lightbox'; @import '../../components/carousel/carousel'; +@import '../../components/skeleton/skeleton'; //------------------------------------- // 🙈 Hidden (Not exposed on website) From 9c8c111c332206960c7224c6c1e4fa3a062f40fc Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 7 May 2018 12:58:22 -0500 Subject: [PATCH 12/18] fix(skeleton-states): Add helper-mixins import to components using skeleton states (#755) --- src/components/breadcrumb/_breadcrumb.scss | 1 + src/components/button/_button.scss | 1 + src/components/code-snippet/_code-snippet.scss | 1 + src/components/pagination/_pagination.scss | 1 + src/components/progress-indicator/_progress-indicator.scss | 1 + src/components/structured-list/_structured-list.scss | 1 + src/components/tag/_tag.scss | 1 + 7 files changed, 7 insertions(+) diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss index ef45d98e48c5..3ba38a832718 100644 --- a/src/components/breadcrumb/_breadcrumb.scss +++ b/src/components/breadcrumb/_breadcrumb.scss @@ -3,6 +3,7 @@ @import '../../globals/scss/mixins'; @import '../../globals/scss/typography'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/import-once'; @import '../../globals/scss/css--typography'; @import '../link/link'; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 3ce734a66283..a96e310f78e2 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -2,6 +2,7 @@ @import '../../globals/scss/colors'; @import '../../globals/scss/typography'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/import-once'; @import 'mixins'; @import '../../globals/scss/css--reset'; diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss index 7461abe3284e..a89a1218f19f 100644 --- a/src/components/code-snippet/_code-snippet.scss +++ b/src/components/code-snippet/_code-snippet.scss @@ -2,6 +2,7 @@ @import '../../globals/scss/colors'; @import '../../globals/scss/typography'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/import-once'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/css--reset'; diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index 8c987efb70b0..e68bb7e46835 100644 --- a/src/components/pagination/_pagination.scss +++ b/src/components/pagination/_pagination.scss @@ -3,6 +3,7 @@ $css--helpers: true; @import '../../globals/scss/vars'; @import '../../globals/scss/colors'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/typography'; @import '../../globals/scss/layout'; @import '../../globals/scss/css--helpers'; diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss index 1b736f2cb8bd..95435f5f5c38 100644 --- a/src/components/progress-indicator/_progress-indicator.scss +++ b/src/components/progress-indicator/_progress-indicator.scss @@ -1,6 +1,7 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/colors'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/css--reset'; @import '../../globals/scss/layout'; @import '../../globals/scss/typography'; diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss index 7422e4de1561..8013b00ea438 100644 --- a/src/components/structured-list/_structured-list.scss +++ b/src/components/structured-list/_structured-list.scss @@ -1,5 +1,6 @@ @import '../../globals/scss/colors'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/css--reset'; @import '../../globals/scss/typography'; @import '../../globals/scss/mixins'; diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 278e10127cd2..1ddd1db22c92 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -1,6 +1,7 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/colors'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/typography'; @import '../../globals/scss/import-once'; @import 'mixins'; From 67006a329abbe897cfabb39553b98be9efd51e7d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 8 May 2018 09:25:58 -0500 Subject: [PATCH 13/18] fix(data-table): update data-table to use the new search component (#754) --- .../data-table-v2/_data-table-v2-action.scss | 6 ------ .../data-table-v2/data-table-v2--expandable.hbs | 13 ++++++++----- .../data-table-v2/data-table-v2--pagination.hbs | 13 ++++++++----- src/components/data-table-v2/data-table-v2.hbs | 13 ++++++++----- 4 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss index 6710d66b4987..81f0b5bd1000 100644 --- a/src/components/data-table-v2/_data-table-v2-action.scss +++ b/src/components/data-table-v2/_data-table-v2-action.scss @@ -16,12 +16,6 @@ outline: 0; } } - - .#{$prefix}--search-close { - height: 10px; - width: 10px; - top: calc(50% - 5px); - } } .#{$prefix}--toolbar-content { diff --git a/src/components/data-table-v2/data-table-v2--expandable.hbs b/src/components/data-table-v2/data-table-v2--expandable.hbs index 828c1cb2f24f..e73f2142ba07 100644 --- a/src/components/data-table-v2/data-table-v2--expandable.hbs +++ b/src/components/data-table-v2/data-table-v2--expandable.hbs @@ -7,11 +7,14 @@ - - - - - + + + diff --git a/src/components/data-table-v2/data-table-v2--pagination.hbs b/src/components/data-table-v2/data-table-v2--pagination.hbs index 3c1e522eaa2a..0432092f697e 100644 --- a/src/components/data-table-v2/data-table-v2--pagination.hbs +++ b/src/components/data-table-v2/data-table-v2--pagination.hbs @@ -36,11 +36,14 @@ - - - - - + + + diff --git a/src/components/data-table-v2/data-table-v2.hbs b/src/components/data-table-v2/data-table-v2.hbs index 6faa607bc914..ff79b5e123c3 100644 --- a/src/components/data-table-v2/data-table-v2.hbs +++ b/src/components/data-table-v2/data-table-v2.hbs @@ -37,11 +37,14 @@ - - - - - + + + From 447c9ecf3baaf3c9b115a2a945d95c47ff624022 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 8 May 2018 10:19:22 -0500 Subject: [PATCH 14/18] fix(structured-list): Update header alignment to bottom to match designs (#753) --- src/components/structured-list/_structured-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss index 8013b00ea438..79fd393335e2 100644 --- a/src/components/structured-list/_structured-list.scss +++ b/src/components/structured-list/_structured-list.scss @@ -92,7 +92,7 @@ height: rem(40px); text-align: left; text-transform: $structured-list-text-transform; - vertical-align: middle; + vertical-align: bottom; } .#{$prefix}--structured-list-tbody { From 216a3d80029500046c6ec62a47c63c4e2794e7be Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 11 May 2018 09:56:22 -0500 Subject: [PATCH 15/18] feat(truncation): add truncation classes (#757) * feat(truncation): add truncation classes * fix(truncation): update truncation classes to be more semantic * fix(truncation): use prefix variable --- src/globals/scss/_helper-classes.scss | 16 ++++++++++++++++ src/globals/scss/_layout.scss | 14 ++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 src/globals/scss/_helper-classes.scss diff --git a/src/globals/scss/_helper-classes.scss b/src/globals/scss/_helper-classes.scss new file mode 100644 index 000000000000..2e3273e2030c --- /dev/null +++ b/src/globals/scss/_helper-classes.scss @@ -0,0 +1,16 @@ +.#{$prefix}--text-truncate--end { + width: 100%; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.#{$prefix}--text-truncate--front { + width: 100%; + display: inline-block; + direction: rtl; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} diff --git a/src/globals/scss/_layout.scss b/src/globals/scss/_layout.scss index 75d92619bb0b..0655f4d8dc6e 100644 --- a/src/globals/scss/_layout.scss +++ b/src/globals/scss/_layout.scss @@ -1,6 +1,16 @@ -$breakpoints: (bp--xs--major: 500px, bp--sm--major: 768px, bp--md--major: 992px, bp--lg--major: 1200px); +@import 'helper-classes'; -$padding: ('mobile': 3%, 'xs': 5%); +$breakpoints: ( + bp--xs--major: 500px, + bp--sm--major: 768px, + bp--md--major: 992px, + bp--lg--major: 1200px +); + +$padding: ( + 'mobile': 3%, + 'xs': 5% +); @function padding($value) { @if map-has-key($padding, $value) { From f4148aa1e43ec2a3e475f5b540fc14c9fd8f59a5 Mon Sep 17 00:00:00 2001 From: Tayler Aitken Date: Mon, 14 May 2018 10:35:35 -0500 Subject: [PATCH 16/18] fix(structured-list): fixed column header text size (#766) * fix(structured-list): fixed column header text size * chore(structured-list): deleted extra file --- src/components/structured-list/_structured-list.scss | 2 +- src/components/structured-list/structured-list.hbs | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss index 79fd393335e2..ad4d314d721b 100644 --- a/src/components/structured-list/_structured-list.scss +++ b/src/components/structured-list/_structured-list.scss @@ -86,7 +86,7 @@ .#{$prefix}--structured-list-th { @include reset; @include padding-th; - @include typescale('zeta'); + @include typescale('omega'); display: table-cell; font-weight: 600; height: rem(40px); diff --git a/src/components/structured-list/structured-list.hbs b/src/components/structured-list/structured-list.hbs index 96cf4c3931ef..d087498642a4 100644 --- a/src/components/structured-list/structured-list.hbs +++ b/src/components/structured-list/structured-list.hbs @@ -1,9 +1,9 @@
    -
    ColumnA
    -
    ColumnB
    -
    ColumnC
    +
    Column1
    +
    Column2
    +
    Column3
    From 5a800e5c143531e717d2ca39b9325384d10abd01 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 14 May 2018 11:38:43 -0500 Subject: [PATCH 17/18] fix(forms): Add helper-mixins import (#767) --- src/components/form/_form.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index e92666dd74f8..8b48cfbbf6b5 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -1,6 +1,7 @@ @import '../../globals/scss/colors'; @import '../../globals/scss/typography'; @import '../../globals/scss/spacing'; +@import '../../globals/scss/helper-mixins'; @import '../../globals/scss/css--reset'; @import '../../globals/scss/import-once'; From 5bd382435a4c3f6cc35a113790d8f0e84df5919e Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 14 May 2018 11:48:47 -0500 Subject: [PATCH 18/18] fix(helper-classes): import vars file (#768) --- src/globals/scss/_helper-classes.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/globals/scss/_helper-classes.scss b/src/globals/scss/_helper-classes.scss index 2e3273e2030c..163dfe8ddffe 100644 --- a/src/globals/scss/_helper-classes.scss +++ b/src/globals/scss/_helper-classes.scss @@ -1,3 +1,5 @@ +@import 'vars'; + .#{$prefix}--text-truncate--end { width: 100%; display: inline-block;