diff --git a/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json b/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json new file mode 100644 index 0000000000000..fb4dd6eb17cd5 --- /dev/null +++ b/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "block usage of CSS shorthands in typings, remove CSS shorthands expansion", + "packageName": "@fluentui/make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json b/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json new file mode 100644 index 0000000000000..5cb678cf7a970 --- /dev/null +++ b/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: update styles to match typings", + "packageName": "@fluentui/react-checkbox", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md index 59c29b5fec18e..a6891db2045dd 100644 --- a/packages/make-styles/etc/make-styles.api.md +++ b/packages/make-styles/etc/make-styles.api.md @@ -93,10 +93,10 @@ export type MakeStaticStylesStyle = { // @public (undocumented) export function makeStyles(stylesBySlots: StylesBySlots, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record; -// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustom" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustomL1" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>; // @public (undocumented) export interface MakeStylesOptions { @@ -121,7 +121,7 @@ export interface MakeStylesRenderer { // Warning: (ae-forgotten-export) The symbol "MakeStylesStrictCSSObject" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1; // @public (undocumented) export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; diff --git a/packages/make-styles/package.json b/packages/make-styles/package.json index 3d32cf4c2e964..744db4f17a4ec 100644 --- a/packages/make-styles/package.json +++ b/packages/make-styles/package.json @@ -30,7 +30,6 @@ "dependencies": { "@emotion/hash": "^0.8.0", "csstype": "^2.6.7", - "inline-style-expand-shorthand": "^1.2.0", "rtl-css-js": "^1.14.5", "stylis": "^4.0.6", "tslib": "^2.1.0" diff --git a/packages/make-styles/src/mergeClasses.test.ts b/packages/make-styles/src/mergeClasses.test.ts index a4044d1bfc0a7..528d8d5d32820 100644 --- a/packages/make-styles/src/mergeClasses.test.ts +++ b/packages/make-styles/src/mergeClasses.test.ts @@ -38,10 +38,10 @@ describe('mergeClasses', () => { block: { display: 'block' }, flex: { display: 'flex' }, grid: { display: 'grid' }, - padding: { padding: '5px' }, + padding: { paddingLeft: '5px' }, })(options); - const resultClassName = makeStyles({ root: { display: 'grid', padding: '5px' } })(options).root; + const resultClassName = makeStyles({ root: { display: 'grid', paddingLeft: '5px' } })(options).root; expect(mergeClasses(classes.block, classes.flex, classes.grid, classes.padding)).toBe(resultClassName); }); @@ -70,15 +70,15 @@ describe('mergeClasses', () => { const sequence1 = mergeClasses('ui-button', className1, className2); const className3 = makeStyles({ root: { display: 'grid' } })(options).root; - const className4 = makeStyles({ root: { padding: '5px' } })(options).root; + const className4 = makeStyles({ root: { paddingLeft: '5px' } })(options).root; const className5 = makeStyles({ root: { marginTop: '5px' } })(options).root; const sequence2 = mergeClasses('ui-flex', className3, className4); const sequence3 = mergeClasses(sequence1, sequence2, className5); expect(sequence1).toBe(`ui-button ${className2}`); - expect(sequence2).toBe('ui-flex ___wz3cad0 f13qh94s f1sbtcvk fwiuce9 fdghr9 f15vdbe4'); - expect(sequence3).toBe('ui-button ui-flex ___gpv7qo0 f13qh94s f1sbtcvk fwiuce9 fdghr9 f15vdbe4 f1rqyxcv'); + expect(sequence2).toBe('ui-flex ___nsiv7r0 f13qh94s f15vdbe4'); + expect(sequence3).toBe('ui-button ui-flex ___ma4nwa0 f13qh94s f15vdbe4 f1rqyxcv'); }); it('warns if an unregistered sequence was passed', () => { @@ -118,8 +118,8 @@ describe('mergeClasses', () => { describe('"dir" option', () => { it('performs deduplication for RTL classes', () => { const computeClasses = makeStyles({ - start: { borderLeft: '5px' }, - end: { borderRight: '5px' }, + start: { borderLeftWidth: '5px', borderRightWidth: '5px' }, + end: { borderRightWidth: '5px' }, }); const rtlClasses1 = computeClasses({ ...options, dir: 'rtl' }); diff --git a/packages/make-styles/src/resolveStyleRulesForSlots.test.ts b/packages/make-styles/src/resolveStyleRulesForSlots.test.ts index 5286bc0544f85..76f6de47d05fe 100644 --- a/packages/make-styles/src/resolveStyleRulesForSlots.test.ts +++ b/packages/make-styles/src/resolveStyleRulesForSlots.test.ts @@ -4,28 +4,28 @@ import { StylesBySlots } from './types'; describe('resolveStyleRulesForSlots', () => { it('returns classnames and CSS rules to apply', () => { const stylesBySlots: StylesBySlots<'root' | 'icon', never> = { - root: { color: 'red', background: 'pink' }, - icon: { color: 'blue', background: 'lightblue' }, + root: { color: 'red', backgroundColor: 'pink' }, + icon: { color: 'blue', backgroundColor: 'lightblue' }, }; expect(resolveStyleRulesForSlots(stylesBySlots, 0)).toMatchInlineSnapshot(` Array [ Object { "icon": Object { - "ayd6f0": "fmqh8ev", + "De3pzq": "f1ta0kgp", "sj55zd": "f163i14w", }, "root": Object { - "ayd6f0": "fwix7fp", + "De3pzq": "fnf68zh", "sj55zd": "fe3e8s9", }, }, Object { "d": Array [ ".fe3e8s9{color:red;}", - ".fwix7fp{background:pink;}", + ".fnf68zh{background-color:pink;}", ".f163i14w{color:blue;}", - ".fmqh8ev{background:lightblue;}", + ".f1ta0kgp{background-color:lightblue;}", ], }, ] diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts index 97fc263f83606..b1ca94e94fbf9 100644 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts +++ b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts @@ -1,5 +1,4 @@ import { createCSSVariablesProxy, isProxy, resolveProxyValues } from './createCSSVariablesProxy'; -import { expand } from 'inline-style-expand-shorthand'; describe('createCSSVariablesProxy', () => { it('should be able to identify as a proxy', () => { @@ -14,28 +13,23 @@ describe('createCSSVariablesProxy', () => { const proxy = createCSSVariablesProxy('prefix') as { to: { string: object } }; expect(proxy.to.string.toString()).toStrictEqual('var(--prefix-to-string)'); }); - it('should be able to expand objects containing proxies as properties', () => { + it('should be able to resolve objects containing proxies as properties', () => { const proxy = createCSSVariablesProxy() as { to: { string: object } }; expect(Array.isArray(proxy)).toEqual(false); - const expanded = expand( - resolveProxyValues({ - padding: proxy.to.string, - animationName: { - from: { - transform: proxy.to.string, - }, - to: { - transform: proxy.to.string, - }, + const expanded = resolveProxyValues({ + paddingLeft: proxy.to.string, + animationName: { + from: { + transform: proxy.to.string, + }, + to: { + transform: proxy.to.string, }, - animationIterationCount: proxy.to.string, - animationDuration: proxy.to.string, - }), - ); + }, + animationIterationCount: proxy.to.string, + animationDuration: proxy.to.string, + }); expect(expanded).toEqual({ - paddingTop: 'var(--to-string)', - paddingRight: 'var(--to-string)', - paddingBottom: 'var(--to-string)', paddingLeft: 'var(--to-string)', animationName: { from: { diff --git a/packages/make-styles/src/runtime/expandShorthand.test.ts b/packages/make-styles/src/runtime/expandShorthand.test.ts deleted file mode 100644 index 81d5dfea80b7a..0000000000000 --- a/packages/make-styles/src/runtime/expandShorthand.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { expandShorthand } from './expandShorthand'; - -describe('expandShorthand', () => { - it('should expand a mix of shorthands and longhands based on order', () => { - expect(expandShorthand({ marginLeft: '10px', margin: '5px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "5px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - expect(expandShorthand({ margin: '5px', marginLeft: '10px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "10px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - expect(expandShorthand({ marginRight: '10px', margin: '5px', marginLeft: '10px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "10px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - }); - - it('"undefined" is ignored', () => { - expect(expandShorthand({ margin: '5px', marginLeft: undefined })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "5px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - }); - - it('should expand nested objects', () => { - expect(expandShorthand({ ':hover': { padding: '10px' } })).toMatchInlineSnapshot(` - Object { - ":hover": Object { - "paddingBottom": "10px", - "paddingLeft": "10px", - "paddingRight": "10px", - "paddingTop": "10px", - }, - } - `); - }); -}); diff --git a/packages/make-styles/src/runtime/expandShorthand.ts b/packages/make-styles/src/runtime/expandShorthand.ts deleted file mode 100644 index f8b8cc88ac58b..0000000000000 --- a/packages/make-styles/src/runtime/expandShorthand.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { expandProperty } from 'inline-style-expand-shorthand'; -import { MakeStylesStyle } from '../types'; - -/** - * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.). - * Follows CSS-like order in expansion i.e. last defined property wins. - */ -export function expandShorthand(style: MakeStylesStyle, result: MakeStylesStyle = {}): MakeStylesStyle { - // eslint-disable-next-line guard-for-in - for (const property in style) { - const value = style[property as keyof MakeStylesStyle]; - - if (typeof value === 'string' || typeof value === 'number') { - const expansion = expandProperty(property, value); - - if (expansion) { - Object.assign(result, expansion); - } else { - // Cast to any to avoid "error TS2590: Expression produces a union type that is too complex to represent" - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (result as any)[property as keyof MakeStylesStyle] = value; - // result[property as keyof MakeStylesStyle] = value; - } - // eslint-disable-next-line eqeqeq - } else if (value == null) { - // should skip - } else if (Array.isArray(value)) { - result[property as 'animationName'] = value; - } else if (typeof value === 'object') { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (result as any)[property as keyof MakeStylesStyle] = expandShorthand(value as MakeStylesStyle); - } - } - - return result; -} diff --git a/packages/make-styles/src/runtime/resolveStyleRules.test.ts b/packages/make-styles/src/runtime/resolveStyleRules.test.ts index 758f22192fa31..b175b2d2af6ca 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.test.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.test.ts @@ -117,99 +117,6 @@ describe('resolveStyleRules', () => { `); }); - it('performs expansion of shorthands', () => { - expect(resolveStyleRules({ outline: '1px' })).toMatchInlineSnapshot(` - .fpvhumw { - outline-width: 1px; - } - `); - expect(resolveStyleRules({ padding: '5px' })).toMatchInlineSnapshot(` - .f1sbtcvk { - padding-top: 5px; - } - .fwiuce9 { - padding-right: 5px; - } - .f15vdbe4 { - padding-left: 5px; - } - .fdghr9 { - padding-bottom: 5px; - } - .f15vdbe4 { - padding-left: 5px; - } - .fwiuce9 { - padding-right: 5px; - } - `); - }); - - it('performs expansion of shorthands on nested objects', () => { - expect(resolveStyleRules({ outline: '1px', ':hover': { outline: '5px' } })).toMatchInlineSnapshot(` - .fpvhumw { - outline-width: 1px; - } - .fmcm1e3:hover { - outline-width: 5px; - } - `); - }); - - it('shorthands and longhands work like in CSS', () => { - expect( - resolveStyleRules({ - margin: '5px', - marginLeft: '10px', - }), - ).toMatchInlineSnapshot(` - .f1rqyxcv { - margin-top: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1f7bkv5 { - margin-left: 5px; - } - .f475ppk { - margin-bottom: 5px; - } - .f1oou7ox { - margin-left: 10px; - } - .f1pxv85q { - margin-right: 10px; - } - `); - - expect( - resolveStyleRules({ - marginLeft: '10px', - margin: '5px', - }), - ).toMatchInlineSnapshot(` - .f1f7bkv5 { - margin-left: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1rqyxcv { - margin-top: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1f7bkv5 { - margin-left: 5px; - } - .f475ppk { - margin-bottom: 5px; - } - `); - }); - it('performs vendor prefixing', () => { expect(resolveStyleRules({ display: 'flex' })).toMatchInlineSnapshot(` .f22iagw { diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts index 06a26df53a551..906becb289079 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.ts @@ -5,7 +5,6 @@ import { HASH_PREFIX } from '../constants'; import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket, StyleBucketName, MakeStylesAnimation } from '../types'; import { compileCSS, CompileCSSOptions } from './compileCSS'; import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS'; -import { expandShorthand } from './expandShorthand'; import { generateCombinedQuery } from './utils/generateCombinedMediaQuery'; import { isMediaQuerySelector } from './utils/isMediaQuerySelector'; import { isNestedSelector } from './utils/isNestedSelector'; @@ -212,8 +211,9 @@ export function resolveStyleRules( styles: MakeStylesStyle, unstable_cssPriority: number = 0, ): [CSSClassesMap, CSSRulesByBucket] { - // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object - const expandedStyles: MakeStylesStyle = expandShorthand(resolveProxyValues(styles)); - - return resolveStyleRulesInner(expandedStyles, unstable_cssPriority); + return resolveStyleRulesInner( + // resolveProxyValues() is recursive function and should be evaluated once for a style object + resolveProxyValues(styles), + unstable_cssPriority, + ); } diff --git a/packages/make-styles/src/types.test.ts b/packages/make-styles/src/types.test.ts new file mode 100644 index 0000000000000..cb418f7aaa8e6 --- /dev/null +++ b/packages/make-styles/src/types.test.ts @@ -0,0 +1,137 @@ +import { MakeStylesStyle } from './types'; + +function assertType(style: MakeStylesStyle): MakeStylesStyle { + return style; +} + +describe('types tests', () => { + it('passing fixtures', () => { + // Basic styles + // + + assertType({ flexShrink: 0 }); + assertType({ flexShrink: 1 }); + + assertType({ color: 'beige' }); + assertType({ paddingLeft: '5px' }); + + assertType({ '--color': 'red' }); + + // Strict selector defined via "CSS.Pseudos" + // + + assertType({ + ':hover': { flexShrink: 0 }, + ':focus': { flexShrink: 'initial' }, + }); + + assertType({ + ':hover': { color: 'beige' }, + ':focus': { paddingLeft: '5px' }, + }); + + assertType({ + ':hover': { '--color': 'red' }, + }); + + // Custom selectors + // + + assertType({ + ':hover:focus': { flexShrink: 0 as const }, + ':hover:active': { flexShrink: 'initial' }, + }); + + assertType({ + '.bar': { color: 'beige' }, + '.foo': { paddingLeft: '5px' }, + }); + + assertType({ + '.bar': { '--color': 'red' }, + }); + + // Nested custom selectors + // + + assertType({ + '.foo': { + '.bar': { flexShrink: 0 as const }, + '.baz': { flexShrink: 'initial' }, + }, + '.bar': { + '.baz': { color: 'beige' }, + '.qux': { paddingLeft: '5px' }, + }, + '.baz': { + '.qux': { + '--color': 'red', + }, + }, + }); + }); + + it('fixtures that should fail', () => { + // Banned shorthand properties + // + + // @ts-expect-error "padding" is banned + assertType({ padding: 0 }); + // @ts-expect-error "borderLeft" is banned + assertType({ borderLeft: '5px' }); + + // Invalid values + // + + // @ts-expect-error "1" is invalid value for "flexShrink" + assertType({ flexShrink: '1' }); + // @ts-expect-error "paddingLeft" cannot be numeric value + assertType({ paddingLeft: 5 }); + // @ts-expect-error "0" is invalid value for "color" + assertType({ color: 0 }); + + // Strict selectors + // + + assertType({ + ':hover': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }); + + // Custom selectors + // + + assertType({ + ':hover:focus': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }); + + // Nested custom selectors + // + + assertType({ + '.foo': { + '.baz': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }, + }); + }); +}); diff --git a/packages/make-styles/src/types.ts b/packages/make-styles/src/types.ts index ff10976bb404d..21f45242e2180 100644 --- a/packages/make-styles/src/types.ts +++ b/packages/make-styles/src/types.ts @@ -2,22 +2,91 @@ import * as CSS from 'csstype'; export type MakeStylesCSSValue = string | 0; +type MakeStylesUnsupportedCSSProperties = { + // We don't support expansion of CSS shorthands + animation?: never; + background?: never; + border?: never; + borderBlock?: never; + borderBlockEnd?: never; + borderBlockStart?: never; + borderBottom?: never; + borderColor?: never; + borderImage?: never; + borderInline?: never; + borderInlineEnd?: never; + borderInlineStart?: never; + borderLeft?: never; + borderRadius?: never; + borderRight?: never; + borderStyle?: never; + borderTop?: never; + borderWidth?: never; + columnRule?: never; + flex?: never; + flexFlow?: never; + font?: never; + gap?: never; + grid?: never; + gridArea?: never; + gridColumn?: never; + gridGap?: never; + gridRow?: never; + gridTemplate?: never; + listStyle?: never; + margin?: never; + mask?: never; + maskBorder?: never; + offset?: never; + outline?: never; + overflow?: never; + padding?: never; + placeItems?: never; + placeSelf?: never; + textDecoration?: never; + textEmphasis?: never; + transition?: never; +}; type MakeStylesCSSProperties = Omit< CSS.Properties, // We have custom definition for "animationName" 'animationName' ->; +> & + MakeStylesUnsupportedCSSProperties; export type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & { animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty }; -type MakeStylesCSSObjectCustom = { - [Property: string]: MakeStylesStyle | string | 0; +type MakeStylesCSSPseudos = { + [Property in CSS.Pseudos]?: + | (MakeStylesStrictCSSObject & { content?: string }) + | (MakeStylesCSSObjectCustomL1 & { content?: string }); }; -type MakeStylesCSSPseudos = { [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & { content?: string } }; -export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; -export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; +// +// "MakeStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4. +// Once we will support "typesVersions" (types downleleving) or update our requirements for TS this should be +// updated or removed. +// + +type MakeStylesCSSObjectCustomL1 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL2; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL2 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL3; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL3 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL4; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL4 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL5; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL5 = { + [Property: string]: MakeStylesCSSValue | undefined; +} & MakeStylesStrictCSSObject; + +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>; +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1; export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; export type MakeStylesStyleRule = MakeStylesStyle | MakeStylesStyleFunctionRule; diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 6c4807c0bf536..54b0f757c5182 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -155,7 +155,7 @@ const useIndicatorStyles = makeStyles({ unchecked: { '& > *': { - opacity: 0, + opacity: '0', }, }, }); diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts index 301b57344b355..e70b50287891e 100644 --- a/packages/react-tabs/src/components/Tab/useTabStyles.ts +++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts @@ -27,7 +27,7 @@ const useRootStyles = makeStyles({ backgroundColor: 'none', ...shorthands.borderColor('none'), ...shorthands.borderRadius(theme.borderRadiusMedium), - borderWidth: theme.strokeWidthThin, + ...shorthands.borderWidth(theme.strokeWidthThin), columnGap: pendingTheme.gap.medium, cursor: 'pointer', display: 'flex', @@ -65,7 +65,7 @@ const useFocusStyles = makeStyles({ base: createCustomFocusIndicatorStyle(theme => ({ ...shorthands.borderColor('transparent'), outlineWidth: theme.strokeWidthThick, - outlineColor: 'tranparent', + outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: ` ${theme.shadow4}, diff --git a/packages/react-tabs/src/stories/TabListAppearance.stories.tsx b/packages/react-tabs/src/stories/TabListAppearance.stories.tsx index ffe951bca6ecc..085fa06da2e00 100644 --- a/packages/react-tabs/src/stories/TabListAppearance.stories.tsx +++ b/packages/react-tabs/src/stories/TabListAppearance.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListDefault.stories.tsx b/packages/react-tabs/src/stories/TabListDefault.stories.tsx index 4243c5e2a2b11..46decfde4354b 100644 --- a/packages/react-tabs/src/stories/TabListDefault.stories.tsx +++ b/packages/react-tabs/src/stories/TabListDefault.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx b/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx index e490b601fd998..5219e9d93c201 100644 --- a/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx +++ b/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx @@ -1,7 +1,7 @@ import { CalendarMonth24Regular } from '@fluentui/react-icons'; -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx b/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx index 291220921c498..2665fa36baeac 100644 --- a/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx +++ b/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx @@ -1,7 +1,7 @@ import { CalendarMonth24Regular } from '@fluentui/react-icons'; -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListVertical.stories.tsx b/packages/react-tabs/src/stories/TabListVertical.stories.tsx index b9e56e41148c7..1534a4385d2eb 100644 --- a/packages/react-tabs/src/stories/TabListVertical.stories.tsx +++ b/packages/react-tabs/src/stories/TabListVertical.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx b/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx index ae363d0b03dbf..0b44000d65beb 100644 --- a/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx +++ b/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; import { CalendarMonth24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, });