@sanity/ui 2.0.0-alpha.12 → 2.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/tab/tab.tsx

@@ -31,7 +31,10 @@ const CustomButton = styled(Button)`
  */
 export const Tab = forwardRef(function Tab(
   props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
+    Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
+    >,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {

package/src/primitives/button/button.tsx

@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -34,10 +34,12 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 const Root = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
 >(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
 
 const LoadingBox = styled.div`
@@ -59,7 +61,7 @@ const LoadingBox = styled.div`
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -86,6 +88,7 @@ export const Button = forwardRef(function Button(
     tone = 'default',
     type = 'button',
     muted = false,
+    width,
     ...restProps
   } = props
 
@@ -128,6 +131,7 @@ export const Button = forwardRef(function Button(
       disabled={Boolean(loading || disabled)}
       ref={ref}
       type={type}
+      $width={width}
     >
       {Boolean(loading) && (
         <LoadingBox>

package/src/primitives/button/styles.ts

@@ -2,13 +2,13 @@ import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone} from '../../types'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
  */
-export function buttonBaseStyles(): ReturnType<typeof css> {
+export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<typeof css> {
   return css`
     -webkit-font-smoothing: inherit;
     appearance: none;
@@ -27,6 +27,12 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
     text-align: left;
     position: relative;
 
+    ${$width === 'fill' &&
+    css`
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
     & > span {
       display: block;
       flex: 1;

package/src/types/button.ts

@@ -12,3 +12,8 @@ export type ButtonTextAlign = 'left' | 'right' | 'center'
  * @public
  */
 export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'