@atlaskit/editor-common 81.1.4 → 81.2.0

package/dist/es2019/styles/shared/lists.js

@@ -36,17 +36,14 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
 export const listsSharedStyles = css`
-  /* =============== INDENTATION SPACING ========= */
+	/* =============== INDENTATION SPACING ========= */
 
-  ul,
-  ol {
-    box-sizing: border-box;
-    padding-left: var(
-      ${CSS_VAR_NAMES.ITEM_COUNTER_PADDING},
-      ${listItemCounterPadding}px
-    );
+	ul,
+	ol {
+		box-sizing: border-box;
+		padding-left: var(${CSS_VAR_NAMES.ITEM_COUNTER_PADDING}, ${listItemCounterPadding}px);
 
-    /*
+		/*
     Firefox does not handle empty block element inside li tag.
     If there is not block element inside li tag,
       then firefox sets inherited height to li
@@ -56,14 +53,14 @@ export const listsSharedStyles = css`
     More details at
     https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
     */
-    li p:empty,
-    li p > span:empty {
-      ${browser.gecko ? 'display: inline-block;' : ''}
-    }
-  }
-
-  ${orderedListSelector}, ${bulletListSelector} {
-    /*
+		li p:empty,
+		li p > span:empty {
+			${browser.gecko ? 'display: inline-block;' : ''}
+		}
+	}
+
+	${orderedListSelector}, ${bulletListSelector} {
+		/*
       Ensures list item content adheres to the list's margin instead
       of filling the entire block row. This is important to allow
       clicking interactive elements which are floated next to a list.
@@ -78,78 +75,78 @@ export const listsSharedStyles = css`
 
       @see https://css-tricks.com/display-flow-root/
     */
-    // For older browsers the do not support flow-root.
-    /* stylelint-disable declaration-block-no-duplicate-properties */
-    display: table;
-    display: flow-root;
-    /* stylelint-enable declaration-block-no-duplicate-properties */
-  }
+		// For older browsers the do not support flow-root.
+		/* stylelint-disable declaration-block-no-duplicate-properties */
+		display: table;
+		display: flow-root;
+		/* stylelint-enable declaration-block-no-duplicate-properties */
+	}
 
-  /* =============== INDENTATION AESTHETICS ========= */
+	/* =============== INDENTATION AESTHETICS ========= */
 
-  /**
+	/**
         We support nested lists up to six levels deep.
     **/
 
-  /* LEGACY LISTS */
-
-  ul,
-  ul ul ul ul {
-    list-style-type: disc;
-  }
-
-  ul ul,
-  ul ul ul ul ul {
-    list-style-type: circle;
-  }
-
-  ul ul ul,
-  ul ul ul ul ul ul {
-    list-style-type: square;
-  }
-
-  ol,
-  ol ol ol ol {
-    list-style-type: decimal;
-  }
-  ol ol,
-  ol ol ol ol ol {
-    list-style-type: lower-alpha;
-  }
-  ol ol ol,
-  ol ol ol ol ol ol {
-    list-style-type: lower-roman;
-  }
-
-  /* PREDICTABLE LISTS */
-
-  ol[data-indent-level='1'],
-  ol[data-indent-level='4'] {
-    list-style-type: decimal;
-  }
-
-  ol[data-indent-level='2'],
-  ol[data-indent-level='5'] {
-    list-style-type: lower-alpha;
-  }
-
-  ol[data-indent-level='3'],
-  ol[data-indent-level='6'] {
-    list-style-type: lower-roman;
-  }
-
-  ul[data-indent-level='1'],
-  ul[data-indent-level='4'] {
-    list-style-type: disc;
-  }
-
-  ul[data-indent-level='2'],
-  ul[data-indent-level='5'] {
-    list-style-type: circle;
-  }
-
-  ul[data-indent-level='3'],
-  ul[data-indent-level='6'] {
-    list-style-type: square;
-  }
+	/* LEGACY LISTS */
+
+	ul,
+	ul ul ul ul {
+		list-style-type: disc;
+	}
+
+	ul ul,
+	ul ul ul ul ul {
+		list-style-type: circle;
+	}
+
+	ul ul ul,
+	ul ul ul ul ul ul {
+		list-style-type: square;
+	}
+
+	ol,
+	ol ol ol ol {
+		list-style-type: decimal;
+	}
+	ol ol,
+	ol ol ol ol ol {
+		list-style-type: lower-alpha;
+	}
+	ol ol ol,
+	ol ol ol ol ol ol {
+		list-style-type: lower-roman;
+	}
+
+	/* PREDICTABLE LISTS */
+
+	ol[data-indent-level='1'],
+	ol[data-indent-level='4'] {
+		list-style-type: decimal;
+	}
+
+	ol[data-indent-level='2'],
+	ol[data-indent-level='5'] {
+		list-style-type: lower-alpha;
+	}
+
+	ol[data-indent-level='3'],
+	ol[data-indent-level='6'] {
+		list-style-type: lower-roman;
+	}
+
+	ul[data-indent-level='1'],
+	ul[data-indent-level='4'] {
+		list-style-type: disc;
+	}
+
+	ul[data-indent-level='2'],
+	ul[data-indent-level='5'] {
+		list-style-type: circle;
+	}
+
+	ul[data-indent-level='3'],
+	ul[data-indent-level='6'] {
+		list-style-type: square;
+	}
 `;

package/dist/es2019/styles/shared/panel.js

@@ -152,104 +152,104 @@ const mainDynamicStyles = panelType => {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
 export const panelSharedStylesWithoutPrefix = () => css`
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  margin: ${blockNodesVerticalMargin} 0 0;
-  padding-top: ${"var(--ds-space-100, 8px)"};
-  padding-right: ${"var(--ds-space-200, 16px)"};
-  padding-bottom: ${"var(--ds-space-100, 8px)"};
-  padding-left: ${"var(--ds-space-100, 8px)"};
-  min-width: ${akEditorTableCellMinWidth}px;
-  display: flex;
-  position: relative;
-  align-items: normal;
-  word-break: break-word;
+	border-radius: ${"var(--ds-border-radius, 3px)"};
+	margin: ${blockNodesVerticalMargin} 0 0;
+	padding-top: ${"var(--ds-space-100, 8px)"};
+	padding-right: ${"var(--ds-space-200, 16px)"};
+	padding-bottom: ${"var(--ds-space-100, 8px)"};
+	padding-left: ${"var(--ds-space-100, 8px)"};
+	min-width: ${akEditorTableCellMinWidth}px;
+	display: flex;
+	position: relative;
+	align-items: normal;
+	word-break: break-word;
 
