Update ui-box, rip out glamor where possible (#1543)

Author: brandongregoryscott

package.json

@@ -77,7 +77,7 @@
     "react-fast-compare": "^3.2.0",
     "react-transition-group": "^4.4.1",
     "tinycolor2": "^1.4.1",
-    "ui-box": "^5.1.0"
+    "ui-box": "^5.2.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

src/avatar/src/Avatar.js

@@ -1,6 +1,5 @@
 import React, { useState, memo, forwardRef, useCallback } from 'react'
 import cx from 'classnames'
-import { css } from 'glamor'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
 import { useStyleConfig } from '../../hooks'
@@ -22,15 +21,6 @@ const internalStyles = {
 
 const isObjectFitSupported = typeof document !== 'undefined' && 'objectFit' in document.documentElement.style
 
-const initialsStyleClass = css({
-  top: 0,
-  position: 'absolute',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  lineHeight: 1
-}).toString()
-
 const getAvatarInitialsFontSize = (size, sizeLimitOneCharacter) => {
   if (size <= sizeLimitOneCharacter) {
     return Math.floor(size / 2.2)
@@ -86,7 +76,11 @@ const Avatar = memo(
       >
         {(imageUnavailable || forceShowInitials) && (
           <Text
-            className={initialsStyleClass}
+            top={0}
+            position="absolute"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
             fontSize={initialsFontSize}
             lineHeight={initialsFontSize}
             width={size}

src/badges/src/Badge.js

@@ -1,6 +1,5 @@
 import React, { memo, forwardRef } from 'react'
 import cx from 'classnames'
-import { css } from 'glamor'
 import PropTypes from 'prop-types'
 import { useStyleConfig } from '../../hooks'
 import { Strong } from '../../typography'
@@ -13,12 +12,14 @@ const internalStyles = {
   verticalAlign: 'middle'
 }
 
-const hoverClassName = css({
-  '&:hover': {
-    opacity: 0.8
+const interactiveStyles = {
+  selectors: {
+    '&:hover': {
+      opacity: 0.8
+    }
   },
   cursor: 'pointer'
-})
+}
 
 const Badge = memo(
   forwardRef(function Badge(props, ref) {
@@ -35,7 +36,8 @@ const Badge = memo(
       <Strong
         ref={ref}
         size={300}
-        className={cx(className, themedClassName, isInteractive && hoverClassName)}
+        className={cx(className, themedClassName)}
+        {...(isInteractive ? interactiveStyles : {})}
         {...styleProps}
         {...restProps}
       />

src/table/src/SearchTableHeaderCell.js

@@ -1,29 +1,21 @@
 import React, { memo, forwardRef, useCallback } from 'react'
-import { css } from 'glamor'
 import PropTypes from 'prop-types'
 import { SearchIcon } from '../../icons'
 import { IconWrapper } from '../../icons/src/IconWrapper'
 import { Text } from '../../typography'
 import TableHeaderCell from './TableHeaderCell'
 
-const invisibleInputClass = css({
-  border: 'none',
-  backgroundColor: 'transparent',
-  WebkitAppearance: 'none',
-  MozAppearance: 'none',
-  WebkitFontSmoothing: 'antialiased',
-
-  '&:focus': {
-    outline: 'none'
-  },
-
-  '&::placeholder': {
-    color: 'rgba(67, 90, 111, 0.7)'
-  }
-}).toString()
-
 const noop = () => {}
 
+/**
+ * This prop is non-standard, macOS specific and unsupported by ui-box. We probably don't need it,
+ * but retaining it for backwards compatibility
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
+ */
+const style = {
+  '-webkit-font-smoothing': 'antialiased'
+}
+
 const SearchTableHeaderCell = memo(
   forwardRef(function SearchTableHeaderCell(props, ref) {
     const {
@@ -46,7 +38,18 @@ const SearchTableHeaderCell = memo(
           is="input"
           size={300}
           flex="1"
-          className={invisibleInputClass}
+          border="none"
+          backgroundColor="transparent"
+          appearance="none"
+          style={style}
+          selectors={{
+            '&:focus': {
+              outline: 'none'
+            },
+            '&::placeholder': {
+              color: 'rgba(67, 90, 111, 0.7)'
+            }
+          }}
           value={value}
           onChange={handleChange}
           autoFocus={autoFocus}

src/toaster/src/ToastManager.js

@@ -1,20 +1,9 @@
 import React, { memo, useState } from 'react'
-import { css } from 'glamor'
 import PropTypes from 'prop-types'
+import Box from 'ui-box'
 import { StackingOrder } from '../../constants'
 import Toast from './Toast'
 
-const wrapperClass = css({
-  maxWidth: 560,
-  margin: '0 auto',
-  top: 0,
-  left: 0,
-  right: 0,
-  position: 'fixed',
-  zIndex: StackingOrder.TOASTER,
-  pointerEvents: 'none'
-})
-
 const hasCustomId = settings => Object.hasOwnProperty.call(settings, 'id')
 
 const ToastManager = memo(function ToastManager(props) {
@@ -94,15 +83,26 @@ const ToastManager = memo(function ToastManager(props) {
   bindCloseAll(closeAll)
 
   return (
-    <span className={wrapperClass}>
+    <Box
+      is="span"
+      maxWidth={560}
+      marginY={0}
+      marginX="auto"
+      top={0}
+      left={0}
+      right={0}
+      position="fixed"
+      zIndex={StackingOrder.TOASTER}
+      pointerEvents="none"
+    >
       {toasts.map(({ description, id, ...rest }) => {
         return (
           <Toast key={id} onRemove={() => removeToast(id)} {...rest}>
             {description}
           </Toast>
         )
       })}
-    </span>
+    </Box>
   )
 })
 

yarn.lock

@@ -14012,10 +14012,10 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
   integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
 
-ui-box@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-5.1.0.tgz#3b62d4089f0b4c3e7c5db60cff32adba0e268605"
-  integrity sha512-3FYTKhYKu8JaZmg1+iYzrHUpZDtrAiIdhLBbaVV/u5TL6Zfg1U7OkI00eFJNASa/D+b0SwJjt5Ph6tzmcub1RQ==
+ui-box@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-5.2.1.tgz#b38a583ed1951c6bfe547af3cdd744cb9c8da710"
+  integrity sha512-ZxiZSOTuvG9K3DAy+J9kcN2bBW9+pzg4pZOrMHcL8PsHu6S7MtOfJUjxqiBPaoHuGy8w5cn9W8leUC15D3Fw+A==
   dependencies:
     "@emotion/hash" "^0.7.1"
     inline-style-prefixer "^5.0.4"