@atlaskit/editor-plugin-table 7.12.2 → 7.12.4

package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+
+
+
+export interface Props {
+  target: HTMLElement;
+  content: React.ReactNode;
+  alignX?: 'left' | 'center' | 'right';
+  alignY?: "top" | "bottom" | "start";
+  zIndex?: number;
+  forcePlacement?: boolean;
+  stick?: boolean;
+  offset?: [number, number];
+}
+
+
+export const FloatingToolbarLabel = React.memo(
+  (props: Props ) => {
+    const {target,content, alignX, alignY, zIndex, forcePlacement, stick, offset} = props;
+    return (
+      <Popup
+        target={target}
+        alignX={alignX}
+        alignY={alignY}
+        zIndex={zIndex}
+        stick={stick}
+        forcePlacement={forcePlacement}
+        offset={offset}
+      >
+        {content}
+      </Popup>
+    );
+  },
+);

package/src/ui/TableFullWidthLabel/index.tsx

@@ -6,19 +6,31 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
-const tableFullWidthLabelStyles = xcss({
-  minWidth: '120px',
-  height: token('space.300', '24px'),
+const tableFullWidthLabelWrapperStyles = xcss({
+  height: token('space.400', '32px'),
   display: 'flex',
-  justifyContent: 'center',
+  backgroundColor: 'elevation.surface.overlay',
+  borderRadius: 'border.radius',
+  boxShadow:'elevation.shadow.overlay',
+  lineHeight: 1,
+  boxSizing: 'border-box',
   alignItems: 'center',
 });
 
+const tableFullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+});
+
 export const FullWidthDisplay = () => {
   const { formatMessage } = useIntl();
   return (
-    <Box xcss={tableFullWidthLabelStyles}>
-      <Inline>{formatMessage(messages.fullWidthLabel)}</Inline>
-    </Box>
+      <Box xcss={tableFullWidthLabelWrapperStyles}>
+        <Inline xcss={tableFullWidthLabelStyles}>{formatMessage(messages.fullWidthLabel)}</Inline>
+      </Box>
   );
 };