@sanity/ui 0.37.21 → 0.37.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.21",
+  "version": "0.37.22",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f7ef1d42b0b536e746ac2670c113a24148c6fdc"
+  "gitHead": "1b732dbd4ff36714d5c920b942aa6023168588de"
 }

package/src/primitives/button/__workshop__/props.tsx

@@ -18,6 +18,7 @@ export default function ButtonStory() {
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const loading = useBoolean('Loading')
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -36,6 +37,7 @@ export default function ButtonStory() {
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
+        loading={loading}
         mode={mode}
         onClick={useAction('onClick')}
         paddingX={paddingX}

package/src/primitives/spinner/spinner.tsx

@@ -1,7 +1,7 @@
 import {SpinnerIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
-import styled, {keyframes} from 'styled-components'
-import {Text} from '../text'
+import React, {forwardRef, useMemo} from 'react'
+import styled from 'styled-components'
+import {spinnerSizeStyle, spinnerStyle} from './styles'
 
 /**
  * @public
@@ -11,21 +11,7 @@ export interface SpinnerProps {
   size?: number | number[]
 }
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const Root = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
+const Root = styled.div<{$muted?: boolean; $size: number[]}>(spinnerStyle, spinnerSizeStyle)
 
 /**
  * @public
@@ -34,8 +20,11 @@ export const Spinner = forwardRef(function Spinner(
   props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
+  const {muted, size = 2, ...restProps} = props
+  const $size = useMemo(() => (Array.isArray(size) ? size : [size]), [size])
+
   return (
-    <Root data-ui="Spinner" {...props} ref={ref}>
+    <Root data-ui="Spinner" {...restProps} $muted={muted} $size={$size} ref={ref}>
       <SpinnerIcon />
     </Root>
   )

package/src/primitives/spinner/styles.ts

@@ -0,0 +1,43 @@
+import {css, CSSObject, FlattenSimpleInterpolation, keyframes} from 'styled-components'
+import {rem, responsive, ThemeProps} from '../../styles'
+
+const rotate = keyframes`
+from {
+  transform: rotate(0deg);
+}
+
+to {
+  transform: rotate(360deg);
+}
+`
+
+export function spinnerStyle(props: {$muted?: boolean} & ThemeProps): FlattenSimpleInterpolation {
+  const {$muted} = props
+
+  return css`
+    animation: ${rotate} 500ms linear infinite;
+    color: ${$muted ? 'var(--card-muted-fg-color)' : 'var(--card-fg-color)'};
+  `
+}
+
+export function spinnerSizeStyle(props: {$size: number[]} & ThemeProps): CSSObject[] {
+  const {$size} = props
+  const {fonts, media} = props.theme.sanity
+
+  return responsive(media, $size, (size) => {
+    const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]
+    const capHeight = lineHeight - ascenderHeight - descenderHeight
+
+    return {
+      width: rem(capHeight),
+      height: rem(capHeight),
+
+      '& > svg': {
+        display: 'block',
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2,
+      },
+    }
+  })
+}