@atlaskit/section-message - npm Package Compare versions

Comparing version 4.1.1 to 4.1.2

CHANGELOG.md

 # @atlaskit/section-message
 
+## 4.1.2
+
+### Patch Changes
+
+- [patch][d222c2b987](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d222c2b987):
+
+  Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
+
+  ### Breaking
+
+  ** getTokens props changes **
+  When defining the value function passed into a ThemeProvider, the getTokens parameter cannot be called without props; if no props are provided an empty object `{}` must be passed in:
+
+  ```javascript
+  <CustomTheme.Provider
+    value={t => ({ ...t(), backgroundColor: '#333'})}
+  >
+  ```
+
+  becomes:
+
+  ```javascript
+  <CustomTheme.Provider
+    value={t => ({ ...t({}), backgroundColor: '#333'})}
+  >
+  ```
+
+  ** Color palette changes **
+  Color palettes have been moved into their own file.
+  Users will need to update imports from this:
+
+  ```javascript
+  import { colors } from '@atlaskit/theme';
+
+  colors.colorPalette('8');
+  ```
+
+  to this:
+
+  ```javascript
+  import { colorPalette } from '@atlaskit/theme';
+
+  colorPalette.colorPalette('8');
+  ```
+
+  or for multi entry-point users:
+
+  ```javascript
+  import * as colors from '@atlaskit/theme/colors';
+
+  colors.colorPalette('8');
+  ```
+
+  to this:
+
+  ```javascript
+  import * as colorPalettes from '@atlaskit/theme/color-palette';
+
+  colorPalettes.colorPalette('8');
+  ```
+
 ## 4.1.1
@@ -4,0 +65,0 @@

dist/cjs/components/styled.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
 export declare const ContentContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Title: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const Title: import("styled-components").StyledComponentClass<(import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").NoThemeProps), any, (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").NoThemeProps)>;
 export declare const Description: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
@@ -12,0 +12,0 @@ export declare const Actions: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>;

dist/cjs/components/styled.js

@@ -7,3 +7,2 @@ "use strict";
 var colors_1 = require("@atlaskit/theme/colors");
-var math_1 = require("@atlaskit/theme/math");
 var typography_1 = require("@atlaskit/theme/typography");
@@ -13,3 +12,3 @@ exports.Container = styled_components_1.default.section(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  border-radius: ", "px;\n  background-color: ", ";\n  padding: ", "px;\n"], ["\n  display: flex;\n  border-radius: ", "px;\n  background-color: ", ";\n  padding: ", "px;\n"])), constants_1.borderRadius, function (_a) {
     return backgroundColor;
-}, math_1.multiply(constants_1.gridSize, 2));
+}, constants_1.gridSize() * 2);
 exports.ContentContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
@@ -19,3 +18,3 @@ exports.Title = styled_components_1.default.h1(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  margin: 0;\n  ", ";\n"], ["\n  margin: 0;\n  ", ";\n"])), typography_1.h500);
 exports.Actions = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  list-style: none;\n  padding-left: 0;\n  * + & {\n    margin-top: 8px;\n  }\n"], ["\n  display: flex;\n  list-style: none;\n  padding-left: 0;\n  * + & {\n    margin-top: 8px;\n  }\n"])));
-exports.Action = styled_components_1.default.li(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"])), colors_1.N500, math_1.multiply(constants_1.gridSize, 2));
+exports.Action = styled_components_1.default.li(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"])), colors_1.N500, constants_1.gridSize() * 2);
 // If the icon is not wrapped in a div with a width, and we instead use margin or
@@ -25,4 +24,4 @@ // padding, the icon is shrunk by the padding.
 // space.
-exports.IconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"], ["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"])), math_1.multiply(constants_1.gridSize, 5));
+exports.IconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"], ["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"])), constants_1.gridSize() * 5);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 //# sourceMappingURL=styled.js.map

dist/cjs/version.json

 {
 	"name": "@atlaskit/section-message",
-	"version": "4.1.1",
+	"version": "4.1.2",
 	"sideEffects": false
 }

dist/esm/components/styled.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
 export declare const ContentContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Title: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const Title: import("styled-components").StyledComponentClass<(import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").NoThemeProps), any, (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & import("@atlaskit/theme/dist/cjs/types").NoThemeProps)>;
 export declare const Description: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
@@ -12,0 +12,0 @@ export declare const Actions: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>;

dist/esm/components/styled.js

@@ -5,3 +5,2 @@ import { __makeTemplateObject } from "tslib";
 import { N500 } from '@atlaskit/theme/colors';
-import { multiply } from '@atlaskit/theme/math';
 import { h500 } from '@atlaskit/theme/typography';
@@ -11,3 +10,3 @@ export var Container = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  border-radius: ", "px;\n  background-color: ", ";\n  padding: ", "px;\n"], ["\n  display: flex;\n  border-radius: ", "px;\n  background-color: ", ";\n  padding: ", "px;\n"])), borderRadius, function (_a) {
     return backgroundColor;
-}, multiply(gridSize, 2));
+}, gridSize() * 2);
 export var ContentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
@@ -17,3 +16,3 @@ export var Title = styled.h1(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  ", ";\n"], ["\n  margin: 0;\n  ", ";\n"])), h500);
 export var Actions = styled.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  list-style: none;\n  padding-left: 0;\n  * + & {\n    margin-top: 8px;\n  }\n"], ["\n  display: flex;\n  list-style: none;\n  padding-left: 0;\n  * + & {\n    margin-top: 8px;\n  }\n"])));
-export var Action = styled.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"])), N500, multiply(gridSize, 2));
+export var Action = styled.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin: 0;\n  & + &::before {\n    color: ", ";\n    content: '\u00B7';\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    width: ", "px;\n  }\n"])), N500, gridSize() * 2);
 // If the icon is not wrapped in a div with a width, and we instead use margin or
@@ -23,4 +22,4 @@ // padding, the icon is shrunk by the padding.
 // space.
-export var IconWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"], ["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"])), multiply(gridSize, 5));
+export var IconWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"], ["\n  flex: 0 0 auto;\n  width: ", "px;\n  > span {\n    margin: -2px 0;\n    vertical-align: top;\n  }\n"])), gridSize() * 5);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 //# sourceMappingURL=styled.js.map

dist/esm/version.json

 {
 	"name": "@atlaskit/section-message",
-	"version": "4.1.1",
+	"version": "4.1.2",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/section-message",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "A react component used to alert users of a particular screen area that needs user action",
@@ -26,3 +26,3 @@ "repository": "https://bitbucket.org/atlassian/atlaskit-mk-2",
     "@atlaskit/icon": "^19.0.6",
-    "@atlaskit/theme": "^9.2.4",
+    "@atlaskit/theme": "^9.2.6",
     "@babel/runtime": "^7.0.0",
@@ -44,6 +44,6 @@ "tslib": "^1.9.3"
     "@testing-library/react": "^8.0.1",
+    "jest-in-case": "^1.0.2",
     "enzyme": "^3.7.0",
     "enzyme-to-json": "^3.3.0",
     "exenv": "^1.2.2",
-    "jest-in-case": "^1.0.2",
     "react-dom": "^16.8.0",
@@ -50,0 +50,0 @@ "react-test-renderer": "^16.8.0"

No alert changes

Improved metrics

Total package byte prevSize

46678

increased by6%

Lines of code

399

increased by1.01%

Dependency changes

• Updated@atlaskit/theme@^9.2.6