From 870d84e41751d602a9a868d57cd803160f945b96 Mon Sep 17 00:00:00 2001 From: Amy Nguyen Date: Tue, 3 Apr 2018 14:33:31 -0700 Subject: [PATCH 1/2] fix css issues to allow more flexible header/footer buttons for consumers --- .../ExtendedPeoplePicker.Basic.Example.scss | 14 ++++++++++++++ .../ExtendedPeoplePicker.Basic.Example.tsx | 13 ++++++++----- .../FloatingPicker/BaseFloatingPicker.tsx | 8 ++++---- .../FloatingPicker/Suggestions/Suggestions.scss | 1 - .../Suggestions/SuggestionsControl.scss | 9 +-------- .../Suggestions/SuggestionsControl.tsx | 6 +++--- 6 files changed, 30 insertions(+), 21 deletions(-) diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.scss b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.scss index d8e0a86cbf7d17..f03cf3c435e660 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.scss +++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.scss @@ -1,3 +1,5 @@ +@import '~office-ui-fabric-react/src/common/common'; + :global { .ms-PeoplePicker { width: 100%; @@ -7,3 +9,15 @@ width: 208px; } } + +.headerItem { + border-bottom: 1px solid $ms-color-neutralLight; + height: 30px; + padding-left: 12px; +} + +.footerItem { + border-top: 1px solid $ms-color-neutralLight; + height: 60px; + padding-left: 12px; +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index fd5c7b50792074..6139b9081d7044 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx @@ -10,11 +10,14 @@ import { ExtendedPeoplePicker } from '../PeoplePicker/ExtendedPeoplePicker'; import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types'; import { people, mru, groupOne, groupTwo } from './PeopleExampleData'; -import './ExtendedPeoplePicker.Basic.Example.scss'; import { SuggestionsStore, FloatingPeoplePicker, IBaseFloatingPickerProps, IBaseFloatingPickerSuggestionProps } from '../../FloatingPicker'; import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps } from '../../SelectedItemsList'; +import * as stylesImport from './ExtendedPeoplePicker.Basic.Example.scss'; +// tslint:disable-next-line:no-any +const styles: any = stylesImport; + export interface IPeoplePickerExampleState { peopleList: IPersonaProps[]; mostRecentlyUsed: IPersonaProps[]; @@ -48,7 +51,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP headerItemsProps: [{ renderItem: () => { return ( -
Use this address: { this._picker +
Use this address: { this._picker && this._picker.inputElement && this._picker.inputElement ? this._picker.inputElement.value : '' }
); @@ -67,7 +70,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP { renderItem: () => { return ( -
Suggested Contacts
+
Suggested Contacts
); }, shouldShow: this._shouldShowSuggestedContacts, @@ -76,7 +79,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP footerItemsProps: [{ renderItem: () => { return ( -
No results
+
No results
); }, shouldShow: () => { @@ -87,7 +90,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } }, { - renderItem: () => { return (
Search for more
); }, + renderItem: () => { return (
Search for more
); }, onExecute: () => { this.setState({ searchMoreAvailable: false }); }, shouldShow: () => { return this.state.searchMoreAvailable && !this._shouldShowSuggestedContacts(); } }], diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx index 9562f520020ccc..9729098241183b 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -138,6 +138,10 @@ export class BaseFloatingPicker> extend } } + public updateSuggestions(suggestions: T[]): void { + this.suggestionStore.updateSuggestions(suggestions); + } + public render(): JSX.Element { let { className } = this.props; return ( @@ -199,10 +203,6 @@ export class BaseFloatingPicker> extend this.forceUpdate(); } - protected updateSuggestions(suggestions: T[]): void { - this.suggestionStore.updateSuggestions(suggestions); - } - protected updateValue(updatedValue: string): void { if (this.props.onInputChanged) { (this.props.onInputChanged as (filter: string) => void)(updatedValue); diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.scss b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.scss index f39c939cab6f99..b638d815fd1261 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.scss +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.scss @@ -4,7 +4,6 @@ overflow-y: auto; overflow-x: hidden; max-height: 300px; - border-bottom: 1px solid $ms-color-neutralLight; :global(.ms-Suggestion-item) { &:hover { diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss index a4ed60153a79b7..5d8d706f73bcb0 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss @@ -10,11 +10,8 @@ border: 0; cursor: pointer; margin: 0; - @include ms-padding-left(8px); + padding: 0px; position: relative; - border-top: 1px solid $ms-color-neutralLight; - border-bottom: 1px solid $ms-color-neutralLight; - height: 40px; @include ms-text-align(left); width: 100%; font-size: 12px; @@ -48,11 +45,7 @@ } .suggestionsTitle { - padding: 0 12px; font-size: $ms-font-size-s; - line-height: 40px; - border-top: 1px solid $ms-color-neutralLight; - border-bottom: 1px solid $ms-color-neutralLight; } .suggestionsSpinner { diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx index c3924f40e27dbe..b1cb55ae86dad8 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx @@ -4,7 +4,7 @@ import { css, KeyCodes } from '../../../Utilities'; -import { CommandButton, IButton } from 'office-ui-fabric-react/lib/Button'; +import { IButton } from 'office-ui-fabric-react/lib/Button'; import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; import { @@ -42,7 +42,7 @@ export class SuggestionsHeaderFooterItem extends BaseComponent { renderItem() } - + ) : (
Date: Tue, 3 Apr 2018 14:34:49 -0700 Subject: [PATCH 2/2] change file --- .../amyngu-suggestionCssChanges_2018-04-03-21-34.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/experiments/amyngu-suggestionCssChanges_2018-04-03-21-34.json diff --git a/common/changes/@uifabric/experiments/amyngu-suggestionCssChanges_2018-04-03-21-34.json b/common/changes/@uifabric/experiments/amyngu-suggestionCssChanges_2018-04-03-21-34.json new file mode 100644 index 00000000000000..e55d86a5005413 --- /dev/null +++ b/common/changes/@uifabric/experiments/amyngu-suggestionCssChanges_2018-04-03-21-34.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "fix suggestion header/footer for more flexibile rendering", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "amyngu@microsoft.com" +} \ No newline at end of file