@atlaskit/lozenge 11.3.0 → 11.3.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/lozenge
 
+## 11.3.2
+
+### Patch Changes
+
+- [`25e09731caa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25e09731caa) - Fixes:
+
+  - Removes `vertical-align: baseline` from Lozenge which was being applied incorrectly.
+  - Removes a default prop which was causing unintended re-renders.
+
+- Updated dependencies
+
+## 11.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.3.0
 
 ### Minor Changes

package/codemods/utils.tsx

@@ -7,23 +7,21 @@ import {
   getJSXAttributesByName,
 } from '@atlaskit/codemod-utils';
 
-export const createRemoveFuncWithDefaultSpecifierFor = (
-  component: string,
-  prop: string,
-  comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getDefaultSpecifier(j, source, component);
+export const createRemoveFuncWithDefaultSpecifierFor =
+  (component: string, prop: string, comment?: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const specifier = getDefaultSpecifier(j, source, component);
 
-  if (!specifier) {
-    return;
-  }
+    if (!specifier) {
+      return;
+    }
 
-  source.findJSXElements(specifier).forEach((element) => {
-    getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
-      if (comment) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-      }
-      j(attribute).remove();
+    source.findJSXElements(specifier).forEach((element) => {
+      getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+        if (comment) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+        }
+        j(attribute).remove();
+      });
     });
-  });
-};
+  };

package/dist/cjs/Lozenge/index.js

@@ -41,8 +41,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       _ref$maxWidth = _ref.maxWidth,
       maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style;
+      style = _ref.style;
   var appearanceStyle = isBold ? 'bold' : 'subtle';
   var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
   var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
@@ -54,13 +53,12 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     paddingInline: "scale.050",
     position: "static",
     testId: testId,
+    overflow: "hidden",
     UNSAFE_style: {
-      backgroundColor: style.backgroundColor,
-      verticalAlign: 'baseline',
+      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
       maxWidth: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
-    as: "span",
     fontSize: "11px",
     fontWeight: "700",
     lineHeight: "16px",
@@ -68,11 +66,9 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     color: textColors[appearanceStyle][appearanceType],
     shouldTruncate: true,
     UNSAFE_style: {
-      color: style.color,
-      width: '100%',
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-      maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
-
+      color: style === null || style === void 0 ? void 0 : style.color,
+      // to negate paddingInline specified on Box above
+      maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
     },
     testId: testId && "".concat(testId, "--text")
   }, children));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.3.0",
+	"version": "11.3.2",
 	"sideEffects": false
 }

package/dist/es2019/Lozenge/index.js

@@ -20,7 +20,7 @@ const Lozenge = /*#__PURE__*/memo(({
   isBold = false,
   appearance = 'default',
   maxWidth = 200,
-  style = {}
+  style
 }) => {
   const appearanceStyle = isBold ? 'bold' : 'subtle';
   const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
@@ -33,13 +33,12 @@ const Lozenge = /*#__PURE__*/memo(({
     paddingInline: "scale.050",
     position: "static",
     testId: testId,
+    overflow: "hidden",
     UNSAFE_style: {
-      backgroundColor: style.backgroundColor,
-      verticalAlign: 'baseline',
+      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
       maxWidth: '100%'
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    as: "span",
     fontSize: "11px",
     fontWeight: "700",
     lineHeight: "16px",
@@ -47,11 +46,9 @@ const Lozenge = /*#__PURE__*/memo(({
     color: textColors[appearanceStyle][appearanceType],
     shouldTruncate: true,
     UNSAFE_style: {
-      color: style.color,
-      width: '100%',
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-      maxWidth: `calc(${maxWidthValue} - ${"var(--ds-scale-100, 8px)"})` // to negate paddingInline specified on Box above
-
+      color: style === null || style === void 0 ? void 0 : style.color,
+      // to negate paddingInline specified on Box above
+      maxWidth: `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
     },
     testId: testId && `${testId}--text`
   }, children));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.3.0",
+	"version": "11.3.2",
 	"sideEffects": false
 }

package/dist/esm/Lozenge/index.js

@@ -23,8 +23,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       _ref$maxWidth = _ref.maxWidth,
       maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style;
+      style = _ref.style;
   var appearanceStyle = isBold ? 'bold' : 'subtle';
   var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
   var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
@@ -36,13 +35,12 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
     paddingInline: "scale.050",
     position: "static",
     testId: testId,
