From 9712d9ed682e366d42bcc2921eb12356d9cb7c99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 20 Feb 2018 11:04:51 -0300 Subject: [PATCH 001/309] Add search results bar in ClayManagementToolbar | Fixes #572 --- .../src/ClayManagementToolbar.js | 18 +++++++ .../src/ClayManagementToolbar.soy | 50 +++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js index 8a67d9989a..9b20d2ab83 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.js @@ -56,6 +56,15 @@ class ClayManagementToolbar extends Component { this._showSearchMobile = false; } + /** + * Continues the propagation of the clear button clicked event + * @param {!Event} event + * @private + */ + _handleClearResultsClick(event) { + this.emit('clearButtonClicked', event); + } + /** * Continues the propagation of the plus button clicked event * @param {!Event} event @@ -275,6 +284,15 @@ ClayManagementToolbar.STATE = { */ searchInputName: Config.string(), + /** + * Value of the search input. + * @instance + * @memberof ClayManagementToolbar + * @type {?string|undefined} + * @default undefined + */ + searchValue: Config.string(), + /** * Flag to indicate if the managment toolbar will control the selection of * elements. diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy index 6d3790b818..f50a38fde3 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy @@ -7,6 +7,7 @@ {@param spritemap: string} {@param? _handleActionClicked: any} {@param? _handleCloseMobileSearchClick: any} + {@param? _handleClearResultsClick: any} {@param? _handleCreationButtonClicked: any} {@param? _handleDeselectAllClicked: any} {@param? _handleFilterDoneButtonClick: any} @@ -57,6 +58,7 @@ {@param? searchActionURL: string} {@param? searchFormName: string} {@param? searchInputName: string} + {@param? searchValue: string} {@param? selectable: bool} {@param? selectedItems: number} {@param? showInfoButton: bool} @@ -89,6 +91,7 @@ {else} {call .default} {param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /} + {param _handleClearResultsClick: $_handleClearResultsClick /} {param _handleCreationButtonClicked: $_handleCreationButtonClicked /} {param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /} {param _handleInfoButtonClicked: $_handleInfoButtonClicked /} @@ -108,11 +111,13 @@ {param searchActionURL: $searchActionURL /} {param searchFormName: $searchFormName /} {param searchInputName: $searchInputName /} + {param searchValue: $searchValue /} {param selectable: $selectable /} {param showInfoButton: $showInfoButton /} {param showSearch: $showSearch != false /} {param sortingOrder: $sortingOrder /} {param spritemap: $spritemap /} + {param totalItems: $totalItems /} {param viewTypes: $viewTypes /} {/call} {/if} @@ -245,6 +250,7 @@ {template .default} {@param spritemap: string} {@param? _handleCloseMobileSearchClick: any} + {@param? _handleClearResultsClick: any} {@param? _handleCreationButtonClicked: any} {@param? _handleFilterDoneButtonClick: any} {@param? _handleInfoButtonClicked: any} @@ -285,10 +291,12 @@ {@param? searchActionURL: string} {@param? searchFormName: string} {@param? searchInputName: string} + {@param? searchValue: string} {@param? selectable: bool} {@param? showInfoButton: bool} {@param? showSearch: bool} {@param? sortingOrder: string} + {@param? totalItems: number} {@param? viewTypes: list<[ active: bool, disabled: bool, @@ -475,6 +483,14 @@ + + {if $searchValue and $totalItems > 0} + {call .tbar} + {param _handleClearResultsClick: $_handleClearResultsClick /} + {param searchValue: $searchValue /} + {param totalItems: $totalItems /} + {/call} + {/if} {/template} /** @@ -523,6 +539,38 @@ {/if} {/template} +/** + * This renders the search results bar. + */ +{template .tbar} + {@param? _handleClearResultsClick: any} + {@param? searchValue: string} + {@param? totalItems: number} + + +{/template} + /** * This renders the search form. */ @@ -535,6 +583,7 @@ {@param? searchActionURL: string} {@param? searchFormName: string} {@param? searchInputName: string} + {@param? searchValue: string} {let $searchFormContent kind="html"} {let $searchFormAttributes kind="attributes"} @@ -563,6 +612,7 @@ placeholder="Search for..." ref="search" type="text" + value="{$searchValue}" {/let} From 96280e6202f4bab354504104d44805cb1e8523ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 20 Feb 2018 11:05:34 -0300 Subject: [PATCH 002/309] Update demos | Fixes #572 --- .../clay-management-toolbar/demos/a11y.html | 25 +++++++++++--- .../clay-management-toolbar/demos/index.html | 33 ++++++++++++++++--- 2 files changed, 50 insertions(+), 8 deletions(-) diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html index 824ce048e0..4c2c59bd25 100644 --- a/packages/clay-management-toolbar/demos/a11y.html +++ b/packages/clay-management-toolbar/demos/a11y.html @@ -59,10 +59,12 @@

Without Search

-
-
-
-
+
+
+

With search results bar

+
+
+
diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html index b39cd7e0fb..7fa2d76a1b 100644 --- a/packages/clay-management-toolbar/demos/index.html +++ b/packages/clay-management-toolbar/demos/index.html @@ -59,10 +59,12 @@

Without Search

-
-
-
-
+
+
+

With search results bar

