@atlaskit/link-picker 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.5.1
+
+### Patch Changes
+
+- [`99dba1b6364`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99dba1b6364) - [ux] Fix the tab margin in Link Picker
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/ui/link-picker/index.js

@@ -21,6 +21,16 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _button = _interopRequireWildcard(require("@atlaskit/button"));
+
+var _form = require("@atlaskit/form");
+
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
@@ -35,17 +45,7 @@ var _browser = require("./browser");
 
 var _transformTimeStamp = require("./transformTimeStamp");
 
-var _announcer = _interopRequireDefault(require(".//announcer"));
-
-var _button = _interopRequireWildcard(require("@atlaskit/button"));
-
-var _form = require("@atlaskit/form");
-
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-
-var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _announcer = _interopRequireDefault(require("./announcer"));
 
 var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-results"));
 
@@ -297,7 +297,9 @@ function LinkPicker(_ref) {
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && (0, _react2.jsx)(_tabs.default, {
+  }), tabs.length > 0 && (0, _react2.jsx)("div", {
+    css: _styled.tabsWrapperStyles
+  }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: function onChange(activeTab) {
@@ -313,7 +315,7 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  }))), !!items.length && (0, _react2.jsx)("div", {
+  })))), !!items.length && (0, _react2.jsx)("div", {
     css: _styled.listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

package/dist/cjs/ui/link-picker/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
@@ -30,4 +30,6 @@ exports.rootContainerStylesForLoader = rootContainerStylesForLoader;
 var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
 exports.searchIconStyles = searchIconStyles;
 var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.listTitleStyles = listTitleStyles;
+exports.listTitleStyles = listTitleStyles;
+var tabsWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+exports.tabsWrapperStyles = tabsWrapperStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/index.js

@@ -4,19 +4,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useCallback, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import { transformTimeStamp } from './transformTimeStamp';
-import Announcer from './/announcer';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import VisuallyHidden from '@atlaskit/visually-hidden';
+import Announcer from './announcer';
 import LinkSearchNoResults from './link-search-no-results';
 import { usePlugins } from '../../services/use-plugins';
 export const RECENT_SEARCH_LIST_SIZE = 5;
@@ -256,7 +256,9 @@ function LinkPicker({
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && jsx(Tabs, {
+  }), tabs.length > 0 && jsx("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: activeTab => dispatch({
@@ -268,7 +270,7 @@ function LinkPicker({
   }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     key: tab.tabTitle,
     testId: testIds.tabItem
-  }, tab.tabTitle)))), !!items.length && jsx("div", {
+  }, tab.tabTitle))))), !!items.length && jsx("div", {
     css: listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

package/dist/es2019/ui/link-picker/styled.js

@@ -29,4 +29,8 @@ export const listTitleStyles = css`
   ${typography.h100()}
   text-transform: uppercase;
   margin-bottom: ${gridSize() / 2}px;
+`;
+export const tabsWrapperStyles = css`
+  margin-left: -${gridSize()}px;
+  margin-right: -${gridSize()}px;
 `;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker/index.js

@@ -10,19 +10,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useCallback, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import { transformTimeStamp } from './transformTimeStamp';
-import Announcer from './/announcer';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import VisuallyHidden from '@atlaskit/visually-hidden';
+import Announcer from './announcer';
 import LinkSearchNoResults from './link-search-no-results';
 import { usePlugins } from '../../services/use-plugins';
 export var RECENT_SEARCH_LIST_SIZE = 5;
@@ -261,7 +261,9 @@ function LinkPicker(_ref) {
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && jsx(Tabs, {
+  }), tabs.length > 0 && jsx("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: function onChange(activeTab) {
@@ -277,7 +279,7 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  }))), !!items.length && jsx("div", {
+  })))), !!items.length && jsx("div", {
     css: listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

package/dist/esm/ui/link-picker/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -14,4 +14,5 @@ var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
 export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 export var rootContainerStylesForLoader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
 export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var tabsWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize(), gridSize());

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"sideEffects": false
 }

package/dist/types/ui/link-picker/styled.d.ts

@@ -2,3 +2,4 @@ export declare const rootContainerStyles: import("@emotion/react").SerializedSty
 export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
 export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
 export declare const listTitleStyles: import("@emotion/react").SerializedStyles;
+export declare const tabsWrapperStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {