Deprecation notices for all deprecated shorthands (#618)

* Deprecated tag is needed for all overloads of deprecated shorthand functions to properly communicate that shorthand is deprecated Refer: microsoft/TypeScript#407 * Change files * Update change/@griffel-core-e0dc7909-f321-4c3e-b9f8-0a2a280e37cf.json --------- Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Nov 12, 2024 · 4dd2eec · 4dd2eec
1 parent 8ca5e81
commit 4dd2eec
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 2 deletions.
diff --git a/change/@griffel-core-e0dc7909-f321-4c3e-b9f8-0a2a280e37cf.json b/change/@griffel-core-e0dc7909-f321-4c3e-b9f8-0a2a280e37cf.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: all deprecated shorthands functions are tagged properly",
+  "packageName": "@griffel/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/shorthands/border.ts b/packages/core/src/shorthands/border.ts
@@ -22,8 +22,11 @@ type BorderStyle = Pick<
   | 'borderLeftWidth'
 >;
 
+/** @deprecated Use `{ border: '2px' }` instead as Griffel supports CSS shorthands now */
 export function border(width: BorderWidthInput): BorderStyle;
+/** @deprecated Use `{ border: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function border(width: BorderWidthInput, style: BorderStyleInput): BorderStyle;
+/** @deprecated Use `{ border: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function border(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderStyle;
 
 /**

diff --git a/packages/core/src/shorthands/borderBottom.ts b/packages/core/src/shorthands/borderBottom.ts
@@ -5,15 +5,21 @@ import { isBorderStyle } from './utils';
 
 type BorderBottomStyle = Pick<GriffelStyle, 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth'>;
 
+/** @deprecated Use `{ borderBottom: '2px' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(width: BorderWidthInput): BorderBottomStyle;
+/** @deprecated Use `{ borderBottom: 'solid' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(style: BorderStyleInput): BorderBottomStyle;
+/** @deprecated Use `{ borderBottom: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(width: BorderWidthInput, style: BorderStyleInput): BorderBottomStyle;
+/** @deprecated Use `{ borderBottom: 'solid 2px' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(style: BorderStyleInput, width: BorderWidthInput): BorderBottomStyle;
+/** @deprecated Use `{ borderBottom: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(
   width: BorderWidthInput,
   style: BorderStyleInput,
   color: BorderColorInput,
 ): BorderBottomStyle;
+/** @deprecated Use `{ borderBottom: 'solid 2px red' }` instead as Griffel supports CSS shorthands now */
 export function borderBottom(
   style: BorderStyleInput,
   width: BorderWidthInput,

diff --git a/packages/core/src/shorthands/borderLeft.ts b/packages/core/src/shorthands/borderLeft.ts
@@ -5,11 +5,17 @@ import { isBorderStyle } from './utils';
 
 type BorderLeftStyle = Pick<GriffelStyle, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
 
+/** @deprecated Use `{ borderLeft: '2px' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(width: BorderWidthInput): BorderLeftStyle;
+/** @deprecated Use `{ borderLeft: 'solid' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(style: BorderStyleInput): BorderLeftStyle;
+/** @deprecated Use `{ borderLeft: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(width: BorderWidthInput, style: BorderStyleInput): BorderLeftStyle;
+/** @deprecated Use `{ borderLeft: 'solid 2px' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(style: BorderStyleInput, width: BorderWidthInput): BorderLeftStyle;
+/** @deprecated Use `{ borderLeft: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderLeftStyle;
+/** @deprecated Use `{ borderLeft: 'solid 2px red' }` instead as Griffel supports CSS shorthands now */
 export function borderLeft(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderLeftStyle;
 
 /**

diff --git a/packages/core/src/shorthands/borderRight.ts b/packages/core/src/shorthands/borderRight.ts
@@ -5,15 +5,21 @@ import { isBorderStyle } from './utils';
 
 type BorderRightStyle = Pick<GriffelStyle, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
 
+/** @deprecated Use `{ borderRight: '2px' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(width: BorderWidthInput): BorderRightStyle;
+/** @deprecated Use `{ borderRight: 'solid' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(style: BorderStyleInput): BorderRightStyle;
+/** @deprecated Use `{ borderRight: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(width: BorderWidthInput, style: BorderStyleInput): BorderRightStyle;
+/** @deprecated Use `{ borderRight: 'solid 2px' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(style: BorderStyleInput, width: BorderWidthInput): BorderRightStyle;
+/** @deprecated Use `{ borderRight: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(
   width: BorderWidthInput,
   style: BorderStyleInput,
   color: BorderColorInput,
 ): BorderRightStyle;
+/** @deprecated Use `{ borderRight: 'solid 2px red' }` instead as Griffel supports CSS shorthands now */
 export function borderRight(
   style: BorderStyleInput,
   width: BorderWidthInput,

diff --git a/packages/core/src/shorthands/borderTop.ts b/packages/core/src/shorthands/borderTop.ts
@@ -5,11 +5,17 @@ import { isBorderStyle } from './utils';
 
 type BorderTopStyle = Pick<GriffelStyle, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth'>;
 
+/** @deprecated Use `{ borderTop: '2px' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(width: BorderWidthInput): BorderTopStyle;
+/** @deprecated Use `{ borderTop: 'solid' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(style: BorderStyleInput): BorderTopStyle;
+/** @deprecated Use `{ borderTop: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(width: BorderWidthInput, style: BorderStyleInput): BorderTopStyle;
+/** @deprecated Use `{ borderTop: 'solid 2px' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(style: BorderStyleInput, width: BorderWidthInput): BorderTopStyle;
+/** @deprecated Use `{ borderTop: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderTopStyle;
+/** @deprecated Use `{ borderTop: 'solid 2px red' }` instead as Griffel supports CSS shorthands now */
 export function borderTop(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderTopStyle;
 
 /**

diff --git a/packages/core/src/shorthands/gridArea.ts b/packages/core/src/shorthands/gridArea.ts
@@ -20,9 +20,13 @@ export function isCustomIdent(value: GridAreaInput | undefined): boolean {
   );
 }
 
+/** @deprecated Use `{ gridArea: '2' }` instead as Griffel supports CSS shorthands now */
 export function gridArea(all: GridAreaInput): GridAreaStyle;
+/** @deprecated Use `{ gridArea: '2 / 4' }` instead as Griffel supports CSS shorthands now */
 export function gridArea(rowStart: GridAreaInput, columnStart: GridAreaInput): GridAreaStyle;
+/** @deprecated Use `{ gridArea: '2 / 4 / 4' }` instead as Griffel supports CSS shorthands now */
 export function gridArea(rowStart: GridAreaInput, columnStart: GridAreaInput, rowEnd: GridAreaInput): GridAreaStyle;
+/** @deprecated Use `{ gridArea: '2 / 4 / 1 / 3' }` instead as Griffel supports CSS shorthands now */
 export function gridArea(
   rowStart: GridAreaInput,
   columnStart: GridAreaInput,
@@ -41,7 +45,7 @@ export function gridArea(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
  *
- * @deprecated Just use `{ gridArea: '2 / 4 / 1 / 3' }` instead as Griffel supports CSS shorthands now
+ * @deprecated Use `{ gridArea: '2 / 4 / 1 / 3' }` instead as Griffel supports CSS shorthands now
  */
 export function gridArea(...values: GridAreaInput[]): GridAreaStyle {
   // if any value is not valid, then do not apply the CSS.

diff --git a/packages/core/src/shorthands/inset.ts b/packages/core/src/shorthands/inset.ts
@@ -3,9 +3,13 @@ import type { InsetInput } from './types';
 
 type InsetStyle = Pick<GriffelStyle, 'top' | 'right' | 'bottom' | 'left'>;
 
+/** @deprecated Use `{ inset: '10px' }` instead as Griffel supports CSS shorthands now */
 export function inset(all: InsetInput): InsetStyle;
+/** @deprecated Use `{ inset: '10px 5px' }` instead as Griffel supports CSS shorthands now */
 export function inset(vertical: InsetInput, horizontal: InsetInput): InsetStyle;
+/** @deprecated Use `{ inset: '10px 5px 8px' }` instead as Griffel supports CSS shorthands now */
 export function inset(top: InsetInput, horizontal: InsetInput, bottom: InsetInput): InsetStyle;
+/** @deprecated Use `{ inset: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now */
 export function inset(top: InsetInput, right: InsetInput, bottom: InsetInput, left: InsetInput): InsetStyle;
 
 /**
@@ -19,7 +23,7 @@ export function inset(top: InsetInput, right: InsetInput, bottom: InsetInput, le
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
  *
- * @deprecated Just use `{ inset: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now
+ * @deprecated Use `{ inset: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now
  */
 export function inset(...values: InsetInput[]): InsetStyle {
   const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values;

diff --git a/packages/core/src/shorthands/margin.ts b/packages/core/src/shorthands/margin.ts
@@ -5,9 +5,13 @@ import type { MarginInput } from './types';
 
 type MarginStyle = Pick<GriffelStyle, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
 
+/** @deprecated Use `{ margin: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now */
 export function margin(all: MarginInput): MarginStyle;
+/** @deprecated Use `{ margin: '10px 5px' }` instead as Griffel supports CSS shorthands now */
 export function margin(vertical: MarginInput, horizontal: MarginInput): MarginStyle;
+/** @deprecated Use `{ margin: '10px 5px 8px' }` instead as Griffel supports CSS shorthands now */
 export function margin(top: MarginInput, horizontal: MarginInput, bottom: MarginInput): MarginStyle;
+/** @deprecated Use `{ margin: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now */
 export function margin(top: MarginInput, right: MarginInput, bottom: MarginInput, left: MarginInput): MarginStyle;
 
 /**

diff --git a/packages/core/src/shorthands/outline.ts b/packages/core/src/shorthands/outline.ts
@@ -3,8 +3,11 @@ import type { OutlineColorInput, OutlineStyleInput, OutlineWidthInput } from './
 
 type OutlineStyle = Pick<GriffelStyle, 'outlineColor' | 'outlineStyle' | 'outlineWidth'>;
 
+/** @deprecated Use `{ outline: '2px' }` instead as Griffel supports CSS shorthands now */
 export function outline(width: OutlineWidthInput): OutlineStyle;
+/** @deprecated Use `{ outline: '2px solid' }` instead as Griffel supports CSS shorthands now */
 export function outline(width: OutlineWidthInput, style: OutlineStyleInput): OutlineStyle;
+/** @deprecated Use `{ outline: '2px solid red' }` instead as Griffel supports CSS shorthands now */
 export function outline(width: OutlineWidthInput, style: OutlineStyleInput, color: OutlineColorInput): OutlineStyle;
 
 /**

diff --git a/packages/core/src/shorthands/padding.ts b/packages/core/src/shorthands/padding.ts
@@ -5,9 +5,13 @@ import type { PaddingInput } from './types';
 
 type PaddingStyle = Pick<GriffelStyle, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
 
+/** @deprecated Use `{ padding: '10px' }` instead as Griffel supports CSS shorthands now */
 export function padding(all: PaddingInput): PaddingStyle;
+/** @deprecated Use `{ padding: '10px 5px' }` instead as Griffel supports CSS shorthands now */
 export function padding(vertical: PaddingInput, horizontal: PaddingInput): PaddingStyle;
+/** @deprecated Use `{ padding: '10px 5px 8px' }` instead as Griffel supports CSS shorthands now */
 export function padding(top: PaddingInput, horizontal: PaddingInput, bottom: PaddingInput): PaddingStyle;
+/** @deprecated Use `{ padding: '10px 5px 8px 4px' }` instead as Griffel supports CSS shorthands now */
 export function padding(top: PaddingInput, right: PaddingInput, bottom: PaddingInput, left: PaddingInput): PaddingStyle;
 
 /**

diff --git a/packages/core/src/shorthands/textDecoration.ts b/packages/core/src/shorthands/textDecoration.ts
@@ -11,15 +11,20 @@ type TextDecorationStyle = Pick<
   'textDecorationStyle' | 'textDecorationLine' | 'textDecorationColor' | 'textDecorationThickness'
 >;
 
+/** @deprecated Use `{ textDecoration: 'none' }` instead as Griffel supports CSS shorthands now */
 export function textDecoration(style: TextDecorationStyleInput): TextDecorationStyle;
+/** @deprecated Use `{ textDecoration: 'dotted' }` instead as Griffel supports CSS shorthands now */
 export function textDecoration(line: TextDecorationLineInput): TextDecorationStyle;
 
+/** @deprecated Use `{ textDecoration: 'underline dotted' }` instead as Griffel supports CSS shorthands now */
 export function textDecoration(line: TextDecorationLineInput, style: TextDecorationStyleInput): TextDecorationStyle;
+/** @deprecated Use `{ textDecoration: 'underline dotted red' }` instead as Griffel supports CSS shorthands now */
 export function textDecoration(
   line: TextDecorationLineInput,
   style: TextDecorationStyleInput,
   color: TextDecorationColorInput,
 ): TextDecorationStyle;
+/** @deprecated Use `{ textDecoration: 'underline dotted red 2px' }` instead as Griffel supports CSS shorthands now */
 export function textDecoration(
   line: TextDecorationLineInput,
   style: TextDecorationStyleInput,

diff --git a/packages/core/src/shorthands/transition.ts b/packages/core/src/shorthands/transition.ts
@@ -19,19 +19,26 @@ type TransitionStyle = Pick<
   'transitionProperty' | 'transitionDelay' | 'transitionDuration' | 'transitionTimingFunction'
 >;
 
+/** @deprecated Use `{ transition: 'inherit' }` instead as Griffel supports CSS shorthands now */
 export function transition(globalValue: TransitionGlobalInput): TransitionStyle;
+/** @deprecated Use `{ transition: 'margin-right 4s' }` instead as Griffel supports CSS shorthands now */
 export function transition(property: TransitionPropertyInput, duration: TransitionDurationInput): TransitionStyle;
+/** @deprecated Use `{ transition: 'margin-right 4s 1s' }` instead as Griffel supports CSS shorthands now */
 export function transition(
   property: TransitionPropertyInput,
   duration: TransitionDurationInput,
   delay: TransitionDelayInput,
 ): TransitionStyle;
+/** @deprecated Use `{ transition: 'margin-right 4s 1s ease-in' }` instead as Griffel supports CSS shorthands now */
 export function transition(
   property: TransitionPropertyInput,
   duration: TransitionDurationInput,
   delay: TransitionDelayInput,
   easingFunction: TransitionTimingFunctionInput,
 ): TransitionStyle;
+/**
+ * @deprecated Use `{ transition: 'margin-right 4s 1s ease-in, padding 3s 2s ease-out' }` instead as Griffel supports CSS shorthands now
+ * */
 export function transition(values: TransitionInputs[]): TransitionStyle;
 
 /**