-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor/add misc header types (#15768)
* refactor: type out Header component * refactor: type out rest of header components * refactor: typed out SideNavLink * refactor: add LinkPropTypes to SideNavLinkProps * refactor: headermenu failing tests, reverting
- Loading branch information
Showing
5 changed files
with
234 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 0 additions & 100 deletions
100
packages/react/src/components/UIShell/HeaderGlobalAction.js
This file was deleted.
Oops, something went wrong.
136 changes: 136 additions & 0 deletions
136
packages/react/src/components/UIShell/HeaderGlobalAction.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2023 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import cx from 'classnames'; | ||
import React, { ReactNode } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { AriaLabelPropType } from '../../prop-types/AriaPropTypes'; | ||
import Button from '../Button'; | ||
import { usePrefix } from '../../internal/usePrefix'; | ||
|
||
interface HeaderGlobalActionProps { | ||
/** | ||
* Required props for the accessibility label of the button | ||
*/ | ||
'aria-label'?: string; | ||
/** | ||
* Required props for the accessibility label of the button | ||
*/ | ||
'aria-labelledby'?: string; | ||
/** | ||
* Provide a custom icon for this global action | ||
*/ | ||
children: ReactNode; | ||
/** | ||
* Optionally provide a custom class name that is applied to the underlying | ||
* button | ||
*/ | ||
className?: string; | ||
/** | ||
* Specify whether the action is currently active | ||
*/ | ||
isActive?: boolean; | ||
/** | ||
* Optionally provide an onClick handler that is called when the underlying | ||
* button fires it's onclick event | ||
*/ | ||
onClick?: () => void; | ||
/** | ||
* Specify the alignment of the tooltip to the icon-only button. | ||
* Can be one of: start, center, or end. | ||
*/ | ||
tooltipAlignment?: 'start' | 'center' | 'end'; | ||
} | ||
|
||
/** | ||
* HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is | ||
* essentially an Icon Button with an additional state to indicate whether it is | ||
* "active". The active state comes from when a user clicks on the global action | ||
* which should trigger a panel to appear. | ||
* | ||
* Note: children passed to this component should be an Icon. | ||
*/ | ||
const HeaderGlobalAction: React.FC<HeaderGlobalActionProps> = React.forwardRef( | ||
function HeaderGlobalAction( | ||
{ | ||
'aria-label': ariaLabel, | ||
'aria-labelledby': ariaLabelledBy, | ||
children, | ||
className: customClassName, | ||
onClick, | ||
isActive, | ||
tooltipAlignment, | ||
...rest | ||
}, | ||
ref | ||
) { | ||
const prefix = usePrefix(); | ||
const className = cx({ | ||
[customClassName as string]: !!customClassName, | ||
[`${prefix}--header__action`]: true, | ||
[`${prefix}--header__action--active`]: isActive, | ||
}); | ||
const accessibilityLabel = { | ||
'aria-label': ariaLabel, | ||
'aria-labelledby': ariaLabelledBy, | ||
}; | ||
return ( | ||
<Button | ||
{...rest} | ||
{...accessibilityLabel} | ||
className={className} | ||
onClick={onClick} | ||
type="button" | ||
hasIconOnly | ||
iconDescription={ariaLabel} | ||
tooltipPosition="bottom" | ||
tooltipAlignment={tooltipAlignment} | ||
ref={ref}> | ||
{children} | ||
</Button> | ||
); | ||
} | ||
); | ||
|
||
HeaderGlobalAction.propTypes = { | ||
/** | ||
* Required props for the accessibility label of the button | ||
*/ | ||
...AriaLabelPropType, | ||
|
||
/** | ||
* Provide a custom icon for this global action | ||
*/ | ||
children: PropTypes.node.isRequired, | ||
|
||
/** | ||
* Optionally provide a custom class name that is applied to the underlying | ||
* button | ||
*/ | ||
className: PropTypes.string, | ||
|
||
/** | ||
* Specify whether the action is currently active | ||
*/ | ||
isActive: PropTypes.bool, | ||
|
||
/** | ||
* Optionally provide an onClick handler that is called when the underlying | ||
* button fires it's onclick event | ||
*/ | ||
onClick: PropTypes.func, | ||
|
||
/** | ||
* Specify the alignment of the tooltip to the icon-only button. | ||
* Can be one of: start, center, or end. | ||
*/ | ||
tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']), | ||
}; | ||
|
||
HeaderGlobalAction.displayName = 'HeaderGlobalAction'; | ||
|
||
export default HeaderGlobalAction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters