Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 1020: Shellbar pass popoverProps to SearchInput #1091

Merged
merged 3 commits into from
Jun 12, 2020
Merged

feat: 1020: Shellbar pass popoverProps to SearchInput #1091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1bba49e
fix: Shellbar pass popoverProps to SearchInput
prsdthkr Jun 11, 2020
07298cf
chore: update snapshot
prsdthkr Jun 11, 2020
cc344d1
default SearchInput popover props
prsdthkr Jun 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/Popover/Popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,11 +237,11 @@ Popover.propTypes = {
* This value is attached to aria-haspopup and is useful to assistive tech. Defaulted to boolean true*/
type: PropTypes.oneOf(POPOVER_TYPES),
useArrowKeyNavigation: PropTypes.bool,
/** `<ul>
<li>"matchTarget" - left and right edges align with the target</li>
<li>"minTarget" - right edge aligns with target unless Popover content is bigger</li>
<li>"maxTarget" - right edge aligns with target unless Popover content is smaller</li>
</ul>`'none', 'matchTarget', 'minTarget', 'maxTarget' */
/** 'none', 'matchTarget', 'minTarget', 'maxTarget'
* - "matchTarget" - left and right edges align with the target
* - "minTarget" - right edge aligns with target unless Popover content is bigger
* - "maxTarget" - right edge aligns with target unless Popover content is smaller
*/
widthSizingType: PropTypes.oneOf(POPPER_SIZING_TYPES),
/** Callback for consumer clicking outside of popover body */
onClickOutside: PropTypes.func,
Expand Down
20 changes: 16 additions & 4 deletions src/Shellbar/Shellbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ class Shellbar extends Component {
if (this.props.productSwitch) {
let collapsedProductSwitch = this.props.productSwitch;

// eslint-disable-next-line react/prop-types
collapsedProductSwitch.glyph = 'grid';
// eslint-disable-next-line react/prop-types
collapsedProductSwitch.callback = () => {
this.setState(prevState => ({
showCollapsedProductSwitchMenu: !prevState.showCollapsedProductSwitchMenu
Expand Down Expand Up @@ -206,6 +208,11 @@ class Shellbar extends Component {
inputProps={{ className: 'fd-shellbar__input-group__input' }}
onEnter={searchInput.onSearch}
placeholder={searchInput.placeholder}
popoverProps={{
placement: searchInput?.popoverProps?.placement || 'bottom',
disableEdgeDetection: searchInput?.popoverProps?.disableEdgeDetection || true,
...searchInput.popoverProps
}}
searchBtnProps={{ className: 'fd-shellbar__button' }}
searchList={searchInput.searchList} />
</div>
Expand Down Expand Up @@ -452,7 +459,9 @@ class Shellbar extends Component {
</ul>
</div>
}
control={<Button className='fd-product-switch__control fd-shellbar__button'
control={<Button
aria-label={productSwitch.label}
className='fd-product-switch__control fd-shellbar__button'
disableStyles={disableStyles}
glyph='grid' />}
disableEdgeDetection
Expand Down Expand Up @@ -499,8 +508,11 @@ Shellbar.propTypes = {
notifications: PropTypes.object,
/** Holds product titles and navigation */
productMenu: PropTypes.array,
/** For navigating between products */
productSwitch: PropTypes.object,
/** For navigating between products. An object that contains an accessible and localized label for product switch button. */
productSwitch: PropTypes.shape({
/** Accessible and localized label for product switch button */
label: PropTypes.string.isRequired
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 Should we mark this as a breaking change when merging since this is now required?

}),
/** Array of objects containing data about the products.
* Callback, title, and glyph are required; subtitle is optional. */
productSwitchList: PropTypes.arrayOf(
Expand All @@ -519,7 +531,7 @@ Shellbar.propTypes = {
profile: PropTypes.object,
/** List of items for the profile menu */
profileMenu: PropTypes.array,
/** Holds `searchInput` properties */
/** Holds `searchInput` [properties](?id=component-api-searchinput--compact&viewMode=docs#properties) */
searchInput: PropTypes.object,
/** Displays an application context. Should be used rarely */
subtitle: PropTypes.string
Expand Down
1 change: 1 addition & 0 deletions src/TreeView/__stories__/__snapshots__/TreeView.visual.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17184,6 +17184,7 @@ exports[`Storyshots Visual Shellbar 1`] = `
aria-controls="fd-shellbar-product-switch-popover"
aria-expanded={false}
aria-haspopup={true}
aria-label="Product Switch"
className="fd-button sap-icon--grid fd-product-switch__control fd-shellbar__button"
onClick={[Function]}
onKeyPress={[Function]}
Expand Down