From 7781dc9ab225885c83c0b84b2303f9d6aee7318a Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Fri, 4 May 2018 11:33:29 -0500 Subject: [PATCH] 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.