@atlaskit/avatar
Advanced tools
Comparing version 21.1.1 to 21.1.2
# @atlaskit/avatar | ||
## 21.1.2 | ||
### Patch Changes | ||
- [`47f0e63c935`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f0e63c935) - Internal changes to apply spacing tokens. This should be a no-op change. | ||
## 21.1.1 | ||
@@ -4,0 +10,0 @@ |
@@ -41,3 +41,3 @@ "use strict"; | ||
var packageName = "@atlaskit/avatar"; | ||
var packageVersion = "21.1.1"; | ||
var packageVersion = "21.1.2"; | ||
@@ -54,3 +54,3 @@ var getStyles = function getStyles(css, _ref) { | ||
return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n }\n\n :hover {\n &::after {\n background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n }\n ")) | ||
css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: ", ";\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: ", ";\n padding: ", ";\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n }\n\n :hover {\n &::after {\n background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n }\n ")) | ||
); | ||
@@ -57,0 +57,0 @@ }; |
@@ -40,2 +40,3 @@ "use strict"; | ||
flex: '1 1 100%', | ||
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing | ||
lineHeight: '1.4' | ||
@@ -49,3 +50,3 @@ }); | ||
return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n background-color: ", ";\n border-radius: ", "px;\n border: ", "px solid transparent;\n box-sizing: border-box;\n color: inherit;\n display: flex;\n font-size: inherit;\n font-style: normal;\n font-weight: normal;\n line-height: 1;\n outline: none;\n margin: 0;\n padding: ", ";\n text-align: left;\n text-decoration: none;\n width: 100%;\n\n ", "\n\n ", "\n "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-scale-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n ")) | ||
css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n background-color: ", ";\n border-radius: ", "px;\n border: ", "px solid transparent;\n box-sizing: border-box;\n color: inherit;\n display: flex;\n font-size: inherit;\n font-style: normal;\n font-weight: normal;\n line-height: 1;\n outline: none;\n margin: ", ";\n padding: ", ";\n text-align: left;\n text-decoration: none;\n width: 100%;\n\n ", "\n\n ", "\n "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n ")) | ||
); | ||
@@ -52,0 +53,0 @@ }; |
{ | ||
"name": "@atlaskit/avatar", | ||
"version": "21.1.1", | ||
"version": "21.1.2", | ||
"sideEffects": false | ||
} |
@@ -13,3 +13,3 @@ /** @jsx jsx */ | ||
const packageName = "@atlaskit/avatar"; | ||
const packageVersion = "21.1.1"; | ||
const packageVersion = "21.1.2"; | ||
@@ -44,3 +44,3 @@ const getStyles = (css, { | ||
margin: ${BORDER_WIDTH}px; | ||
padding: 0; | ||
padding: ${"var(--ds-scale-0, 0px)"}; | ||
@@ -53,4 +53,4 @@ /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */ | ||
border: 0; | ||
margin: 0; | ||
padding: 0; | ||
margin: ${"var(--ds-scale-0, 0px)"}; | ||
padding: ${"var(--ds-scale-0, 0px)"}; | ||
} | ||
@@ -57,0 +57,0 @@ |
@@ -16,2 +16,3 @@ /** @jsx jsx */ | ||
flex: '1 1 100%', | ||
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing | ||
lineHeight: '1.4' | ||
@@ -38,3 +39,3 @@ }); | ||
outline: none; | ||
margin: 0; | ||
margin: ${"var(--ds-scale-0, 0px)"}; | ||
padding: ${"var(--ds-scale-050, 4px)"}; | ||
@@ -41,0 +42,0 @@ text-align: left; |
{ | ||
"name": "@atlaskit/avatar", | ||
"version": "21.1.1", | ||
"version": "21.1.2", | ||
"sideEffects": false | ||
} |
@@ -23,3 +23,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty"; | ||
var packageName = "@atlaskit/avatar"; | ||
var packageVersion = "21.1.1"; | ||
var packageVersion = "21.1.2"; | ||
@@ -36,3 +36,3 @@ var getStyles = function getStyles(css, _ref) { | ||
return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n }\n\n :hover {\n &::after {\n background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n }\n ")) | ||
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: ", ";\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: ", ";\n padding: ", ";\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n }\n\n :hover {\n &::after {\n background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n }\n ")) | ||
); | ||
@@ -39,0 +39,0 @@ }; |
@@ -25,2 +25,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty"; | ||
flex: '1 1 100%', | ||
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing | ||
lineHeight: '1.4' | ||
@@ -34,3 +35,3 @@ }); | ||
return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n border-radius: ", "px;\n border: ", "px solid transparent;\n box-sizing: border-box;\n color: inherit;\n display: flex;\n font-size: inherit;\n font-style: normal;\n font-weight: normal;\n line-height: 1;\n outline: none;\n margin: 0;\n padding: ", ";\n text-align: left;\n text-decoration: none;\n width: 100%;\n\n ", "\n\n ", "\n "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-scale-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n ")) | ||
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n border-radius: ", "px;\n border: ", "px solid transparent;\n box-sizing: border-box;\n color: inherit;\n display: flex;\n font-size: inherit;\n font-style: normal;\n font-weight: normal;\n line-height: 1;\n outline: none;\n margin: ", ";\n padding: ", ";\n text-align: left;\n text-decoration: none;\n width: 100%;\n\n ", "\n\n ", "\n "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n ")) | ||
); | ||
@@ -37,0 +38,0 @@ }; |
{ | ||
"name": "@atlaskit/avatar", | ||
"version": "21.1.1", | ||
"version": "21.1.2", | ||
"sideEffects": false | ||
} |
{ | ||
"name": "@atlaskit/avatar", | ||
"version": "21.1.1", | ||
"version": "21.1.2", | ||
"description": "An avatar is a visual representation of a user or entity.", | ||
@@ -15,10 +15,2 @@ "publishConfig": { | ||
"types": "dist/types/index.d.ts", | ||
"typesVersions": { | ||
">=4.0 <4.5": { | ||
"*": [ | ||
"dist/types-ts4.0/*", | ||
"dist/types-ts4.0/index.d.ts" | ||
] | ||
} | ||
}, | ||
"sideEffects": false, | ||
@@ -57,3 +49,3 @@ "atlaskit:src": "src/index.ts", | ||
"devDependencies": { | ||
"@atlaskit/button": "^16.3.0", | ||
"@atlaskit/button": "^16.4.0", | ||
"@atlaskit/docs": "*", | ||
@@ -60,0 +52,0 @@ "@atlaskit/ds-lib": "^2.1.1", |
@@ -1,5 +0,9 @@ | ||
## API Report File for "@atlaskit/avatar". | ||
## API Report File for "@atlaskit/avatar" | ||
> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/). | ||
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). | ||
<!-- | ||
Generated API Report version: 2.0 | ||
--> | ||
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports) | ||
@@ -18,16 +22,10 @@ | ||
export declare const ACTIVE_SCALE_FACTOR = 0.9; | ||
// @public (undocumented) | ||
export const ACTIVE_SCALE_FACTOR = 0.9; | ||
export declare type AppearanceType = 'circle' | 'square'; | ||
// @public (undocumented) | ||
export type AppearanceType = 'circle' | 'square'; | ||
/** | ||
* __Avatar__ | ||
* | ||
* An avatar is a visual representation of a user or entity. | ||
* | ||
* - [Examples](https://atlassian.design/components/avatar/examples) | ||
* - [Code](https://atlassian.design/components/avatar/code) | ||
* - [Usage](https://atlassian.design/components/avatar/usage) | ||
*/ | ||
declare const Avatar: ForwardRefExoticComponent< | ||
// @public | ||
const Avatar: ForwardRefExoticComponent< | ||
AvatarPropTypes & RefAttributes<HTMLElement> | ||
@@ -37,7 +35,10 @@ >; | ||
export declare const AVATAR_RADIUS: AvatarSizeMap; | ||
// @public (undocumented) | ||
export const AVATAR_RADIUS: AvatarSizeMap; | ||
export declare const AVATAR_SIZES: AvatarSizeMap; | ||
// @public (undocumented) | ||
export const AVATAR_SIZES: AvatarSizeMap; | ||
export declare type AvatarClickEventHandler = ( | ||
// @public (undocumented) | ||
export type AvatarClickEventHandler = ( | ||
event: React.MouseEvent, | ||
@@ -47,222 +48,107 @@ analyticsEvent?: UIAnalyticsEvent, | ||
/** | ||
* __Avatar item__ | ||
* | ||
* An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status. | ||
* | ||
* - [Examples](https://atlassian.design/components/avatar/avatar-item/examples) | ||
* - [Code](https://atlassian.design/components/avatar/avatar-item/code) | ||
*/ | ||
export declare const AvatarItem: ForwardRefExoticComponent< | ||
// @public | ||
export const AvatarItem: ForwardRefExoticComponent< | ||
AvatarItemProps & RefAttributes<HTMLElement> | ||
>; | ||
export declare interface AvatarItemProps { | ||
/** | ||
* Used to provide better content to screen readers when using presence/status. Rather | ||
* than a screen reader speaking "online, approved, John Smith", passing in an label | ||
* allows a custom message like "John Smith (approved and online)". | ||
*/ | ||
label?: string; | ||
/** | ||
* Slot to place an avatar element. Use @atlaskit/avatar. | ||
*/ | ||
// @public (undocumented) | ||
export interface AvatarItemProps { | ||
avatar: ReactNode; | ||
/** | ||
* Change background color. | ||
*/ | ||
backgroundColor?: string; | ||
/** | ||
* Use a custom component instead of the default span. | ||
*/ | ||
children?: (props: CustomAvatarItemProps) => ReactNode; | ||
/** | ||
* URL for avatars being used as a link. | ||
*/ | ||
href?: string; | ||
/** | ||
* Disable the item from being interactive | ||
*/ | ||
isDisabled?: boolean; | ||
/** | ||
* Handler to be called on click. | ||
*/ | ||
isTruncationDisabled?: boolean; | ||
label?: string; | ||
onClick?: AvatarClickEventHandler; | ||
/** | ||
* PrimaryText text. | ||
*/ | ||
primaryText?: ReactNode; | ||
/** | ||
* SecondaryText text. | ||
*/ | ||
secondaryText?: ReactNode; | ||
/** | ||
* Pass target down to the anchor, if href is provided. | ||
*/ | ||
target?: '_blank' | '_self' | '_top' | '_parent'; | ||
/** | ||
* By default, overflowing text is truncated if it exceeds the container width. Use this prop to disable this. | ||
*/ | ||
isTruncationDisabled?: boolean; | ||
/** | ||
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests | ||
*/ | ||
testId?: string; | ||
} | ||
export declare interface AvatarPropTypes { | ||
/** | ||
* Indicates the shape of the avatar. Most avatars are circular, but square avatars | ||
* can be used for 'container' objects. | ||
*/ | ||
// @public (undocumented) | ||
export interface AvatarPropTypes { | ||
analyticsContext?: Record<string, any>; | ||
appearance?: AppearanceType; | ||
/** | ||
* Used to provide better content to screen readers when using presence/status. Rather | ||
* than a screen reader speaking "online, approved, John Smith", passing in a label | ||
* allows a custom message like "John Smith (approved and online)". | ||
*/ | ||
label?: string; | ||
/** | ||
* Used to override the default border color around the avatar body. | ||
* Accepts any color argument that the border-color CSS property accepts. | ||
*/ | ||
borderColor?: string; | ||
/** | ||
* Supply a custom avatar component instead of the default | ||
*/ | ||
children?: (props: CustomAvatarProps) => ReactNode; | ||
/** | ||
* Provides a url for avatars being used as a link. | ||
*/ | ||
href?: string; | ||
/** | ||
* Change the style to indicate the avatar is disabled. | ||
*/ | ||
isDisabled?: boolean; | ||
/** | ||
* Provides alt text for the avatar image. | ||
*/ | ||
label?: string; | ||
name?: string; | ||
/** | ||
* Indicates a user's online status by showing a small icon on the avatar. | ||
* Refer to presence values on the Presence component. | ||
* Alternatively accepts any React element. For best results, it is recommended to | ||
* use square content with height and width of 100%. | ||
*/ | ||
onClick?: AvatarClickEventHandler; | ||
presence?: ('online' | 'busy' | 'focus' | 'offline') | ReactNode; | ||
/** | ||
* Defines the size of the avatar | ||
*/ | ||
size?: SizeType; | ||
/** | ||
* A url to load an image from (this can also be a base64 encoded image). | ||
*/ | ||
src?: string; | ||
/** | ||
* Indicates contextual information by showing a small icon on the avatar. | ||
* Refer to status values on the Status component. | ||
*/ | ||
stackIndex?: number; | ||
status?: ('approved' | 'declined' | 'locked') | ReactNode; | ||
/** | ||
* The index of where this avatar is in the group `stack`. | ||
*/ | ||
stackIndex?: number; | ||
/** | ||
* Assign specific tabIndex order to the underlying node. | ||
*/ | ||
tabIndex?: number; | ||
/** | ||
* Pass target down to the anchor, if href is provided. | ||
*/ | ||
target?: '_blank' | '_self' | '_top' | '_parent'; | ||
/** | ||
* Handler to be called on click. | ||
*/ | ||
onClick?: AvatarClickEventHandler; | ||
/** | ||
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests | ||
*/ | ||
testId?: string; | ||
/** | ||
* Analytics context meta data | ||
*/ | ||
analyticsContext?: Record<string, any>; | ||
} | ||
declare type AvatarSizeMap = Record<SizeType, number>; | ||
// @public (undocumented) | ||
type AvatarSizeMap = Record<SizeType, number>; | ||
export declare const BORDER_WIDTH = 2; | ||
// @public (undocumented) | ||
export const BORDER_WIDTH = 2; | ||
export declare interface CustomAvatarItemProps { | ||
testId?: string; | ||
onClick?: MouseEventHandler; | ||
// @public (undocumented) | ||
export interface CustomAvatarItemProps { | ||
// (undocumented) | ||
'aria-disabled'?: boolean | 'false' | 'true' | undefined; | ||
'aria-label'?: string; | ||
// (undocumented) | ||
children: ReactNode; | ||
// (undocumented) | ||
className?: string; | ||
// (undocumented) | ||
href?: string; | ||
children: ReactNode; | ||
// (undocumented) | ||
onClick?: MouseEventHandler; | ||
// (undocumented) | ||
ref: Ref<HTMLElement>; | ||
/** | ||
* This is used in render props so is okay to be defined. | ||
* eslint-disable-next-line consistent-props-definitions | ||
*/ | ||
'aria-label'?: string; | ||
'aria-disabled'?: boolean | 'false' | 'true' | undefined; | ||
// (undocumented) | ||
testId?: string; | ||
} | ||
export declare interface CustomAvatarProps { | ||
/** | ||
* This is used in render props so is okay to be defined. | ||
* eslint-disable-next-line consistent-props-definitions | ||
*/ | ||
// @public (undocumented) | ||
export interface CustomAvatarProps { | ||
'aria-label'?: string; | ||
tabIndex?: number; | ||
testId?: string; | ||
onClick?: MouseEventHandler; | ||
// (undocumented) | ||
children: ReactNode; | ||
// (undocumented) | ||
className?: string; | ||
// (undocumented) | ||
href?: string; | ||
children: ReactNode; | ||
// (undocumented) | ||
onClick?: MouseEventHandler; | ||
// (undocumented) | ||
ref: Ref<HTMLElement>; | ||
// (undocumented) | ||
tabIndex?: number; | ||
// (undocumented) | ||
testId?: string; | ||
} | ||
export declare type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge'; | ||
// @public (undocumented) | ||
export type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge'; | ||
/** | ||
* __Avatar presence__ | ||
* | ||
* A presence shows an avatar’s availability. | ||
* | ||
* - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples) | ||
* - [Code](https://atlassian.design/components/avatar/avatar-presence/code) | ||
* - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage) | ||
*/ | ||
export declare const Presence: FC<PresenceProps>; | ||
// @public | ||
export const Presence: FC<PresenceProps>; | ||
export declare interface PresenceProps { | ||
/** | ||
* Used to override the default border color of the presence indicator. | ||
* Accepts any color argument that the border-color CSS property accepts. | ||
*/ | ||
// @public (undocumented) | ||
export interface PresenceProps { | ||
borderColor?: string; | ||
/** | ||
* Content to use as a custom presence indicator (usually not required if | ||
* consuming Presence separate to Avatar). | ||
*/ | ||
children?: ReactNode; | ||
/** | ||
* The type of presence indicator to show | ||
*/ | ||
presence?: PresenceType; | ||
/** | ||
* Test Id | ||
*/ | ||
testId?: string; | ||
} | ||
export declare type PresenceType = | ||
| 'busy' | ||
| 'focus' | ||
| 'offline' | ||
| 'online' | ||
| ReactNode; | ||
// @public (undocumented) | ||
export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode; | ||
export declare type SizeType = | ||
// @public (undocumented) | ||
export type SizeType = | ||
| 'xsmall' | ||
@@ -275,52 +161,31 @@ | 'small' | ||
/** | ||
* __Skeleton__ | ||
* | ||
* A skeleton is the loading state for the avatar component. | ||
* | ||
* - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples) | ||
* - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code) | ||
*/ | ||
export declare const Skeleton: FC<SkeletonProps>; | ||
// @public | ||
export const Skeleton: FC<SkeletonProps>; | ||
export declare interface SkeletonProps { | ||
// @public (undocumented) | ||
export interface SkeletonProps { | ||
// (undocumented) | ||
appearance?: AppearanceType; | ||
// (undocumented) | ||
color?: string; | ||
// (undocumented) | ||
size?: SizeType; | ||
// (undocumented) | ||
weight?: 'normal' | 'strong'; | ||
} | ||
/** | ||
* __Avatar status__ | ||
* | ||
* An avatar status shows contextual information, such as if someone approves or declines something. | ||
* | ||
* - [Examples](https://atlassian.design/components/avatar/avatar-status/examples) | ||
* - [Code](https://atlassian.design/components/avatar/avatar-status/code) | ||
*/ | ||
export declare const Status: FC<StatusProps>; | ||
// @public | ||
export const Status: FC<StatusProps>; | ||
export declare interface StatusProps { | ||
/** | ||
* Override the default border color of the status indicator. This accepts | ||
* any color argument that the CSS property `border-color` accepts. | ||
*/ | ||
// @public (undocumented) | ||
export interface StatusProps { | ||
borderColor?: string; | ||
/** | ||
* Content to use as a custom status indicator. Not needed if consuming | ||
* `Status` separate to `Avatar`. | ||
*/ | ||
children?: ReactNode; | ||
/** | ||
* Content to use as a custom status indicator. Not needed if consuming | ||
* `Status` separate to `Avatar`. | ||
*/ | ||
status?: StatusType; | ||
} | ||
export declare type StatusType = | ||
| ('approved' | 'declined' | 'locked') | ||
| ReactNode; | ||
// @public (undocumented) | ||
export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode; | ||
export {}; | ||
// (No @packageDocumentation comment for this package) | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
212193
91
3811