@hero-design/rn 8.121.0 → 8.122.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hero-design/rn
 
+## 8.122.0
+
+### Minor Changes
+
+- [#4992](https://github.com/Thinkei/hero-design/pull/4992) [`87bd2b334180c9908328a7cdd2e686694dae1d7d`](https://github.com/Thinkei/hero-design/commit/87bd2b334180c9908328a7cdd2e686694dae1d7d) Thanks [@haudao-eh](https://github.com/haudao-eh)! - [Avatar] Add `neutral` intent to Avatar. `neutral` is now the default intent, replacing `primary`.
+
+  **Note:** Any Avatar rendered without an explicit `intent` prop will now
+  display a teal-grey background instead of dark purple. Add `intent="primary"`
+  to preserve the previous appearance.
+
 ## 8.121.0
 
 ### Minor Changes

package/es/index.js

@@ -5614,6 +5614,7 @@ var getAttachmentTheme = function getAttachmentTheme(theme) {
 
 var getAvatarTheme = function getAvatarTheme(theme) {
   var colors = {
+    neutral: palette$8.maasstrichtBlueLight25,
     primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,
@@ -9873,7 +9874,7 @@ var Avatar = function Avatar(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$intent = _ref.intent,
-    intent = _ref$intent === void 0 ? 'primary' : _ref$intent;
+    intent = _ref$intent === void 0 ? 'neutral' : _ref$intent;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageError = _useState2[0],

package/lib/index.js

@@ -5644,6 +5644,7 @@ var getAttachmentTheme = function getAttachmentTheme(theme) {
 
 var getAvatarTheme = function getAvatarTheme(theme) {
   var colors = {
+    neutral: palette$8.maasstrichtBlueLight25,
     primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,
@@ -9903,7 +9904,7 @@ var Avatar = function Avatar(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$intent = _ref.intent,
-    intent = _ref$intent === void 0 ? 'primary' : _ref$intent;
+    intent = _ref$intent === void 0 ? 'neutral' : _ref$intent;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageError = _useState2[0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.121.0",
+  "version": "8.122.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Avatar/Avatar.tsx

@@ -26,9 +26,9 @@ export interface AvatarProps extends ViewProps {
    */
   title?: string;
   /**
-   * Intent of the Icon.
+   * Visual intent of the Avatar. Defaults to `'neutral'`.
    */
-  intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  intent?: 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /**
    * Size of the avatar.
    */
@@ -58,7 +58,7 @@ const Avatar = ({
   style,
   title,
   size = 'small',
-  intent = 'primary',
+  intent = 'neutral',
 }: AvatarProps) => {
   const [hasImageError, setHasImageError] = useState(false);
 

package/src/components/Avatar/StyledAvatar.tsx

@@ -12,7 +12,13 @@ type ThemeSize =
   | 'xxxlarge'
   | 'xxxxlarge'
   | 'xxxxxlarge';
-type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeIntent =
+  | 'neutral'
+  | 'primary'
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning';
 
 const StyledWrapper = styled(TouchableOpacity)<{
   themeSize: ThemeSize;

package/src/theme/components/avatar.ts

@@ -1,7 +1,9 @@
+import { mobileAvatarPalette } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
   const colors = {
+    neutral: mobileAvatarPalette.maasstrichtBlueLight25,
     primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,

package/types/components/Avatar/Avatar.d.ts

@@ -14,9 +14,9 @@ export interface AvatarProps extends ViewProps {
      */
     title?: string;
     /**
-     * Intent of the Icon.
+     * Visual intent of the Avatar. Defaults to `'neutral'`.
      */
-    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    intent?: 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /**
      * Size of the avatar.
      */

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,7 +1,7 @@
 import { View, Image } from 'react-native';
 import type { TextProps } from '../Typography/Text';
 type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
-type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeIntent = 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/theme/components/avatar.d.ts

@@ -1,6 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getAvatarTheme: (theme: GlobalTheme) => {
     colors: {
+        neutral: string;
         primary: string;
         info: string;
         danger: string;