Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(alpha-ui): support for breaking changes inside studio with new sa…
Browse files Browse the repository at this point in the history
…nity/ui
pedrobonamin committed Oct 19, 2023
1 parent d199784 commit 99c5544
Showing 3 changed files with 11 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {studioTheme, rgba, Card, Flex, CardTone, Spinner} from '@sanity/ui'
import {rgba, Card, Flex, CardTone, Spinner, Theme} from '@sanity/ui'
import styled, {css} from 'styled-components'

export const MAX_DEFAULT_HEIGHT = 30
@@ -34,12 +34,14 @@ export const SpinnerWrapper = styled(Spinner)`
export const Overlay = styled(Flex)(({
tone,
drag,
theme,
}: {
tone: Exclude<CardTone, 'inherit'>
drag: boolean
theme: Theme
}) => {
const textColor = studioTheme.color.light[tone].card.enabled.fg
const backgroundColor = rgba(studioTheme.color.light[tone].card.enabled.bg, 0.8)
const textColor = theme.sanity.color.card.enabled.fg
const backgroundColor = rgba(theme.sanity.color.card.enabled.bg, 0.8)

return css`
position: absolute;
7 changes: 4 additions & 3 deletions packages/sanity/src/core/studio/Studio.test.tsx
Original file line number Diff line number Diff line change
@@ -43,8 +43,9 @@ describe('Studio', () => {
const sheet = new ServerStyleSheet()
try {
const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))

expect(html).toMatchInlineSnapshot(
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
)
} finally {
sheet.seal()
@@ -61,7 +62,7 @@ describe('Studio', () => {
try {
const html = renderToString(sheet.collectStyles(<Studio config={config} />))
expect(html).toMatchInlineSnapshot(
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
)
} finally {
sheet.seal()
@@ -81,7 +82,7 @@ describe('Studio', () => {
const html = renderToString(sheet.collectStyles(<Studio config={config} />))
node.innerHTML = html
expect(html).toMatchInlineSnapshot(
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
`"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
)
document.head.innerHTML += sheet.getStyleTags()

3 changes: 2 additions & 1 deletion packages/sanity/src/core/theme/_legacy/theme.ts
Original file line number Diff line number Diff line change
@@ -28,10 +28,11 @@ import {LegacyThemeProps} from './types'
* ```
*
* @param partialLegacyTheme - Properties to override the theme with. See {@link LegacyThemeProps}
*
* @public
* @deprecated Use `@sanity/ui studioTheme` instead
*/
export function buildLegacyTheme(partialLegacyTheme: Partial<LegacyThemeProps>): StudioTheme {
return defaults
const legacyTheme = resolveLegacyTheme(partialLegacyTheme)
const legacyPalette = buildLegacyPalette(legacyTheme)
const legacyTones = buildLegacyTones(legacyPalette)

0 comments on commit 99c5544

Please sign in to comment.