@instructure/ui-avatar 11.7.4-snapshot-130 → 11.7.4-snapshot-134

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +10 -10
  3. package/src/Avatar/v2/README.md +13 -13
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.4-snapshot-130](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-130) (2026-07-23)
6
+ ## [11.7.4-snapshot-134](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-134) (2026-07-24)
7
7
 
8
8
 
9
9
  ### Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-avatar",
3
- "version": "11.7.4-snapshot-130",
3
+ "version": "11.7.4-snapshot-134",
4
4
  "description": "An image or letters that represents a user.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,20 +15,20 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
- "@instructure/emotion": "11.7.4-snapshot-130",
19
- "@instructure/shared-types": "11.7.4-snapshot-130",
20
- "@instructure/ui-icons": "11.7.4-snapshot-130",
21
- "@instructure/ui-themes": "11.7.4-snapshot-130",
22
- "@instructure/ui-react-utils": "11.7.4-snapshot-130",
23
- "@instructure/ui-view": "11.7.4-snapshot-130"
18
+ "@instructure/emotion": "11.7.4-snapshot-134",
19
+ "@instructure/shared-types": "11.7.4-snapshot-134",
20
+ "@instructure/ui-react-utils": "11.7.4-snapshot-134",
21
+ "@instructure/ui-icons": "11.7.4-snapshot-134",
22
+ "@instructure/ui-themes": "11.7.4-snapshot-134",
23
+ "@instructure/ui-view": "11.7.4-snapshot-134"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@testing-library/jest-dom": "^6.9.1",
27
27
  "@testing-library/react": "16.3.2",
28
28
  "vitest": "^4.1.9",
29
- "@instructure/ui-axe-check": "11.7.4-snapshot-130",
30
- "@instructure/ui-babel-preset": "11.7.4-snapshot-130",
31
- "@instructure/ui-color-utils": "11.7.4-snapshot-130"
29
+ "@instructure/ui-axe-check": "11.7.4-snapshot-134",
30
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-134",
31
+ "@instructure/ui-color-utils": "11.7.4-snapshot-134"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=18 <=19"
package/src/Avatar/v2/README.md CHANGED
@@ -15,7 +15,7 @@ readonly: true
15
15
  ---
16
16
 
17
17
  <div>
18
- <View display="block" padding="small medium" background="primary">
18
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
19
19
  <Avatar name="Arthur C. Clarke" />
20
20
  <Avatar name="James Arias" color="accent2" />
21
21
  <Avatar name="Charles Kimball" color="accent3" />
@@ -24,7 +24,7 @@ readonly: true
24
24
  <Avatar name="David Herbert" color="accent6" />
25
25
  <Avatar name="Isaac Asimov" color="accent1" />
26
26
  </View>
27
- <View display="block" padding="small medium" background="primary">
27
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
28
28
  <Avatar name="Arthur C. Clarke" hasInverseColor />
29
29
  <Avatar name="James Arias" color="accent2" hasInverseColor />
30
30
  <Avatar name="Charles Kimball" color="accent3" hasInverseColor />
@@ -45,7 +45,7 @@ There is a need for special, `ai avatars`. These have a specific look. You can a
45
45
  type: example
46
46
  readonly: true
47
47
  ---
48
- <View display="block" padding="small medium" background="primary">
48
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
49
49
  <Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
50
50
  <Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
51
51
  <Avatar size="small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
@@ -65,7 +65,7 @@ Lucide icons in Avatar are automatically sized and colored according to the Avat
65
65
  type: example
66
66
  ---
67
67
  <div>
68
- <View display="block" padding="small medium">
68
+ <View display="block" padding="general.spaceMd general.spaceXl">
69
69
  <Avatar name="User Avatar" size="xx-small" renderIcon={UserInstUIIcon} />
70
70
  <Avatar name="User Avatar" size="x-small" renderIcon={UserInstUIIcon} />
71
71
  <Avatar name="User Avatar" size="small" renderIcon={UserInstUIIcon} />
@@ -74,12 +74,12 @@ type: example
74
74
  <Avatar name="User Avatar" size="x-large" renderIcon={UserInstUIIcon} />
75
75
  <Avatar name="User Avatar" size="xx-large" renderIcon={UserInstUIIcon} />