-  ${mainDynamicStyles(PanelType.INFO)}
+	${mainDynamicStyles(PanelType.INFO)}
 
-  .${PanelSharedCssClassName.icon} {
-    flex-shrink: 0;
-    height: ${"var(--ds-space-300, 24px)"};
-    width: ${"var(--ds-space-300, 24px)"};
-    box-sizing: content-box;
-    padding-right: ${"var(--ds-space-100, 8px)"};
-    text-align: center;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    margin-top: 0.1em;
-    ${iconDynamicStyles(PanelType.INFO)}
+	.${PanelSharedCssClassName.icon} {
+		flex-shrink: 0;
+		height: ${"var(--ds-space-300, 24px)"};
+		width: ${"var(--ds-space-300, 24px)"};
+		box-sizing: content-box;
+		padding-right: ${"var(--ds-space-100, 8px)"};
+		text-align: center;
+		user-select: none;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		margin-top: 0.1em;
+		${iconDynamicStyles(PanelType.INFO)}
 
-    > span {
-      vertical-align: middle;
-      display: inline-flex;
-    }
+		> span {
+			vertical-align: middle;
+			display: inline-flex;
+		}
 
-    .${emojiSprite} {
-      vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
-    }
+		.${emojiSprite} {
+			vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
+		}
 
-    .${emojiImage} {
-      vertical-align: ${panelEmojiImageVerticalAlignment}px;
+		.${emojiImage} {
+			vertical-align: ${panelEmojiImageVerticalAlignment}px;
 
-      // Vertical align only works for inline-block elements in Firefox
-      @-moz-document url-prefix() {
-        img {
-          display: inline-block;
-        }
-      }
-    }
-  }
+			// Vertical align only works for inline-block elements in Firefox
+			@-moz-document url-prefix() {
+				img {
+					display: inline-block;
+				}
+			}
+		}
+	}
 
-  .ak-editor-panel__content {
-    margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
-    flex: 1 0 0;
-    /*
+	.ak-editor-panel__content {
+		margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
+		flex: 1 0 0;
+		/*
       https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
       The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
     */
-    min-width: 0;
-  }
+		min-width: 0;
+	}
 
-  &[data-panel-type='${PanelType.NOTE}'] {
-    ${mainDynamicStyles(PanelType.NOTE)}
+	&[data-panel-type='${PanelType.NOTE}'] {
+		${mainDynamicStyles(PanelType.NOTE)}
 
-    .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.NOTE)}
-    }
-  }
+		.${PanelSharedCssClassName.icon} {
+			${iconDynamicStyles(PanelType.NOTE)}
+		}
+	}
 
-  &[data-panel-type='${PanelType.TIP}'] {
-    ${mainDynamicStyles(PanelType.TIP)}
+	&[data-panel-type='${PanelType.TIP}'] {
+		${mainDynamicStyles(PanelType.TIP)}
 
-    .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.TIP)}
-    }
-  }
+		.${PanelSharedCssClassName.icon} {
+			${iconDynamicStyles(PanelType.TIP)}
+		}
+	}
 
-  &[data-panel-type='${PanelType.WARNING}'] {
-    ${mainDynamicStyles(PanelType.WARNING)}
+	&[data-panel-type='${PanelType.WARNING}'] {
+		${mainDynamicStyles(PanelType.WARNING)}
 
-    .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.WARNING)}
-    }
-  }
+		.${PanelSharedCssClassName.icon} {
+			${iconDynamicStyles(PanelType.WARNING)}
+		}
+	}
 
-  &[data-panel-type='${PanelType.ERROR}'] {
-    ${mainDynamicStyles(PanelType.ERROR)}
+	&[data-panel-type='${PanelType.ERROR}'] {
+		${mainDynamicStyles(PanelType.ERROR)}
 
-    .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.ERROR)}
-    }
-  }
+		.${PanelSharedCssClassName.icon} {
+			${iconDynamicStyles(PanelType.ERROR)}
+		}
+	}
 
-  &[data-panel-type='${PanelType.SUCCESS}'] {
-    ${mainDynamicStyles(PanelType.SUCCESS)}
+	&[data-panel-type='${PanelType.SUCCESS}'] {
+		${mainDynamicStyles(PanelType.SUCCESS)}
 
-    .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.SUCCESS)}
-    }
-  }
+		.${PanelSharedCssClassName.icon} {
+			${iconDynamicStyles(PanelType.SUCCESS)}
+		}
+	}
 `;
 export const panelSharedStyles = () => css({
   [`.${PanelSharedCssClassName.prefix}`]: panelSharedStylesWithoutPrefix()