+    overflow: "hidden",
     UNSAFE_style: {
-      backgroundColor: style.backgroundColor,
-      verticalAlign: 'baseline',
+      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
       maxWidth: '100%'
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    as: "span",
     fontSize: "11px",
     fontWeight: "700",
     lineHeight: "16px",
@@ -50,11 +48,9 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
     color: textColors[appearanceStyle][appearanceType],
     shouldTruncate: true,
     UNSAFE_style: {
-      color: style.color,
-      width: '100%',
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-      maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
-
+      color: style === null || style === void 0 ? void 0 : style.color,
+      // to negate paddingInline specified on Box above
+      maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
     },
     testId: testId && "".concat(testId, "--text")
   }, children));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.3.0",
+	"version": "11.3.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/lozenge",
-  "version": "11.3.0",
+  "version": "11.3.2",
   "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -34,9 +26,9 @@
   },
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/ds-explorations": "^1.6.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.20",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {

package/report.api.md

@@ -15,14 +15,16 @@ import { MemoExoticComponent } from 'react';
 import { ReactNode } from 'react';
 
 // @public
-const Lozenge: MemoExoticComponent<({
-  children,
-  testId,
-  isBold,
-  appearance,
-  maxWidth,
-  style,
-}: LozengeProps) => jsx.JSX.Element>;
+const Lozenge: MemoExoticComponent<
+  ({
+    children,
+    testId,
+    isBold,
+    appearance,
+    maxWidth,
+    style,
+  }: LozengeProps) => jsx.JSX.Element
+>;
 export default Lozenge;
 
 // @public (undocumented)

package/dist/types-ts4.0/Lozenge/index.d.ts

@@ -1,41 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
-export interface LozengeProps {
-    /**
-     * The appearance type.
-     */
-    appearance?: ThemeAppearance;
-    /**
-     * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
-     */
-    children?: ReactNode;
-    /**
-     * Determines whether to apply the bold style or not.
-     */
-    isBold?: boolean;
-    /**
-     * max-width of lozenge container. Default to 200px.
-     */
-    maxWidth?: number | string;
-    /**
-     * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
-     */
-    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-}
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-declare const Lozenge: React.MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
-export default Lozenge;

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Lozenge';
-export type { ThemeAppearance } from './Lozenge';

package/dist/types-ts4.0/theme.d.ts

@@ -1,120 +0,0 @@
-/**
- * @deprecated
- */
-export declare const defaultBackgroundColor: {
-    default: {
-        light: string;
-        dark: string;
-    };
-    inprogress: {
-        light: string;
-        dark: string;
-    };
-    moved: {
-        light: string;
-        dark: string;
-    };
-    new: {
-        light: string;
-        dark: string;
-    };
-    removed: {
-        light: string;
-        dark: string;
-    };
-    success: {
-        light: string;
-        dark: string;
-    };
-};
-/**
- * @deprecated
- */
-export declare const defaultTextColor: {
-    default: {
-        light: string;
-        dark: string;
-    };
-    inprogress: {
-        light: string;
-        dark: string;
-    };
-    moved: {
-        light: string;
-        dark: string;
-    };
-    new: {
-        light: string;
-        dark: string;
-    };
-    removed: {
-        light: string;
-        dark: string;
-    };
-    success: {
-        light: string;
-        dark: string;
-    };
-};
-/**
- * @deprecated
- */
-export declare const boldBackgroundColor: {
-    default: {
-        light: string;
-        dark: string;
-    };
-    inprogress: {
-        light: string;
-        dark: string;
-    };
-    moved: {
-        light: string;
-        dark: string;
-    };
-    new: {
-        light: string;
-        dark: string;
-    };
-    removed: {
-        light: string;
-        dark: string;
-    };
-    success: {
-        light: string;
-        dark: string;
-    };
-};
-/**
- * @deprecated
- */
-export declare const boldTextColor: {
-    default: {
-        light: string;
-        dark: string;
-    };
-    inprogress: {
-        light: string;
-        dark: string;
-    };
-    moved: {
-        light: string;
-        dark: string;
-    };
-    new: {
-        light: string;
-        dark: string;
-    };
-    removed: {
-        light: string;
-        dark: string;
-    };
-    success: {
-        light: string;
-        dark: string;
-    };
-};
-/**
- * @deprecated
- */
-export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';