76
76
  </View>
77
- <View display="block" padding="small medium">
77
+ <View display="block" padding="general.spaceMd general.spaceXl">
78
78
  <Avatar name="Profile" size="small" color="accent2" renderIcon={<CircleUserInstUIIcon />} />
79
79
  <Avatar name="Group" size="medium" color="accent3" renderIcon={<UsersInstUIIcon />} />
80
80
  <Avatar name="Settings" size="large" color="accent4" renderIcon={<SettingsInstUIIcon />} />
81
81
  </View>
82
- <View display="block" padding="small medium">
82
+ <View display="block" padding="general.spaceMd general.spaceXl">
83
83
  <Avatar name="Profile" size="large" color="accent4" renderIcon={()=><CircleUserInstUIIcon />} />
84
84
  <Avatar name="Group" size="x-large" color="accent5" renderIcon={()=><UsersInstUIIcon />} />
85
85
  <Avatar name="Settings" size="xx-large" color="accent6" renderIcon={()=><SettingsInstUIIcon />} />
@@ -96,7 +96,7 @@ The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `mediu
96
96
  type: example
97
97
  ---
98
98
  <div>
99
- <View display="block" padding="small medium">
99
+ <View display="block" padding="general.spaceMd general.spaceXl">
100
100
  <Avatar name="Arthur C. Clarke" size="xx-small" />
101
101
  <Avatar name="James Arias" size="x-small" />
102
102
  <Avatar name="Charles Kimball" size="small" />
@@ -105,7 +105,7 @@ type: example
105
105
  <Avatar name="David Herbert" size="x-large" />
106
106
  <Avatar name="Isaac Asimov" size="xx-large" />
107
107
  </View>
108
- <View display="block" padding="small medium" background="primary">
108
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
109
109
  <Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
110
110
  <Avatar name="James Arias" size="x-small" src={avatarSquare} />
111
111
  <Avatar name="Charles Kimball" size="small" src={avatarSquare} />
@@ -114,7 +114,7 @@ type: example
114
114
  <Avatar name="David Herbert" size="x-large" src={avatarSquare} />
115
115
  <Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
116
116
  </View>
117
- <View display="block" padding="small medium">
117
+ <View display="block" padding="general.spaceMd general.spaceXl">
118
118
  <Avatar name="Arthur C. Clarke" renderIcon={UsersInstUIIcon} size="xx-small" />
119
119
  <Avatar name="James Arias" renderIcon={UsersInstUIIcon} size="x-small" />
120
120
  <Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} size="small" />
@@ -135,7 +135,7 @@ The color of the initials and icons can be set with the `color` prop, and it all
135
135
  type: example
136
136
  ---
137
137
  <div>
138
- <View display="block" padding="small medium">
138
+ <View display="block" padding="general.spaceMd general.spaceXl">
139
139
  <Avatar name="Arthur C. Clarke" />
140
140
  <Avatar name="James Arias" color="accent2" />
141
141
  <Avatar name="Charles Kimball" color="accent3" />
@@ -144,7 +144,7 @@ type: example
144
144
  <Avatar name="David Herbert" color="accent6" />
145
145
  <Avatar name="Isaac Asimov" color="accent1" />
146
146
  </View>
147
- <View display="block" padding="small medium">
147
+ <View display="block" padding="general.spaceMd general.spaceXl">
148
148
  <Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" />
149
149
  <Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" />
150
150
  <Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" />
@@ -165,7 +165,7 @@ Inverted Avatars have **no border**.
165
165
  type: example
166
166
  ---
167
167
  <div>
168
- <View display="block" padding="small medium" background="primary">
168
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
169
169
  <Avatar name="Arthur C. Clarke" hasInverseColor />
170
170
  <Avatar name="James Arias" color="accent2" hasInverseColor />
171
171
  <Avatar name="Charles Kimball" color="accent3" hasInverseColor />
@@ -174,7 +174,7 @@ type: example
174
174
  <Avatar name="David Herbert" color="accent6" hasInverseColor />
175
175
  <Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
176
176
  </View>
177
- <View display="block" padding="small medium" background="primary">
177
+ <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
178
178
  <Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" hasInverseColor />
179
179
  <Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" hasInverseColor />
180
180
  <Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" hasInverseColor />