+
+
+
From a4cd638385527d988c68eb71754a2458ee68c56f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 20 Feb 2018 11:06:01 -0300 Subject: [PATCH 003/309] Add tests | Fixes #572 --- .../src/__tests__/ClayManagementToolbar.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js index 3499e2fecd..4422a81050 100644 --- a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js @@ -391,6 +391,29 @@ describe('ClayManagementToolbar', function() { expect(managementToolbar).toMatchSnapshot(); }); + it('should render a management toolbar with search results bar', () => { + managementToolbar = new ClayManagementToolbar({ + id: 'myId', + searchValue: 'foo', + selectable: true, + spritemap: spritemap, + totalItems: 10, + }); + + expect(managementToolbar).toMatchSnapshot(); + }); + + it('should render a management toolbar with search results bar only when totalItems is greater than zero', () => { + managementToolbar = new ClayManagementToolbar({ + id: 'myId', + searchValue: 'foo', + selectable: true, + spritemap: spritemap, + }); + + expect(managementToolbar).toMatchSnapshot(); + }); + it('should render a selectable management toolbar and emit an event on checkbox click', () => { managementToolbar = new ClayManagementToolbar({ selectable: true, @@ -644,4 +667,23 @@ describe('ClayManagementToolbar', function() { expect.any(Object) ); }); + + it('should render a management toolbar and emit an event on clear button click', () => { + managementToolbar = new ClayManagementToolbar({ + searchValue: 'foo', + selectable: true, + spritemap: spritemap, + totalItems: 10, + }); + + const spy = jest.spyOn(managementToolbar, 'emit'); + + managementToolbar.refs.clearSearch.element.click(); + + expect(spy).toHaveBeenCalled(); + expect(spy).toHaveBeenCalledWith( + 'clearButtonClicked', + expect.any(Object) + ); + }); }); From 218e55d7f84db9766bad30b504484b4322de52f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 20 Feb 2018 11:10:50 -0300 Subject: [PATCH 004/309] Adds a div to render the component. | Fixes #572 --- .../src/ClayManagementToolbar.soy | 64 ++++++++++--------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy index f50a38fde3..fe85e1f028 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy @@ -89,37 +89,39 @@ {param totalItems: $totalItems /} {/call} {else} - {call .default} - {param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /} - {param _handleClearResultsClick: $_handleClearResultsClick /} - {param _handleCreationButtonClicked: $_handleCreationButtonClicked /} - {param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /} - {param _handleInfoButtonClicked: $_handleInfoButtonClicked /} - {param _handleOpenMobileSearchClick: $_handleOpenMobileSearchClick /} - {param _handleSearchSearchClick: $_handleSearchSearchClick /} - {param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /} - {param _handleSortingButtonClicked: $_handleSortingButtonClicked /} - {param _handleViewTypeClicked: $_handleViewTypeClicked /} - {param _showSearchMobile: $_showSearchMobile /} - {param contentRenderer: $contentRenderer ?: '' /} - {param creationMenu: $creationMenu /} - {param disabled: $totalItems == 0 /} - {param elementClasses: $elementClasses /} - {param filterItems: $filterItems /} - {param hideFiltersDoneButton: $hideFiltersDoneButton /} - {param id: $id /} - {param searchActionURL: $searchActionURL /} - {param searchFormName: $searchFormName /} - {param searchInputName: $searchInputName /} - {param searchValue: $searchValue /} - {param selectable: $selectable /} - {param showInfoButton: $showInfoButton /} - {param showSearch: $showSearch != false /} - {param sortingOrder: $sortingOrder /} - {param spritemap: $spritemap /} - {param totalItems: $totalItems /} - {param viewTypes: $viewTypes /} - {/call} +
+ {call .default} + {param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /} + {param _handleClearResultsClick: $_handleClearResultsClick /} + {param _handleCreationButtonClicked: $_handleCreationButtonClicked /} + {param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /} + {param _handleInfoButtonClicked: $_handleInfoButtonClicked /} + {param _handleOpenMobileSearchClick: $_handleOpenMobileSearchClick /} + {param _handleSearchSearchClick: $_handleSearchSearchClick /} + {param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /} + {param _handleSortingButtonClicked: $_handleSortingButtonClicked /} + {param _handleViewTypeClicked: $_handleViewTypeClicked /} + {param _showSearchMobile: $_showSearchMobile /} + {param contentRenderer: $contentRenderer ?: '' /} + {param creationMenu: $creationMenu /} + {param disabled: $totalItems == 0 /} + {param elementClasses: $elementClasses /} + {param filterItems: $filterItems /} + {param hideFiltersDoneButton: $hideFiltersDoneButton /} + {param id: $id /} + {param searchActionURL: $searchActionURL /} + {param searchFormName: $searchFormName /} + {param searchInputName: $searchInputName /} + {param searchValue: $searchValue /} + {param selectable: $selectable /} + {param showInfoButton: $showInfoButton /} + {param showSearch: $showSearch != false /} + {param sortingOrder: $sortingOrder /} + {param spritemap: $spritemap /} + {param totalItems: $totalItems /} + {param viewTypes: $viewTypes /} + {/call} +
{/if} {/template} From 73bcada2bc56280d7d8923737f45d7fd5667ad4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 20 Feb 2018 14:55:30 -0300 Subject: [PATCH 005/309] Regen snapshots | Fixes #572 --- .../__snapshots__/ClayDatasetDisplay.js.snap | 1644 +++++++-------- .../ClayManagementToolbar.js.snap | 1806 +++++++++-------- 2 files changed, 1820 insertions(+), 1630 deletions(-) diff --git a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap index 5f625abf74..bdfcfbf4ae 100644 --- a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap +++ b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap @@ -2,103 +2,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view on management toolbar view type click 1`] = `
- + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -689,103 +691,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view on management toolbar view type click 2`] = `
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -1376,103 +1380,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view on management toolbar view type click 3`] = `
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -2239,103 +2245,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped items and select an item on click 1`] = `
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -2766,103 +2774,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and list of type \`cards\` active 1`] = `
    - + + +
    +
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    +
    + +
      @@ -3623,103 +3633,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and list of type \`list\` active 1`] = `
      -
    -
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
      @@ -4618,103 +4630,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and list of type \`table\` active 1`] = `
      -
    -
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -5305,103 +5319,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and select an item on click 1`] = `
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -6486,103 +6502,105 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped items 1`] = `
    - + +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • + +
    + +
    diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap index 3df4e51628..3afd28faee 100644 --- a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap +++ b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap @@ -1,101 +1,103 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ClayManagementToolbar should render a disabled management toolbar 1`] = ` - +
    +
      +
    • + +
      • +
    • + +
      • +
    • +
      + +
      +
      • +
    +
    + +
    @@ -210,32 +212,71 @@ exports[`ClayManagementToolbar should render a management toolbar with actions i `; exports[`ClayManagementToolbar should render a management toolbar with ascending sorting 1`] = ` - +
    `; exports[`ClayManagementToolbar should render a management toolbar with classes in active state 1`] = ` @@ -315,117 +321,121 @@ exports[`ClayManagementToolbar should render a management toolbar with classes i `; exports[`ClayManagementToolbar should render a management toolbar with descending sorting 1`] = ` - + +
    `; exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items and no done button 1`] = ` - + +
    • @@ -439,65 +449,67 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d `; exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type checkbox 1`] = ` -
      • +
    +
    +
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
      +
    • + +
      • +
    -
      -
    • - -
      • -
    - - + +
    @@ -532,65 +544,67 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d `; exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type item 1`] = ` - + +
    @@ -611,65 +625,67 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d `; exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type radio 1`] = ` - + +
    @@ -719,29 +735,31 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d `; exports[`ClayManagementToolbar should render a management toolbar with id 1`] = ` - + +
    `; exports[`ClayManagementToolbar should render a management toolbar with id in active state 1`] = ` @@ -772,38 +790,40 @@ exports[`ClayManagementToolbar should render a management toolbar with id in act `; exports[`ClayManagementToolbar should render a management toolbar with info button 1`] = ` - + +
    `; exports[`ClayManagementToolbar should render a management toolbar with info button in active state 1`] = ` @@ -844,65 +864,69 @@ exports[`ClayManagementToolbar should render a management toolbar with info butt `; exports[`ClayManagementToolbar should render a management toolbar with no search 1`] = ` - +
    + +
    `; exports[`ClayManagementToolbar should render a management toolbar with plus button with more than one option 1`] = ` - + +
  • +
    + +
    +
    • + +
    + +
    • @@ -916,56 +940,58 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt `; exports[`ClayManagementToolbar should render a management toolbar with plus button with one option 1`] = ` - +
      • +
    • +
      + +
      +
      • +
    +
    + +
    • @@ -976,112 +1002,73 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt `; exports[`ClayManagementToolbar should render a management toolbar with search action url 1`] = ` - + +
    `; exports[`ClayManagementToolbar should render a management toolbar with search form name 1`] = ` - + + `; exports[`ClayManagementToolbar should render a management toolbar with search input name 1`] = ` - -`; - -exports[`ClayManagementToolbar should render a management toolbar with selection enabled 1`] = ` - + +`; + +exports[`ClayManagementToolbar should render a management toolbar with search results bar 1`] = ` +
    + + +
    +`; + +exports[`ClayManagementToolbar should render a management toolbar with search results bar only when totalItems is greater than zero 1`] = ` +
    + +
    +`; + +exports[`ClayManagementToolbar should render a management toolbar with selection enabled 1`] = ` +
    + +
    `; exports[`ClayManagementToolbar should render a management toolbar with state active 1`] = ` @@ -1135,56 +1299,58 @@ exports[`ClayManagementToolbar should render a management toolbar with state act `; exports[`ClayManagementToolbar should render a management toolbar with view types 1`] = ` - + +
  • +
    + +
    +
    • + + + +
    • @@ -1219,74 +1385,123 @@ exports[`ClayManagementToolbar should render a management toolbar with view type `; exports[`ClayManagementToolbar should render a managment toolbar with plus button 1`] = ` - + +
    `; exports[`ClayManagementToolbar should render a managment toolbar with plus link 1`] = ` - + `; From 3a51a13110dba69df0ad12aba30a25a403efa44b Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 20 Feb 2018 14:55:32 -0800 Subject: [PATCH 006/309] Update: (Fixes #590) Mixin `clay-custom-grid-columns` added option to configure `flex-basis` to work around Webkit flexbox bug https://bugs.webkit.org/show_bug.cgi?id=136041 --- packages/clay/src/scss/mixins/_grid.scss | 4 ++++ packages/clay/src/scss/variables/_cards.scss | 2 ++ 2 files changed, 6 insertions(+) diff --git a/packages/clay/src/scss/mixins/_grid.scss b/packages/clay/src/scss/mixins/_grid.scss index 6f3ad6d7fb..1a4e354eea 100644 --- a/packages/clay/src/scss/mixins/_grid.scss +++ b/packages/clay/src/scss/mixins/_grid.scss @@ -56,6 +56,9 @@ @if ($custom-grid-props && $enabled) { display: block; + flex-basis: map-get(map-get($custom-grid-props, base), min-width); + flex-grow: 1; + max-width: map-get(map-get($custom-grid-props, base), max-width); min-width: map-get(map-get($custom-grid-props, base), min-width); padding-left: map-get(map-get($custom-grid-props, base), padding-left); padding-right: map-get(map-get($custom-grid-props, base), padding-right); @@ -67,6 +70,7 @@ @if ($next) { @media (min-width: map-get(map-get($custom-grid-props, $next), breakpoint)) { + flex-basis: map-get(map-get($custom-grid-props, $next), flex-basis); max-width: map-get(map-get($custom-grid-props, $next), max-width); min-width: map-get(map-get($custom-grid-props, $next), min-width); padding-left: map-get(map-get($custom-grid-props, $next), padding-left); diff --git a/packages/clay/src/scss/variables/_cards.scss b/packages/clay/src/scss/variables/_cards.scss index a7df2c25fc..14791c410c 100644 --- a/packages/clay/src/scss/variables/_cards.scss +++ b/packages/clay/src/scss/variables/_cards.scss @@ -92,10 +92,12 @@ $card-page-item-asset: map-merge(( ), sm: ( breakpoint: map-get($grid-breakpoints, sm), // 576px + flex-basis: 50%, max-width: 50% ), md: ( breakpoint: map-get($grid-breakpoints, md), // 768px + flex-basis: 200px, max-width: 33.3333% ), lg: ( From f88b82635238279cbffa133274d22b56e403c125 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 20 Feb 2018 15:25:23 -0800 Subject: [PATCH 007/309] Breaking: (Fixes #592) Remove references to BS4's `.form-inline` component, use `.input-group` component for inline forms --- .../clay/src/scss/components/_navbar.scss | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/packages/clay/src/scss/components/_navbar.scss b/packages/clay/src/scss/components/_navbar.scss index 3c480e4fd3..40e18f59c2 100644 --- a/packages/clay/src/scss/components/_navbar.scss +++ b/packages/clay/src/scss/components/_navbar.scss @@ -129,12 +129,6 @@ > form { width: 100%; } - - .form-inline { - .form-control { - margin-bottom: 0; - } - } } .navbar-form-autofit { @@ -145,19 +139,6 @@ display: flex; width: 100%; } - - .form-inline { - align-items: flex-end; - flex: 1; - flex-direction: row; - width: 100%; - } - - .form-control { - flex: 1; - min-width: 50px; - width: 100%; - } } // Navbar Overlay From 52fe3347c978b0e7c1f23112cb39810a53d2d2ec Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 10:25:01 +0100 Subject: [PATCH 008/309] Update metal-soy in clay-charts --- packages/clay-charts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-charts/package.json b/packages/clay-charts/package.json index 03456914e5..d0e93a5f4d 100644 --- a/packages/clay-charts/package.json +++ b/packages/clay-charts/package.json @@ -37,7 +37,7 @@ "d3": "^4.10.0", "metal-component": "^2.13.2", "metal-jsx": "^2.13.2", - "metal-soy": "^2.0.0", + "metal-soy": "^2.16.0", "metal-state": "^2.16.0" }, "devDependencies": { From 3b0a367ea83e92d5f52efa1b124cc3f48e2d2b5e Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:12:22 +0100 Subject: [PATCH 009/309] Add needed classes to add space between icon and label in ClayDropdown | Fixes #597 --- packages/clay-dropdown/src/ClayDropdown.soy | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clay-dropdown/src/ClayDropdown.soy b/packages/clay-dropdown/src/ClayDropdown.soy index 4fb212a4b3..f27633a60b 100644 --- a/packages/clay-dropdown/src/ClayDropdown.soy +++ b/packages/clay-dropdown/src/ClayDropdown.soy @@ -23,6 +23,7 @@ {let $trigger kind="html"} {if $icon} {call ClayIcon.render} + {param elementClasses: $label ? 'inline-item inline-item-before' : '' /} {param spritemap: $spritemap /} {param symbol: $icon /} {/call} From 0b26bb3615ffa81f0052037526afdc1547dcb76c Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:13:10 +0100 Subject: [PATCH 010/309] Update ClayDropdown demos | Fixes #597 --- packages/clay-dropdown/demos/a11y.html | 39 +++++++++++++++++++++++++ packages/clay-dropdown/demos/index.html | 39 +++++++++++++++++++++++++ 2 files changed, 78 insertions(+) diff --git a/packages/clay-dropdown/demos/a11y.html b/packages/clay-dropdown/demos/a11y.html index f159af739f..25c0f08b8b 100644 --- a/packages/clay-dropdown/demos/a11y.html +++ b/packages/clay-dropdown/demos/a11y.html @@ -45,6 +45,13 @@

    Dropdown with icon trigger

    +
    +
    +

    Dropdown with icon and label trigger

    +
    +
    +
    +

    Dropdown with links

    @@ -233,6 +240,38 @@

    Actions Dropdown with events in items

    }, '#icon-trigger-block' ); + + /** + * Icon and Label Trigger Dropdown + **/ + new metal.ClayDropdown( + { + icon: 'list', + items: [ + { + href: '#1', + label: 'Item 1', + }, + { + active: true, + href: '#2', + label: 'Item 2', + }, + { + disabled: true, + href: '#3', + label: 'Item 3', + }, + { + href: '#4', + label: 'Item 4', + }, + ], + label: 'Trigger Label', + spritemap: spritemap, + }, + '#icon-label-trigger-block' + ); /** * Dropdown with links diff --git a/packages/clay-dropdown/demos/index.html b/packages/clay-dropdown/demos/index.html index f159af739f..25c0f08b8b 100644 --- a/packages/clay-dropdown/demos/index.html +++ b/packages/clay-dropdown/demos/index.html @@ -45,6 +45,13 @@

    Dropdown with icon trigger

    +
    +
    +

    Dropdown with icon and label trigger

    +
    +
    +
    +

    Dropdown with links

    @@ -233,6 +240,38 @@

    Actions Dropdown with events in items

    }, '#icon-trigger-block' ); + + /** + * Icon and Label Trigger Dropdown + **/ + new metal.ClayDropdown( + { + icon: 'list', + items: [ + { + href: '#1', + label: 'Item 1', + }, + { + active: true, + href: '#2', + label: 'Item 2', + }, + { + disabled: true, + href: '#3', + label: 'Item 3', + }, + { + href: '#4', + label: 'Item 4', + }, + ], + label: 'Trigger Label', + spritemap: spritemap, + }, + '#icon-label-trigger-block' + ); /** * Dropdown with links From bcdd892e4d2aad5a5ce8ae05f901cc5f4d10b925 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:22:35 +0100 Subject: [PATCH 011/309] Update ClayDropdown tests | Fixes #597 --- packages/clay-dropdown/src/__tests__/ClayDropdown.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/clay-dropdown/src/__tests__/ClayDropdown.js b/packages/clay-dropdown/src/__tests__/ClayDropdown.js index 9ce2b9cd83..dac55bfdec 100644 --- a/packages/clay-dropdown/src/__tests__/ClayDropdown.js +++ b/packages/clay-dropdown/src/__tests__/ClayDropdown.js @@ -147,6 +147,17 @@ describe('ClayDropdown', function() { expect(clayDropdown).toMatchSnapshot(); }); + it('should render a dropdown with an icon and label trigger', () => { + clayDropdown = new ClayDropdown({ + icon: 'list', + items: items, + label: 'Trigger', + spritemap: 'icons.svg', + }); + + expect(clayDropdown).toMatchSnapshot(); + }); + it('should render a searchable dropdown', () => { clayDropdown = new ClayDropdown({ items: items, From eae1e51daaaca05bfdb363034566d096f9f55f93 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:23:35 +0100 Subject: [PATCH 012/309] Regen snapshots | Fixes #597 --- .../__snapshots__/ClayDropdown.js.snap | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap index 753fbea715..1dfbbe5649 100644 --- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap +++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap @@ -93,6 +93,98 @@ exports[`ClayDropdown should render a disabled dropdown with items 1`] = `
    `; +exports[`ClayDropdown should render a dropdown with an icon and label trigger 1`] = ` +
    + +
    +
    +
      +
    • + Item 1 +
      • +
    • + Item 2 +
      • +
    • + Item 3 +
      • +
    • + Item 4 +
      • +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • + +
    • +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      +
      • + +
    +
    +`; + exports[`ClayDropdown should render a dropdown with an icon trigger 1`] = `
    +
    +
    +

    Dropdown with small trigger

    +
    +
    +
    +

    Dropdown with icon trigger

    @@ -209,6 +216,38 @@

    Actions Dropdown with events in items

    }, '#disabled-block' ); + + /** + * Dropdown with size + **/ + new metal.ClayDropdown( + { + items: [ + { + href: '#1', + label: 'Item 1', + }, + { + active: true, + href: '#2', + label: 'Item 2', + }, + { + disabled: true, + href: '#3', + label: 'Item 3', + }, + { + href: '#4', + label: 'Item 4', + }, + ], + label: 'Trigger Label', + spritemap: spritemap, + triggerSize: 'sm', + }, + '#size-block' + ); /** * Icon Trigger Dropdown diff --git a/packages/clay-dropdown/demos/index.html b/packages/clay-dropdown/demos/index.html index 25c0f08b8b..8594775235 100644 --- a/packages/clay-dropdown/demos/index.html +++ b/packages/clay-dropdown/demos/index.html @@ -38,6 +38,13 @@

    Disabled Dropdown

    +
    +
    +

    Dropdown with small trigger

    +
    +
    +
    +

    Dropdown with icon trigger

    @@ -209,6 +216,38 @@

    Actions Dropdown with events in items

    }, '#disabled-block' ); + + /** + * Dropdown with size + **/ + new metal.ClayDropdown( + { + items: [ + { + href: '#1', + label: 'Item 1', + }, + { + active: true, + href: '#2', + label: 'Item 2', + }, + { + disabled: true, + href: '#3', + label: 'Item 3', + }, + { + href: '#4', + label: 'Item 4', + }, + ], + label: 'Trigger Label', + spritemap: spritemap, + triggerSize: 'sm', + }, + '#size-block' + ); /** * Icon Trigger Dropdown From 9a3694ea10ebf38315c7e9f40002a7677723bfdd Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:34:08 +0100 Subject: [PATCH 015/309] Add tests | Fixes #597 --- .../src/__tests__/ClayDropdown.js | 11 +++++++++++ .../src/__tests__/ClayDropdownBase.js | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/clay-dropdown/src/__tests__/ClayDropdown.js b/packages/clay-dropdown/src/__tests__/ClayDropdown.js index dac55bfdec..c0bde7199b 100644 --- a/packages/clay-dropdown/src/__tests__/ClayDropdown.js +++ b/packages/clay-dropdown/src/__tests__/ClayDropdown.js @@ -126,6 +126,17 @@ describe('ClayDropdown', function() { expect(clayDropdown).toMatchSnapshot(); }); + it('should render a dropdown with trigger size', () => { + clayDropdown = new ClayDropdown({ + items: items, + label: 'Trigger', + spritemap: 'icons.svg', + triggerSize: 'sm', + }); + + expect(clayDropdown).toMatchSnapshot(); + }); + it('should render an expanded dropdown', () => { clayDropdown = new ClayDropdown({ expanded: true, diff --git a/packages/clay-dropdown/src/__tests__/ClayDropdownBase.js b/packages/clay-dropdown/src/__tests__/ClayDropdownBase.js index 76d3014f96..ec92b0cb83 100644 --- a/packages/clay-dropdown/src/__tests__/ClayDropdownBase.js +++ b/packages/clay-dropdown/src/__tests__/ClayDropdownBase.js @@ -48,6 +48,25 @@ describe('ClayDropdownBase', function() { }); it('should render a dropdown with trigger custom classes', () => { + clayDropdownBase = new ClayDropdownBase({ + items: [ + { + href: 'item1url', + label: 'Item 1', + }, + { + href: 'item2url', + label: 'Item 2', + }, + ], + label: 'Trigger', + triggerSize: 'sm', + }); + + expect(clayDropdownBase).toMatchSnapshot(); + }); + + it('should render a dropdown with trigger szie', () => { clayDropdownBase = new ClayDropdownBase({ items: [ { From 223862d7a4c6b1e4c4948a9549076bb0faa5b4ea Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 13:34:36 +0100 Subject: [PATCH 016/309] Regen snapshots | Fixes #597 --- .../__snapshots__/ClayDropdown.js.snap | 93 +++++++++++++++++++ .../__snapshots__/ClayDropdownBase.js.snap | 16 ++++ 2 files changed, 109 insertions(+) diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap index 1dfbbe5649..8bebd4cf43 100644 --- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap +++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap @@ -650,6 +650,99 @@ exports[`ClayDropdown should render a dropdown with trigger custom classes 1`] =
    `; +exports[`ClayDropdown should render a dropdown with trigger size 1`] = ` +
    + +
    +
    +
      +
    • + Item 1 +
      • +
    • + Item 2 +
      • +
    • + Item 3 +
      • +
    • + Item 4 +
      • +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • +
    • +
      + +
      +
      • + +
    • +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      +
      • + +
    +
    +`; + exports[`ClayDropdown should render a searchable dropdown 1`] = `
    +
    +
    + +
    +`; + +exports[`ClayDropdownBase should render a dropdown with trigger szie 1`] = `
    From 6cfca724e6f830f4dc0b90b1b180bf9a34ad614d Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 15:43:00 +0100 Subject: [PATCH 017/309] Add inline-item classes to caret-down icon in ClayDropdown | Fixes #597 --- packages/clay-dropdown/src/ClayDropdown.soy | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clay-dropdown/src/ClayDropdown.soy b/packages/clay-dropdown/src/ClayDropdown.soy index 71ad1248d0..922d62f739 100644 --- a/packages/clay-dropdown/src/ClayDropdown.soy +++ b/packages/clay-dropdown/src/ClayDropdown.soy @@ -36,6 +36,7 @@ {if not $icon} {call ClayIcon.render} + {param elementClasses: 'inline-item inline-item-after' /} {param spritemap: $spritemap /} {param symbol: 'caret-bottom' /} {/call} From c44a3ed3f3602548e16a06787b02419a98505eb2 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 15:43:55 +0100 Subject: [PATCH 018/309] Regen snapshots | Fixes #597 --- .../__tests__/__snapshots__/ClayDropdown.js.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap index 8bebd4cf43..cc22d3c1e1 100644 --- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap +++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap @@ -3,7 +3,7 @@ exports[`ClayDropdown should render a disabled dropdown with items 1`] = `
    - - {if $searchValue and $totalItems > 0} - {call .tbar} - {param _handleClearResultsClick: $_handleClearResultsClick /} - {param searchValue: $searchValue /} - {param totalItems: $totalItems /} - {/call} - {/if} {/template} /** @@ -546,6 +542,7 @@ */ {template .tbar} {@param? _handleClearResultsClick: any} + {@param? disabled: bool} {@param? searchValue: string} {@param? totalItems: number} @@ -561,6 +558,7 @@
  • {call ClayButton.render} + {param disabled: $disabled /} {param elementClasses: 'component-link tbar-link' /} {param events: ['click': $_handleClearResultsClick] /} {param label: 'Clear' /} From aa625cccb71fa0b15aa51bb733760e3699691625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 21 Feb 2018 12:31:15 -0300 Subject: [PATCH 020/309] Adds results bar test when status is active | Fixes #572 --- .../src/__tests__/ClayManagementToolbar.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js index 4422a81050..993e8ecf49 100644 --- a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js @@ -414,6 +414,19 @@ describe('ClayManagementToolbar', function() { expect(managementToolbar).toMatchSnapshot(); }); + it('should render a management toolbar with search results bar when state is active', () => { + managementToolbar = new ClayManagementToolbar({ + id: 'myId', + searchValue: 'foo', + selectable: true, + selectedItems: 1, + spritemap: spritemap, + totalItems: 10, + }); + + expect(managementToolbar).toMatchSnapshot(); + }); + it('should render a selectable management toolbar and emit an event on checkbox click', () => { managementToolbar = new ClayManagementToolbar({ selectable: true, From 0428d4808f91a2b396f6f797f12d9c2a6859d612 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 21 Feb 2018 12:31:31 -0300 Subject: [PATCH 021/309] Regen snaphosts | Fixes #572 --- .../__snapshots__/ClayDatasetDisplay.js.snap | 408 +++++++++--------- .../ClayManagementToolbar.js.snap | 341 +++++++++------ 2 files changed, 407 insertions(+), 342 deletions(-) diff --git a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap index bdfcfbf4ae..134cba91c1 100644 --- a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap +++ b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap @@ -2071,58 +2071,60 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with classes 1`] exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped items and deselect a selected item on click 1`] = `
    -
    • - -
    - + +
  • + +
    • +
  • +
    + +
    +
    • + + + +
    @@ -2603,58 +2605,60 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with id 1`] = ` -
    - + +
  • + +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -5672,58 +5676,60 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected grouped items 1`] = `
    -
    - + +
  • + +
    • +
  • +
    + +
    +
    • + +
    + +
    @@ -6179,58 +6185,60 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected items 1`] = `
    -
    - + +
  • + +
    • +
  • +
    + +
    +
    • + +
    + +
    diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap index 3afd28faee..798d4b12ba 100644 --- a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap +++ b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap @@ -163,42 +163,44 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] = `; exports[`ClayManagementToolbar should render a management toolbar with actions in active state 1`] = ` - +
    + +
    • @@ -294,30 +296,32 @@ exports[`ClayManagementToolbar should render a management toolbar with classes 1 `; exports[`ClayManagementToolbar should render a management toolbar with classes in active state 1`] = ` - +
      + +
      `; exports[`ClayManagementToolbar should render a management toolbar with descending sorting 1`] = ` @@ -763,30 +767,32 @@ exports[`ClayManagementToolbar should render a management toolbar with id 1`] = `; exports[`ClayManagementToolbar should render a management toolbar with id in active state 1`] = ` - +
      + +
      `; exports[`ClayManagementToolbar should render a management toolbar with info button 1`] = ` @@ -827,40 +833,42 @@ exports[`ClayManagementToolbar should render a management toolbar with info butt `; exports[`ClayManagementToolbar should render a management toolbar with info button in active state 1`] = ` - +
      + +
      `; exports[`ClayManagementToolbar should render a management toolbar with no search 1`] = ` @@ -1215,6 +1223,53 @@ exports[`ClayManagementToolbar should render a management toolbar with search re
    `; +exports[`ClayManagementToolbar should render a management toolbar with search results bar when state is active 1`] = ` +
    + + +
    +`; + exports[`ClayManagementToolbar should render a management toolbar with selection enabled 1`] = `
    +
    +
    +

    With search results bar with active state

    +
    +
    +
    + diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html index 7fa2d76a1b..bf24748142 100644 --- a/packages/clay-management-toolbar/demos/index.html +++ b/packages/clay-management-toolbar/demos/index.html @@ -66,6 +66,13 @@

    With search results bar

    +
    +
    +

    With search results bar with active state

    +
    +
    +
    + From 782f0ee2890ff224673faa741a247576bfd9d929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 21 Feb 2018 12:47:49 -0300 Subject: [PATCH 023/309] SF | Fixes #572 --- .../src/ClayManagementToolbar.js | 14 +++++++------- .../src/ClayManagementToolbar.soy | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js index 9b20d2ab83..b009c9d699 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.js @@ -49,20 +49,20 @@ class ClayManagementToolbar extends Component { } /** - * Hides the search in mobile devices + * Continues the propagation of the clear button clicked event + * @param {!Event} event * @private */ - _handleCloseMobileSearchClick() { - this._showSearchMobile = false; + _handleClearResultsClick(event) { + this.emit('clearButtonClicked', event); } /** - * Continues the propagation of the clear button clicked event - * @param {!Event} event + * Hides the search in mobile devices * @private */ - _handleClearResultsClick(event) { - this.emit('clearButtonClicked', event); + _handleCloseMobileSearchClick() { + this._showSearchMobile = false; } /** diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy index dbfdedc024..f18e9bb988 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy @@ -6,8 +6,8 @@ {template .render} {@param spritemap: string} {@param? _handleActionClicked: any} - {@param? _handleCloseMobileSearchClick: any} {@param? _handleClearResultsClick: any} + {@param? _handleCloseMobileSearchClick: any} {@param? _handleCreationButtonClicked: any} {@param? _handleDeselectAllClicked: any} {@param? _handleFilterDoneButtonClick: any} @@ -91,8 +91,8 @@ {/call} {else} {call .default} - {param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /} {param _handleClearResultsClick: $_handleClearResultsClick /} + {param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /} {param _handleCreationButtonClicked: $_handleCreationButtonClicked /} {param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /} {param _handleInfoButtonClicked: $_handleInfoButtonClicked /} From df4c5aeb95e30f727c63752683d0d09048dc7b45 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Wed, 21 Feb 2018 17:00:37 +0100 Subject: [PATCH 024/309] =?UTF-8?q?Regen=20snapshots=20|=C2=A0Fixes=20#597?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/ClayPaginationBar.js.snap | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap index 0dfa01d86e..63a9c57ddf 100644 --- a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap +++ b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap @@ -4,7 +4,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with baseHref 1`] =
    @@ -87,7 +88,7 @@
    Syntax with Options:
    - @@ -119,53 +120,38 @@

    Side Navigation Data API

    - Simple Sidenav Toggler + Simple Sidenav Toggler - + Another Simple Sidenav Toggler
    -
    -
    - - - - - Simple Sidenav - -
    - -
    - -
    -
    -
    -
    - :D -
    -
    - -
    - Joe Bloggs
    - Subheading -
    - -
    - -
    +
    + + +
    + Some body content...
    @@ -177,61 +163,38 @@

    Side Navigation Data API

    - Simple Sidenav 2 Toggler + - +
    -
    -
    - - - - - Simple Sidenav 2 - -
    - -
    - -
    -
    -
    -
    - :D -
    -
    - -
    - Joe Bloggs
    - Subheading -
    - -
    - -
    +
    + + +
    + Some body content...
    @@ -241,10 +204,10 @@

    Side Navigation Data API

    - Simple Sidenav 2 Toggler + Simple Sidenav 2 Toggler
    -
    +
    ...
    @@ -266,50 +229,32 @@

    Using the Data API

    -
    -
    - - - - - Simple Sidenav 3 - -
    - -
    - -
    -
    -
    -
    - :D -
    -
    - -
    - Joe Bloggs
    - Subheading -
    - -
    - -
    +
    +
    + +
    @@ -319,7 +264,7 @@

    Using the Options API

    ```
    
-    
+    
          Toggle
     
 
@@ -456,18 +401,7 @@ 
    .sideNavigation('visible')
    
 
 	$('.sidenav-toggler1').sideNavigation({
 		container: '#mySidenavContainerId1',
+		typeMobile: 'fixed',
 		position: 'right'
 	});
-
-	$('#showSimpleSidenav2').on('click', function(event) {
-		event.preventDefault();
-
-		$('[href="#simpleSidenav2"]').first().sideNavigation('show');
-	});
-
-	$('#hideSimpleSidenav2').on('click', function(event) {
-		event.preventDefault();
-
-		$('[href="#simpleSidenav2"]').first().sideNavigation('hide');
-	});
 
\ No newline at end of file
diff --git a/packages/clay/src/content/test_card_view_template.html b/packages/clay/src/content/test_card_view_template.html
index ee698b9054..411afbaa5e 100644
--- a/packages/clay/src/content/test_card_view_template.html
+++ b/packages/clay/src/content/test_card_view_template.html
@@ -148,6 +148,13 @@
 					
 				
 			
+			
  • 
+				
+					
+				
+			
    • 
 			
  • 
 				
    • 
 				
    
-			
-			
  • 
-				
    
-					
    
-						
+			
+			
    
+				
    
+					
    
+						
    
+							
+								Image1.jpg
+							
+						
    
+						
    Basic Document
    
+					
    
+					
    
+						
    
+							
+							
+						
    
 					
    
 				
    
-			
    • 
-			
  • 
-				
    
-					
    
-						
    • 
-			
  • 
-				
    
-					
    
-						
    • 
+								
+							
+
    -
    - - - +
    +
    +
    +
    +
    +
    + + + +
    - -
  • -
    -
    -
    -
    - +
    • +
  • +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    + + thumbnail_coffee.jpg + +

    +

    + + Author Action + +

    +
    + Approved +
    +
    +
    +
    +
    + + +
    +
    +
    -
    -
    -
    -
    +
    +
    • +
  • +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    + + thumbnail_coffee.jpg + +

    +

    + + Author Action + +

    +
    + Approved +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    + +
    +
    +
    +
    +

    thumbnail_coffee.jpg @@ -575,144 +859,92 @@

    Approved
    - -

    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -
    - -
    -
    -
    -
    -
    -

    - - thumbnail_coffee.jpg - -

    -

    - - Author Action - -

    -
    - Approved
    -
    -
    -
    - - +
    +
    + + +
    -
    -
    • - - -
    -
    - - -
    -
    Showing 223,922 to 223,932 of 1,292,203 entries.
    -
    +
    Showing 223,922 to 223,932 of 1,292,203 entries.
    + +
    @@ -732,4 +964,13 @@

    $('.clay-site-close-overlay-up').on('click', function(event) { $(this).closest('.navbar-overlay-up').removeClass('show'); }); + + $('#uniqueSidenavToggler1').sideNavigation({ + gutter: '24px', // The space between the sidenav-slider and the sidenav-content. Default: 15px. + heightType: 'fullHeight', + position: 'right', // The position of the sidenav-slider. Possible values: left, right. Default: 'left'. + type: 'relative', // The type of sidenav in desktop. Possible values: relative, fixed, fixed-push. Default: 'relative'. + typeMobile: 'fixed', // The type of sidenav in mobile. Possible values: relative, fixed, fixed-push. Default: 'relative'. + width: '320px' // The width of the side navigation. Default: '225px'. + }); \ No newline at end of file diff --git a/packages/clay/src/content/test_list_view_template.html b/packages/clay/src/content/test_list_view_template.html index 23c69a37e8..d7828092e5 100644 --- a/packages/clay/src/content/test_list_view_template.html +++ b/packages/clay/src/content/test_list_view_template.html @@ -148,6 +148,13 @@ +
  • + + + +

    • +
    + +
      +
    • +

      Group 1

      +
      • +
    • +
      +
      + +
      -
    -
    -
    -

    - Account Example Two -

    -
    -
    -
    -
    - - - - - - - -
    +
    + - +
    -
    -

    Account Example One +

    +

    Second Level Text

    +
    +
    +
    +
    + + + + + + + + + +
    +
    + + +
    +
    + +
  • +
    +
    + +
    +
    +
    +
    + - - +
    -
    • - -
  • -

    Group 2

    -
    • -
  • -
    -
    - +
    +
    +

    + Account Example Two +

    +
    -
    -
    -
    - +
    +
    + + + + + + + + + +
    +
    + + +
    -
    -
    -
    -

    - Account Example One -

    -

    Second Level Text

    -
    - Pending +
    • +
  • +

    Group 2

    +
    • +
  • +
    +
    +
    - -
    -
    -
    - - - - - - - - -
    -
    -
    - +
    -
    -
    • -
  • -
    -
    - +
    +
    +

    + Account Example One +

    +

    Second Level Text

    +
    + Pending +
    +
    -
    -
    -
    - +
    +
    + + + + + + + + + +
    +
    + + +
    -
    -
    -
    -

    - Account Example Two -

    -

    Second Level Text

    -
    - Info +
    • +
  • +
    +
    +
    - -
    -
    -
    - - - - - - - - -
    -
    -
    - +
    -
    -
    • -
  • -

    Group 3

    -
    • -
  • -
    -
    -

    - Account Example One -

    -
    -
    -
    • -
  • -
    -
    -

    - Account Example Two -

    -
    -
    -
    • -
  • -
    -
    -

    - Account Example Three -

    -
    -
    -
    • -
  • -
    -
    -

    - Account Example Four -

    -
    -
    -
    • - - -
    -
    - - -
    -
    Showing 223,922 to 223,932 of 1,292,203 entries.
    -
    +
    Showing 223,922 to 223,932 of 1,292,203 entries.
    + +
    @@ -581,4 +811,13 @@

    $('.clay-site-close-overlay-up').on('click', function(event) { $(this).closest('.navbar-overlay-up').removeClass('show'); }); + + $('#uniqueSidenavToggler1').sideNavigation({ + gutter: '12px', // The space between the sidenav-slider and the sidenav-content. Default: 15px. + heightType: 'fullHeight', + position: 'right', // The position of the sidenav-slider. Possible values: left, right. Default: 'left'. + type: 'relative', // The type of sidenav in desktop. Possible values: relative, fixed, fixed-push. Default: 'relative'. + typeMobile: 'fixed', // The type of sidenav in mobile. Possible values: relative, fixed, fixed-push. Default: 'relative'. + width: '320px' // The width of the side navigation. Default: '225px'. + }); \ No newline at end of file diff --git a/packages/clay/src/content/test_table_view_template.html b/packages/clay/src/content/test_table_view_template.html index 97b96343fb..4aa6a2634c 100644 --- a/packages/clay/src/content/test_table_view_template.html +++ b/packages/clay/src/content/test_table_view_template.html @@ -148,6 +148,13 @@ +
  • + + + +

    • +
    +
    +
    +

    + + Image1.jpg + +

    +

    Basic Document

    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    +
    + thumbnail +
    JPG
    +
    +
    +
    Url
    +
    + http://localhost:8080/documents/20140/ +
    +
    Webdav Url
    +
    + http://localhost:8080/webdav/guest/ +
    +
    Created
    +
    + Helen Smith +
    +
    Description
    +
    A picture of a person using a ruler and exacto knife to cut construction paper.
    +
    Size
    +
    745KB
    +
    Extension
    +
    PNG
    +
    Version
    +
    2.0
    +
    Tags
    +
    + Tag One + Tag Two + Tag Three + Tag Four + Tag Five + Tag Six + Tag Seven + Tag Eight +
    +
    Related Assets
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual + + + + SizeStatusCreation DateModification Date
    +
    + +
    +     		+
    +
    + PNG +
    +
    +

    + + Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds. + +

    +
    +
    +     		700KB + Approved + 6 days ago4 days ago +
    + + + + + + + + + +
    +
    + + +
    +
    +
    + + +
    + Because of the dynamic nature of content in tables, we left it to the developer to size and align columns inside tables. Add a unique class to each column and use min-width / max-width to space the tables to your specific requirements. +
    +
    @@ -211,21 +537,26 @@ - ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual - + Title + - - - + + + + + + + - + + + + - -
    Size StatusCreation DateModification DateItemsStart DateDuration
    In Progress
    @@ -238,23 +569,31 @@
    - PNG + MT

    - - Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds. - + + Publication Title +

    		700KB - Approved + In Progress + 100,0002017.11.24 - 17:154 minutes +
    +
    +
    +
    +
    30%
    +
    		6 days ago4 days ago
    @@ -291,117 +630,11 @@

    - - -
    - Because of the dynamic nature of content in tables, we left it to the developer to size and align columns inside tables. Add a unique class to each column and use min-width / max-width to space the tables to your specific requirements.
    +
    + + -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - Title - - - - StatusItemsStart DateDuration
    In Progress
    -
    - -
    -     		-
    -
    - MT -
    -
    -

    - - Publication Title - -

    -
    -
    -     		- In Progress - 100,0002017.11.24 - 17:154 minutes -
    -
    -
    -
    -
    30%
    -
    -     		-
    - - - - - - - - - -
    -
    - - -
    -
    -
    -
    \ No newline at end of file From f0944713bb17d91970db327b3cd2c7dc20e8ca6c Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 9 Feb 2018 09:03:32 -0800 Subject: [PATCH 048/309] Site: (#481) Change `info-circle-open` icon in Quick Action Menu demos to `expand` because it's confusing --- packages/clay/src/content/grid.html | 7 +- packages/clay/src/content/list_groups.html | 204 +++++++++--------- packages/clay/src/content/tables.html | 112 +++++----- .../src/content/test_list_view_template.html | 28 ++- .../src/content/test_table_view_template.html | 14 +- 5 files changed, 165 insertions(+), 200 deletions(-) diff --git a/packages/clay/src/content/grid.html b/packages/clay/src/content/grid.html index 5c6ed7d5b8..23a7d7cde6 100644 --- a/packages/clay/src/content/grid.html +++ b/packages/clay/src/content/grid.html @@ -164,8 +164,8 @@

    Application

    -
    @@ -177,8 +177,7 @@

    Application

    diff --git a/packages/clay/src/content/list_groups.html b/packages/clay/src/content/list_groups.html index 366da01e07..671a00fa58 100644 --- a/packages/clay/src/content/list_groups.html +++ b/packages/clay/src/content/list_groups.html @@ -56,8 +56,8 @@

    -

    @@ -69,8 +69,7 @@

    @@ -113,8 +112,8 @@

    - @@ -126,8 +125,7 @@

    @@ -169,8 +167,8 @@

    - @@ -182,8 +180,7 @@

    @@ -236,8 +233,8 @@

    - @@ -249,8 +246,7 @@

    @@ -293,8 +289,8 @@

    - @@ -306,8 +302,7 @@

    @@ -388,8 +383,8 @@

    - @@ -401,8 +396,7 @@

    @@ -448,8 +442,8 @@

    - @@ -461,8 +455,7 @@

    @@ -573,8 +566,8 @@

    - @@ -586,8 +579,7 @@

    @@ -633,8 +625,8 @@

    - @@ -646,8 +638,7 @@

    @@ -658,68 +649,6 @@

    -
    -
    -

    List Group with Links and Buttons

    - -
    - List Item 1 - List Item 2 - - List Item 4 -
    -
    -
    - -
    -
    -

    Contextual List Group

    - -
      -
    • List Item Normal
      • -
    • List Item Success
      • -
    • List Item Info
      • -
    • List Item Warning
      • -
    • List Item Danger
      • -
    • List Item Light
      • -
    • List Item Dark
      • -
    - -
    -
    - -
    -
    -

    Linked Contextual List Groups

    - -
    -
    -
    - List Item Action Normal - List Item Action Success - List Item Action Info - List Item Action Warning - List Item Action Danger - List Item Action Light - List Item Action Dark -
    -
    -
    -
    - List Item Action Normal Active - List Item Action Success Active - List Item Action Info Active - List Item Action Warning Active - List Item Action Danger Active - List Item Action Light Active - List Item Action Dark Active -
    -
    -
    - -
    -
    -

    With Buttons

    @@ -768,8 +697,8 @@

    @@ -780,10 +709,9 @@

    @@ -826,8 +754,8 @@

    @@ -839,8 +767,7 @@

    @@ -850,6 +777,67 @@

    +
    +
    +

    List Group with Links and Buttons

    + +
    + List Item 1 + List Item 2 + + List Item 4 +
    +
    +
    + +
    +
    +

    Contextual List Group

    + +
      +
    • List Item Normal
      • +
    • List Item Success
      • +
    • List Item Info
      • +
    • List Item Warning
      • +
    • List Item Danger
      • +
    • List Item Light
      • +
    • List Item Dark
      • +
    + +
    +
    + +
    +
    +

    Linked Contextual List Groups

    + +
    +
    +
    + List Item Action Normal + List Item Action Success + List Item Action Info + List Item Action Warning + List Item Action Danger + List Item Action Light + List Item Action Dark +
    +
    +
    +
    + List Item Action Normal Active + List Item Action Success Active + List Item Action Info Active + List Item Action Warning Active + List Item Action Danger Active + List Item Action Light Active + List Item Action Dark Active +
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/packages/clay/src/content/test_list_view_template.html b/packages/clay/src/content/test_list_view_template.html index 77626de101..1669db8f4d 100644 --- a/packages/clay/src/content/test_list_view_template.html +++ b/packages/clay/src/content/test_list_view_template.html @@ -124,16 +124,16 @@
    - - +
    @@ -148,13 +148,6 @@ -
  • - - - -
    • -
  • - - - -
    • +
  • + + + +
    • +
  • + + + +
    • diff --git a/packages/clay/src/content/test_list_view_template.html b/packages/clay/src/content/test_list_view_template.html index 1669db8f4d..6b5609e68d 100644 --- a/packages/clay/src/content/test_list_view_template.html +++ b/packages/clay/src/content/test_list_view_template.html @@ -148,6 +148,13 @@ +
  • + + + +
    • diff --git a/packages/clay/src/content/test_table_view_template.html b/packages/clay/src/content/test_table_view_template.html index cecae733c8..3089932300 100644 --- a/packages/clay/src/content/test_table_view_template.html +++ b/packages/clay/src/content/test_table_view_template.html @@ -148,6 +148,13 @@ +
  • + + + +
    • From b83d9266448e26c3315598eff07d4cbddd62f88a Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 13 Feb 2018 12:16:48 -0800 Subject: [PATCH 051/309] New: (#481) Nav added option to configure `$nav-btn-padding-x`, `$nav-btn-padding-y` and buttons in Nav should inherit padding-x from `.btn-sm` --- packages/clay/src/scss/components/_navs.scss | 6 ++++-- packages/clay/src/scss/variables/_navs.scss | 3 +++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/clay/src/scss/components/_navs.scss b/packages/clay/src/scss/components/_navs.scss index 60ef28fea5..0f067b12f7 100644 --- a/packages/clay/src/scss/components/_navs.scss +++ b/packages/clay/src/scss/components/_navs.scss @@ -22,8 +22,10 @@ line-height: $line-height-base; margin: $nav-btn-margin-y $nav-btn-margin-x; min-width: $nav-item-monospaced-size; - padding-bottom: 0; - padding-top: 0; + padding-bottom: $nav-btn-padding-y; + padding-left: $nav-btn-padding-x; + padding-right: $nav-btn-padding-x; + padding-top: $nav-btn-padding-y; text-align: center; width: auto; diff --git a/packages/clay/src/scss/variables/_navs.scss b/packages/clay/src/scss/variables/_navs.scss index a4da7ada04..68aae74d61 100644 --- a/packages/clay/src/scss/variables/_navs.scss +++ b/packages/clay/src/scss/variables/_navs.scss @@ -4,6 +4,9 @@ $nav-item-monospaced-size: 2rem !default; // 32px $nav-btn-margin-x: 0.25rem !default; // 4px $nav-btn-margin-y: (($line-height-base * $font-size-base) + ($nav-link-padding-y * 2) - $nav-item-monospaced-size) / 2 !default; +$nav-btn-padding-x: $btn-padding-x-sm !default; +$nav-btn-padding-y: 0 !default; + // Nav Nested From 0a332d4ce282563531ed088f0f64f2996b17f0cd Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 13 Feb 2018 12:28:12 -0800 Subject: [PATCH 052/309] Update: (#481) Management Bar links and buttons spacing to 0.25rem in mobile --- packages/clay/src/scss/variables/_management-bar.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/clay/src/scss/variables/_management-bar.scss b/packages/clay/src/scss/variables/_management-bar.scss index 076b78bf61..8a7d1104fa 100644 --- a/packages/clay/src/scss/variables/_management-bar.scss +++ b/packages/clay/src/scss/variables/_management-bar.scss @@ -10,6 +10,8 @@ $management-bar-size: map-merge(( link-height: 2rem, link-height-mobile: 2rem, link-margin-x: 0.5rem, + link-margin-x-mobile: 0.25rem, + link-padding-x-mobile: 0.25rem, form-control-height-mobile: 2rem, toggler-margin-x: 0.875rem, active-border-bottom-width: 0.25rem, From 4383eb008c9cfac4a6fc3ac47d5f847c74f786c4 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 20 Feb 2018 11:15:03 -0800 Subject: [PATCH 053/309] Update: (#481) Navbar added classes `.navbar-nowrap`, `.navbar-nav-expand`, `.nav-item-expand`, `.nav-item-shrink` to help with horizontal sizing of various items in Navbar --- .../clay/src/scss/components/_navbar.scss | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/packages/clay/src/scss/components/_navbar.scss b/packages/clay/src/scss/components/_navbar.scss index 40e18f59c2..9b3c0f2f4f 100644 --- a/packages/clay/src/scss/components/_navbar.scss +++ b/packages/clay/src/scss/components/_navbar.scss @@ -11,6 +11,21 @@ } } +.navbar-nowrap { + flex-wrap: nowrap; + + .container, + .container-fluid, + .navbar-nav { + flex-wrap: nowrap !important; + } + + .navbar-text { + min-width: 0; + white-space: nowrap; + } +} + .navbar-nav, .navbar-form { .dropdown-menu-right { @@ -32,6 +47,15 @@ } } +.navbar-nav-expand { + flex-grow: 1; + min-width: 0; +} + +.navbar-nav-last { + margin-left: auto; +} + .navbar-nav .nav-item { word-wrap: normal; @@ -43,8 +67,13 @@ } } -.navbar-nav-last { - margin-left: auto; +.nav-item-expand { + flex-grow: 1; + min-width: 0; +} + +.nav-item-shrink { + min-width: 0; } .navbar-title { From 39a4f2e2391b97ed4290d5059443ae7b35a4bb04 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 20 Feb 2018 11:23:48 -0800 Subject: [PATCH 054/309] Site: (#481) Management Bar Primary demos should truncate Select All text --- packages/clay/src/content/management-bar.html | 10 ++++++---- .../content/test_card_view_template_info_panel.html | 12 ++++++++---- .../content/test_list_view_template_info_panel.html | 10 ++++++---- .../content/test_table_view_template_info_panel.html | 10 ++++++---- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/packages/clay/src/content/management-bar.html b/packages/clay/src/content/management-bar.html index 4678021e06..c04b92b7c3 100644 --- a/packages/clay/src/content/management-bar.html +++ b/packages/clay/src/content/management-bar.html @@ -277,9 +277,9 @@

    Navbar Management Bar

    -