@sanity/ui 2.0.0-alpha.22 → 2.0.0-alpha.23

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 (8) hide show
  1. package/dist/index.esm.js +12 -5
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +12 -5
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/primitives/avatar/avatar.tsx +4 -2
  7. package/src/primitives/avatar/styles.ts +7 -0
  8. package/src/theme/studioTheme/theme.ts +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/ui",
3
- "version": "2.0.0-alpha.22",
3
+ "version": "2.0.0-alpha.23",
4
4
  "sideEffects": false,
5
5
  "types": "./dist/index.d.ts",
6
6
  "source": "./src/index.ts",
package/src/primitives/avatar/avatar.tsx CHANGED
@@ -42,6 +42,8 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
42
42
 
43
43
  const Initials = styled.div(avatarStyle.initials)
44
44
 
45
+ const Image = styled.svg(avatarStyle.image)
46
+
45
47
  /**
46
48
  * Avatars are used to represent people and other agents (e.g. bots).
47
49
  *
@@ -131,7 +133,7 @@ export const Avatar = forwardRef(function Avatar(
131
133
  </Arrow>
132
134
 
133
135
  {!imageFailed && src && (
134
- <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
136
+ <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
135
137
  <defs>
136
138
  <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
137
139
  <image
@@ -162,7 +164,7 @@ export const Avatar = forwardRef(function Avatar(
162
164
  stroke={color}
163
165
  vectorEffect="non-scaling-stroke"
164
166
  />
165
- </svg>
167
+ </Image>
166
168
  )}
167
169
 
168
170
  {(imageFailed || !src) && initials && (
package/src/primitives/avatar/styles.ts CHANGED
@@ -9,6 +9,7 @@ export const avatarStyle = {
9
9
  bgStroke: avatarBgStrokeStyle,
10
10
  stroke: avatarStrokeStyle,
11
11
  initials: avatarInitialsStyle,
12
+ image: avatarImageStyle,
12
13
  }
13
14
 
14
15
  function avatarArrowStyle(): CSSObject {
@@ -123,6 +124,12 @@ export function responsiveAvatarSizeStyle(
123
124
  })
124
125
  }
125
126
 
127
+ export function avatarImageStyle(): CSSObject {
128
+ return {
129
+ position: 'relative',
130
+ }
131
+ }
132
+
126
133
  export function avatarInitialsStyle(props: ThemeProps): CSSObject {
127
134
  const {theme} = props
128
135
  const {base} = theme.sanity.color
package/src/theme/studioTheme/theme.ts CHANGED
@@ -8,9 +8,9 @@ import {fonts} from './fonts'
8
8
  export const studioTheme: RootTheme = {
9
9
  avatar: {
10
10
  sizes: [
11
- {distance: -3, size: 23},
12
- {distance: -6, size: 33},
13
- {distance: -9, size: 53},
11
+ {distance: -3, size: 19},
12
+ {distance: -6, size: 31},
13
+ {distance: -9, size: 51},
14
14
  ],
15
15
  focusRing: {offset: 0, width: 1},
16
16
  },