@potok/editor - npm Package Compare versions

Comparing version 2.0.0-beta2 to 2.0.0-beta3

lib/Layout.jsx

@@ -10,6 +10,7 @@ import React, { Component } from 'react';
 import { HorizontalDivider as Divider } from './styled/menu';
+import {
+  STANDARD_MENU_BAR_HEIGHT_PX,
+  A4_MENU_BAR_HEIGHT_PX,
+} from './styled/constants';
 
-export const STANDARD_MENU_BAR_HEIGHT_PX = 34;
-export const A4_MENU_BAR_HEIGHT_PX = 50;
-
 class Layout extends Component {
@@ -53,2 +54,3 @@ callback = variable => {
 
+export { STANDARD_MENU_BAR_HEIGHT_PX, A4_MENU_BAR_HEIGHT_PX };
 export default Layout;

lib/Menu.jsx

@@ -28,3 +28,2 @@ import React, { Component } from 'react';
   ButtonLabelWrapper,
-  ButtonLabelTextWrapper,
   StyledDownIcon as DownIcon,
@@ -36,4 +35,4 @@ LinkInput,
   templateSelectorStyle,
-  MIN_STYLE_BUTTON_LABEL_WIDTH_PX,
 } from './styled/menu';
+import { MIN_STYLE_BUTTON_LABEL_WIDTH_PX } from './styled/constants';
 
@@ -277,3 +276,3 @@ class Menu extends Component {
                     ) : (
-                      <ButtonLabelTextWrapper
+                      <ButtonLabelWrapper
                         onClick={onClick}
@@ -285,3 +284,3 @@ isOpened={isOpened}
                         <DownIcon size="xsmall" />
-                      </ButtonLabelTextWrapper>
+                      </ButtonLabelWrapper>
                     )
@@ -288,0 +287,0 @@ }

lib/styled/index.js

@@ -6,3 +6,3 @@ import styled from 'styled-components';
 
-import { A4_MENU_BAR_HEIGHT_PX } from '../Layout';
+import { A4_MENU_BAR_HEIGHT_PX } from './constants';
 import {
@@ -9,0 +9,0 @@ PLUGIN_VARIABLES_CLASSNAME,

lib/styled/menu.js

@@ -7,9 +7,11 @@ import styled from 'styled-components';
 
-import { STANDARD_MENU_BAR_HEIGHT_PX } from '../Layout';
+import {
+  STANDARD_MENU_BAR_HEIGHT_PX,
+  A4_MENU_BAR_HEIGHT_PX,
+  ICON_SIZE_PX,
+  LABEL_ICON_SIZE_PX,
+  BUTTON_SIZE_PX,
+  MIN_STYLE_BUTTON_LABEL_WIDTH_PX,
+} from './constants';
 
-const ICON_SIZE_PX = 18;
-const LABEL_ICON_SIZE_PX = 12;
-const BUTTON_SIZE_PX = 26;
-export const MIN_STYLE_BUTTON_LABEL_WIDTH_PX = 150;
-
 export const Wrapper = styled.div`
@@ -110,2 +112,10 @@ display: flex;
   transition: background 0.2s ease;
+  height: ${STANDARD_MENU_BAR_HEIGHT_PX}px;
+  width: ${props => {
+    const width = props.width;
+    if (width > MIN_STYLE_BUTTON_LABEL_WIDTH_PX) {
+      return 'auto';
+    }
+    return `${width}px`;
+  }};
 
@@ -117,9 +127,2 @@ &:hover {
 
-export const ButtonLabelTextWrapper = ButtonLabelWrapper.extend`
-  width: ${props =>
-    props.width > MIN_STYLE_BUTTON_LABEL_WIDTH_PX
-      ? 'auto'
-      : `${props.width}px`};
-`;
-
 export const StyledDownIcon = styled(DownIcon)`
@@ -143,2 +146,3 @@ color: ${colors.N600};
   padding: 0;
+  height: ${STANDARD_MENU_BAR_HEIGHT_PX}px;
   max-width: ${BUTTON_SIZE_PX}px;
@@ -161,3 +165,3 @@ `;
 export const VerticalDivider = styled.div`
-  height: ${props => props.height}px;
+  height: ${prop('height', STANDARD_MENU_BAR_HEIGHT_PX)}px;
   width: 0;
@@ -174,3 +178,3 @@ margin: 0 12px;
 
-const configCustomSelectorStyles = ({ minWidth }) => ({
+const configCustomSelectorStyles = ({ minWidth, marginLeft = 0 }) => ({
   container: base => ({
@@ -229,2 +233,6 @@ ...base,
   indicatorSeparator: () => {},
+  menu: base => ({
+    ...base,
+    marginLeft,
+  }),
 });
@@ -234,2 +242,3 @@
   minWidth: '200px',
+  marginLeft: '-160px',
 });
@@ -236,0 +245,0 @@ export const lineHeightSelectorStyle = configCustomSelectorStyles({

lib/WithContainerWidth.jsx

@@ -5,8 +5,10 @@ import React, { Component } from 'react';
 
+import { STANDARD_MENU_BAR_HEIGHT_PX } from './styled/constants';
+
 const Wrapper = styled.div`
   flex: ${props => (props.grow ? '1 0 auto' : '0 1 auto')};
-  height: ${props => props.height};
+  height: ${STANDARD_MENU_BAR_HEIGHT_PX}px;
   border-left: 1px solid ${colors.N30};
   margin-left: 12px;
-  padding-left: 6px;
+  padding-left: 12px;
 `;
@@ -13,0 +15,0 @@

package.json

 {
   "name": "@potok/editor",
-  "version": "2.0.0-beta2",
+  "version": "2.0.0-beta3",
   "description": "Potok.io rich text editor (based on ProseMirror)",
@@ -13,4 +13,4 @@ "main": "./lib/Editor.jsx",
   "dependencies": {
-    "@potok/forms": "^0.0.7",
-    "@potok/icons": "^2.6.1",
+    "@potok/forms": "^0.0.9",
+    "@potok/icons": "^2.6.2",
     "prosemirror-commands": "^1.0.7",
@@ -17,0 +17,0 @@ "prosemirror-dropcursor": "^1.0.0",

No alert changes

Improved metrics

Total package byte prevSize

64850

increased by0.87%

Number of package files

25

increased by4.17%

Lines of code

2066

increased by0.98%

Dependency changes

• + Added@potok/forms@0.0.9(transitive)

• - Removed@potok/forms@0.0.7(transitive)

• Updated@potok/forms@^0.0.9

• Updated@potok/icons@^2.6.2