@atlaskit/editor-common 82.3.0 → 82.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/cjs/analytics/types/element-events.js +5 -0
- package/dist/cjs/analytics/types/enums.js +8 -0
- package/dist/cjs/collab/index.js +1 -1
- package/dist/cjs/element-browser/ViewMore.js +1 -0
- package/dist/cjs/element-browser/components/CategoryList.js +2 -0
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +19 -1
- package/dist/cjs/element-browser/components/ElementSearch.js +56 -42
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +18 -0
- package/dist/cjs/extensibility/Extension/Extension/index.js +6 -2
- package/dist/cjs/extensibility/Extension/Extension/styles.js +20 -0
- package/dist/cjs/extensibility/Extension/InlineExtension/index.js +3 -1
- package/dist/cjs/extensibility/Extension/InlineExtension/styles.js +8 -0
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js +9 -1
- package/dist/cjs/extensibility/Extension/Lozenge/LozengeComponent.js +20 -15
- package/dist/cjs/extensibility/Extension/Lozenge/index.js +1 -0
- package/dist/cjs/extensibility/Extension/styles.js +13 -0
- package/dist/cjs/extensibility/ExtensionNodeWrapper.js +2 -0
- package/dist/cjs/extensibility/MultiBodiedExtension/index.js +20 -4
- package/dist/cjs/extensibility/MultiBodiedExtension/styles.js +12 -0
- package/dist/cjs/extensions/module-helpers.js +4 -0
- package/dist/cjs/keymaps/index.js +2 -1
- package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +2 -0
- package/dist/cjs/link/LinkSearch/LinkSearchList.js +2 -0
- package/dist/cjs/link/LinkSearch/LinkSearchListItem.js +9 -0
- package/dist/cjs/link/LinkSearch/ToolbarComponents.js +7 -0
- package/dist/cjs/media-inline/inline-image-wrapper.js +9 -1
- package/dist/cjs/media-inline/styles.js +12 -1
- package/dist/cjs/media-inline/views/frame.js +7 -4
- package/dist/cjs/media-inline/views/icon-wrapper.js +1 -0
- package/dist/cjs/media-inline/views/wrapper.js +1 -0
- package/dist/cjs/media-single/CommentBadge.js +5 -1
- package/dist/cjs/messages/help-dialog.js +5 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/rank.js +1 -1
- package/dist/cjs/selection/gap-cursor/styles.js +1 -1
- package/dist/cjs/styles/shared/annotation.js +6 -0
- package/dist/cjs/styles/shared/background-color.js +4 -0
- package/dist/cjs/styles/shared/block-marks.js +1 -0
- package/dist/cjs/styles/shared/blockquote.js +8 -1
- package/dist/cjs/styles/shared/code-block.js +2 -0
- package/dist/cjs/styles/shared/code-mark.js +1 -0
- package/dist/cjs/styles/shared/column-layout.js +6 -1
- package/dist/cjs/styles/shared/date.js +2 -0
- package/dist/cjs/styles/shared/embedCard.js +8 -0
- package/dist/cjs/styles/shared/expand.js +1 -0
- package/dist/cjs/styles/shared/grid.js +7 -0
- package/dist/cjs/styles/shared/headings.js +6 -0
- package/dist/cjs/styles/shared/indentation.js +8 -0
- package/dist/cjs/styles/shared/link.js +4 -1
- package/dist/cjs/styles/shared/lists.js +1 -1
- package/dist/cjs/styles/shared/media-single.js +8 -1
- package/dist/cjs/styles/shared/paragraph.js +4 -1
- package/dist/cjs/styles/shared/plugins.js +8 -0
- package/dist/cjs/styles/shared/resizer.js +1 -1
- package/dist/cjs/styles/shared/rule.js +2 -1
- package/dist/cjs/styles/shared/shadow.js +4 -1
- package/dist/cjs/styles/shared/smartCard.js +1 -1
- package/dist/cjs/styles/shared/tableCell.js +1 -0
- package/dist/cjs/styles/shared/task-decision.js +2 -0
- package/dist/cjs/styles/shared/text-color.js +3 -0
- package/dist/cjs/styles/shared/unsupported-content.js +1 -1
- package/dist/cjs/styles/shared/whitespace.js +3 -1
- package/dist/cjs/table/SortingIcon.js +2 -2
- package/dist/cjs/ui/DropList/index.js +5 -1
- package/dist/cjs/ui/Expand/index.js +13 -0
- package/dist/cjs/ui/FloatingToolbar/Button.js +2 -0
- package/dist/cjs/ui/MediaSingle/index.js +3 -1
- package/dist/cjs/ui/MediaSingle/link.js +1 -0
- package/dist/cjs/ui/MediaSingle/styled.js +6 -3
- package/dist/cjs/ui/Messages/index.js +12 -7
- package/dist/cjs/ui/MultiBodiedExtension/index.js +24 -0
- package/dist/cjs/ui/PanelTextInput/index.js +1 -0
- package/dist/cjs/ui/PanelTextInput/styles.js +6 -0
- package/dist/cjs/ui/Popup/index.js +1 -0
- package/dist/cjs/ui/UnsupportedBlock/index.js +2 -0
- package/dist/cjs/ui/UnsupportedInline/index.js +2 -0
- package/dist/cjs/ui/clear-next-sibling-margin-top.js +6 -2
- package/dist/cjs/ui-color/ColorPalette/Color/index.js +10 -3
- package/dist/cjs/ui-color/ColorPalette/Color/styles.js +3 -0
- package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessages.js +1 -1
- package/dist/cjs/ui-color/ColorPalette/index.js +1 -0
- package/dist/cjs/ui-color/ColorPalette/styles.js +1 -0
- package/dist/cjs/ui-menu/ColorPickerButton/index.js +7 -0
- package/dist/cjs/ui-menu/DropdownMenu/index.js +1 -0
- package/dist/es2019/analytics/types/element-events.js +1 -0
- package/dist/es2019/analytics/types/enums.js +8 -0
- package/dist/es2019/collab/index.js +1 -1
- package/dist/es2019/element-browser/ViewMore.js +1 -0
- package/dist/es2019/element-browser/components/CategoryList.js +3 -0
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +19 -1
- package/dist/es2019/element-browser/components/ElementSearch.js +56 -42
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +18 -0
- package/dist/es2019/extensibility/Extension/Extension/index.js +6 -2
- package/dist/es2019/extensibility/Extension/Extension/styles.js +20 -0
- package/dist/es2019/extensibility/Extension/InlineExtension/index.js +3 -1
- package/dist/es2019/extensibility/Extension/InlineExtension/styles.js +9 -0
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js +9 -1
- package/dist/es2019/extensibility/Extension/Lozenge/LozengeComponent.js +19 -14
- package/dist/es2019/extensibility/Extension/Lozenge/index.js +1 -0
- package/dist/es2019/extensibility/Extension/styles.js +14 -0
- package/dist/es2019/extensibility/ExtensionNodeWrapper.js +2 -0
- package/dist/es2019/extensibility/MultiBodiedExtension/index.js +21 -5
- package/dist/es2019/extensibility/MultiBodiedExtension/styles.js +12 -0
- package/dist/es2019/extensions/module-helpers.js +4 -0
- package/dist/es2019/keymaps/index.js +1 -0
- package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +2 -0
- package/dist/es2019/link/LinkSearch/LinkSearchList.js +2 -0
- package/dist/es2019/link/LinkSearch/LinkSearchListItem.js +9 -0
- package/dist/es2019/link/LinkSearch/ToolbarComponents.js +8 -0
- package/dist/es2019/media-inline/inline-image-wrapper.js +9 -1
- package/dist/es2019/media-inline/styles.js +12 -1
- package/dist/es2019/media-inline/views/frame.js +3 -1
- package/dist/es2019/media-inline/views/icon-wrapper.js +1 -0
- package/dist/es2019/media-inline/views/wrapper.js +1 -0
- package/dist/es2019/media-single/CommentBadge.js +5 -1
- package/dist/es2019/messages/help-dialog.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/rank.js +1 -1
- package/dist/es2019/selection/gap-cursor/styles.js +1 -1
- package/dist/es2019/styles/shared/annotation.js +6 -0
- package/dist/es2019/styles/shared/background-color.js +5 -0
- package/dist/es2019/styles/shared/block-marks.js +2 -0
- package/dist/es2019/styles/shared/blockquote.js +8 -1
- package/dist/es2019/styles/shared/code-block.js +2 -0
- package/dist/es2019/styles/shared/code-mark.js +2 -0
- package/dist/es2019/styles/shared/column-layout.js +6 -0
- package/dist/es2019/styles/shared/date.js +3 -0
- package/dist/es2019/styles/shared/embedCard.js +8 -0
- package/dist/es2019/styles/shared/expand.js +1 -0
- package/dist/es2019/styles/shared/grid.js +7 -0
- package/dist/es2019/styles/shared/headings.js +12 -0
- package/dist/es2019/styles/shared/indentation.js +9 -0
- package/dist/es2019/styles/shared/link.js +3 -0
- package/dist/es2019/styles/shared/lists.js +1 -1
- package/dist/es2019/styles/shared/media-single.js +15 -0
- package/dist/es2019/styles/shared/panel.js +1 -0
- package/dist/es2019/styles/shared/paragraph.js +4 -1
- package/dist/es2019/styles/shared/plugins.js +8 -0
- package/dist/es2019/styles/shared/resizer.js +1 -1
- package/dist/es2019/styles/shared/rule.js +2 -1
- package/dist/es2019/styles/shared/shadow.js +9 -0
- package/dist/es2019/styles/shared/smartCard.js +1 -1
- package/dist/es2019/styles/shared/tableCell.js +1 -0
- package/dist/es2019/styles/shared/task-decision.js +2 -0
- package/dist/es2019/styles/shared/text-color.js +4 -0
- package/dist/es2019/styles/shared/unsupported-content.js +1 -1
- package/dist/es2019/styles/shared/whitespace.js +2 -0
- package/dist/es2019/table/SortingIcon.js +2 -2
- package/dist/es2019/ui/DropList/index.js +5 -1
- package/dist/es2019/ui/Expand/index.js +13 -0
- package/dist/es2019/ui/FloatingToolbar/Button.js +2 -0
- package/dist/es2019/ui/MediaSingle/index.js +3 -1
- package/dist/es2019/ui/MediaSingle/link.js +2 -0
- package/dist/es2019/ui/MediaSingle/styled.js +3 -1
- package/dist/es2019/ui/Messages/index.js +5 -1
- package/dist/es2019/ui/MultiBodiedExtension/index.js +24 -0
- package/dist/es2019/ui/PanelTextInput/index.js +1 -0
- package/dist/es2019/ui/PanelTextInput/styles.js +6 -0
- package/dist/es2019/ui/Popup/index.js +1 -0
- package/dist/es2019/ui/UnsupportedBlock/index.js +2 -0
- package/dist/es2019/ui/UnsupportedInline/index.js +2 -0
- package/dist/es2019/ui/clear-next-sibling-margin-top.js +7 -2
- package/dist/es2019/ui-color/ColorPalette/Color/index.js +10 -3
- package/dist/es2019/ui-color/ColorPalette/Color/styles.js +3 -0
- package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessages.js +1 -1
- package/dist/es2019/ui-color/ColorPalette/index.js +1 -0
- package/dist/es2019/ui-color/ColorPalette/styles.js +1 -0
- package/dist/es2019/ui-menu/ColorPickerButton/index.js +7 -0
- package/dist/es2019/ui-menu/DropdownMenu/index.js +1 -0
- package/dist/esm/analytics/types/element-events.js +1 -0
- package/dist/esm/analytics/types/enums.js +8 -0
- package/dist/esm/collab/index.js +1 -1
- package/dist/esm/element-browser/ViewMore.js +1 -0
- package/dist/esm/element-browser/components/CategoryList.js +2 -0
- package/dist/esm/element-browser/components/ElementList/ElementList.js +19 -1
- package/dist/esm/element-browser/components/ElementSearch.js +56 -42
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +18 -0
- package/dist/esm/extensibility/Extension/Extension/index.js +6 -2
- package/dist/esm/extensibility/Extension/Extension/styles.js +20 -0
- package/dist/esm/extensibility/Extension/InlineExtension/index.js +3 -1
- package/dist/esm/extensibility/Extension/InlineExtension/styles.js +9 -0
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js +9 -1
- package/dist/esm/extensibility/Extension/Lozenge/LozengeComponent.js +20 -15
- package/dist/esm/extensibility/Extension/Lozenge/index.js +1 -0
- package/dist/esm/extensibility/Extension/styles.js +14 -0
- package/dist/esm/extensibility/ExtensionNodeWrapper.js +2 -0
- package/dist/esm/extensibility/MultiBodiedExtension/index.js +20 -4
- package/dist/esm/extensibility/MultiBodiedExtension/styles.js +12 -0
- package/dist/esm/extensions/module-helpers.js +4 -0
- package/dist/esm/keymaps/index.js +1 -0
- package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +2 -0
- package/dist/esm/link/LinkSearch/LinkSearchList.js +2 -0
- package/dist/esm/link/LinkSearch/LinkSearchListItem.js +9 -0
- package/dist/esm/link/LinkSearch/ToolbarComponents.js +8 -0
- package/dist/esm/media-inline/inline-image-wrapper.js +9 -1
- package/dist/esm/media-inline/styles.js +12 -1
- package/dist/esm/media-inline/views/frame.js +7 -4
- package/dist/esm/media-inline/views/icon-wrapper.js +1 -0
- package/dist/esm/media-inline/views/wrapper.js +1 -0
- package/dist/esm/media-single/CommentBadge.js +5 -1
- package/dist/esm/messages/help-dialog.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/rank.js +1 -1
- package/dist/esm/selection/gap-cursor/styles.js +1 -1
- package/dist/esm/styles/shared/annotation.js +6 -0
- package/dist/esm/styles/shared/background-color.js +5 -0
- package/dist/esm/styles/shared/block-marks.js +2 -0
- package/dist/esm/styles/shared/blockquote.js +8 -1
- package/dist/esm/styles/shared/code-block.js +2 -0
- package/dist/esm/styles/shared/code-mark.js +1 -0
- package/dist/esm/styles/shared/column-layout.js +5 -0
- package/dist/esm/styles/shared/date.js +2 -0
- package/dist/esm/styles/shared/embedCard.js +8 -0
- package/dist/esm/styles/shared/expand.js +1 -0
- package/dist/esm/styles/shared/grid.js +7 -0
- package/dist/esm/styles/shared/headings.js +6 -0
- package/dist/esm/styles/shared/indentation.js +9 -0
- package/dist/esm/styles/shared/link.js +3 -0
- package/dist/esm/styles/shared/lists.js +1 -1
- package/dist/esm/styles/shared/media-single.js +7 -0
- package/dist/esm/styles/shared/paragraph.js +4 -1
- package/dist/esm/styles/shared/plugins.js +8 -0
- package/dist/esm/styles/shared/resizer.js +1 -1
- package/dist/esm/styles/shared/rule.js +2 -1
- package/dist/esm/styles/shared/shadow.js +3 -0
- package/dist/esm/styles/shared/smartCard.js +1 -1
- package/dist/esm/styles/shared/tableCell.js +1 -0
- package/dist/esm/styles/shared/task-decision.js +2 -0
- package/dist/esm/styles/shared/text-color.js +4 -0
- package/dist/esm/styles/shared/unsupported-content.js +1 -1
- package/dist/esm/styles/shared/whitespace.js +2 -0
- package/dist/esm/table/SortingIcon.js +2 -2
- package/dist/esm/ui/DropList/index.js +5 -1
- package/dist/esm/ui/Expand/index.js +13 -0
- package/dist/esm/ui/FloatingToolbar/Button.js +2 -0
- package/dist/esm/ui/MediaSingle/index.js +3 -1
- package/dist/esm/ui/MediaSingle/link.js +2 -0
- package/dist/esm/ui/MediaSingle/styled.js +6 -3
- package/dist/esm/ui/Messages/index.js +12 -7
- package/dist/esm/ui/MultiBodiedExtension/index.js +24 -0
- package/dist/esm/ui/PanelTextInput/index.js +1 -0
- package/dist/esm/ui/PanelTextInput/styles.js +6 -0
- package/dist/esm/ui/Popup/index.js +1 -0
- package/dist/esm/ui/UnsupportedBlock/index.js +2 -0
- package/dist/esm/ui/UnsupportedInline/index.js +2 -0
- package/dist/esm/ui/clear-next-sibling-margin-top.js +6 -2
- package/dist/esm/ui-color/ColorPalette/Color/index.js +10 -3
- package/dist/esm/ui-color/ColorPalette/Color/styles.js +3 -0
- package/dist/esm/ui-color/ColorPalette/Palettes/paletteMessages.js +1 -1
- package/dist/esm/ui-color/ColorPalette/index.js +1 -0
- package/dist/esm/ui-color/ColorPalette/styles.js +1 -0
- package/dist/esm/ui-menu/ColorPickerButton/index.js +7 -0
- package/dist/esm/ui-menu/DropdownMenu/index.js +1 -0
- package/dist/types/analytics/types/element-events.d.ts +10 -0
- package/dist/types/analytics/types/enums.d.ts +9 -1
- package/dist/types/analytics/types/events.d.ts +2 -1
- package/dist/types/analytics/types/highlight-events.d.ts +4 -2
- package/dist/types/analytics/types/index.d.ts +1 -0
- package/dist/types/extensions/types/extension-manifest-toolbar-item.d.ts +17 -2
- package/dist/types/keymaps/index.d.ts +1 -0
- package/dist/types/messages/help-dialog.d.ts +5 -0
- package/dist/types/ui/FloatingToolbar/Button.d.ts +2 -1
- package/dist/types/ui-color/ColorPalette/Color/index.d.ts +2 -8
- package/dist/types-ts4.5/analytics/types/element-events.d.ts +10 -0
- package/dist/types-ts4.5/analytics/types/enums.d.ts +9 -1
- package/dist/types-ts4.5/analytics/types/events.d.ts +2 -1
- package/dist/types-ts4.5/analytics/types/highlight-events.d.ts +4 -2
- package/dist/types-ts4.5/analytics/types/index.d.ts +1 -0
- package/dist/types-ts4.5/extensions/types/extension-manifest-toolbar-item.d.ts +17 -2
- package/dist/types-ts4.5/keymaps/index.d.ts +1 -0
- package/dist/types-ts4.5/messages/help-dialog.d.ts +5 -0
- package/dist/types-ts4.5/ui/FloatingToolbar/Button.d.ts +2 -1
- package/dist/types-ts4.5/ui-color/ColorPalette/Color/index.d.ts +2 -8
- package/package.json +1 -1
|
@@ -25,16 +25,20 @@ import EmptyState from './EmptyState';
|
|
|
25
25
|
import { getColumnCount, getScrollbarWidth } from './utils';
|
|
26
26
|
export const ICON_HEIGHT = 40;
|
|
27
27
|
export const ICON_WIDTH = 40;
|
|
28
|
+
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
28
30
|
export const itemIcon = css({
|
|
29
31
|
width: `${ICON_WIDTH}px`,
|
|
30
32
|
height: `${ICON_HEIGHT}px`,
|
|
31
33
|
overflow: 'hidden',
|
|
32
34
|
border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
33
36
|
borderRadius: `${borderRadius()}px`,
|
|
34
37
|
boxSizing: 'border-box',
|
|
35
38
|
display: 'flex',
|
|
36
39
|
justifyContent: 'center',
|
|
37
40
|
alignItems: 'center',
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
38
42
|
div: {
|
|
39
43
|
width: `${ICON_WIDTH}px`,
|
|
40
44
|
height: `${ICON_HEIGHT}px`
|
|
@@ -164,8 +168,11 @@ function ElementList({
|
|
|
164
168
|
columnIndex: columnIndex,
|
|
165
169
|
parent: parent
|
|
166
170
|
}, jsx("div", {
|
|
171
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
167
172
|
style: style,
|
|
168
|
-
key: key
|
|
173
|
+
key: key
|
|
174
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
|
|
175
|
+
,
|
|
169
176
|
className: "element-item-wrapper",
|
|
170
177
|
css: elementItemWrapper,
|
|
171
178
|
onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? e => {
|
|
@@ -366,21 +373,28 @@ const elementItemsWrapper = css({
|
|
|
366
373
|
justifyContent: 'flex-start',
|
|
367
374
|
overflow: 'hidden',
|
|
368
375
|
padding: "var(--ds-space-025, 2px)",
|
|
376
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
369
377
|
'.ReactVirtualized__Collection, .ReactVirtualized__Grid': {
|
|
378
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
370
379
|
borderRadius: '3px',
|
|
371
380
|
outline: 'none',
|
|
372
381
|
'&:focus': {
|
|
382
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
373
383
|
boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
|
|
374
384
|
}
|
|
375
385
|
},
|
|
386
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
376
387
|
'.ReactVirtualized__Collection__innerScrollContainer, .ReactVirtualized__Grid__innerScrollContainer': {
|
|
388
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
377
389
|
"div[class='element-item-wrapper']:last-child": {
|
|
378
390
|
paddingBottom: "var(--ds-space-050, 4px)"
|
|
379
391
|
}
|
|
380
392
|
}
|
|
381
393
|
});
|
|
382
394
|
const elementItemWrapper = css({
|
|
395
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
383
396
|
div: {
|
|
397
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
384
398
|
button: {
|
|
385
399
|
minHeight: '75px',
|
|
386
400
|
alignItems: 'flex-start',
|
|
@@ -407,8 +421,11 @@ const multilineStyle = css({
|
|
|
407
421
|
WebkitLineClamp: 2,
|
|
408
422
|
WebkitBoxOrient: 'vertical'
|
|
409
423
|
});
|
|
424
|
+
|
|
425
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
410
426
|
const itemDescription = css(multilineStyle, {
|
|
411
427
|
overflow: 'hidden',
|
|
428
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
412
429
|
fontSize: relativeFontSizeToBase16(11.67),
|
|
413
430
|
color: `var(--ds-text-subtle, ${N200})`,
|
|
414
431
|
marginTop: "var(--ds-space-025, 2px)"
|
|
@@ -433,6 +450,7 @@ const itemAfter = css({
|
|
|
433
450
|
marginBottom: "var(--ds-space-negative-025, -2px)"
|
|
434
451
|
});
|
|
435
452
|
const itemIconStyle = css({
|
|
453
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
436
454
|
img: {
|
|
437
455
|
height: '40px',
|
|
438
456
|
width: '40px',
|
|
@@ -74,67 +74,79 @@ function ElementSearch({
|
|
|
74
74
|
const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
|
|
75
75
|
const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
|
|
76
76
|
const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
|
|
77
|
-
return
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
77
|
+
return (
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
79
|
+
jsx("div", {
|
|
80
|
+
css: [wrapper, mode === Modes.inline && wrapperInline]
|
|
81
|
+
}, jsx(Textfield, {
|
|
82
|
+
ref: ref,
|
|
83
|
+
onChange: onChange,
|
|
84
|
+
onClick: onClick,
|
|
85
|
+
onFocus: onFocus,
|
|
86
|
+
onKeyDown: onKeyDown,
|
|
87
|
+
onBlur: onBlur,
|
|
88
|
+
elemBeforeInput: jsx("div", {
|
|
89
|
+
css: elementBeforeInput,
|
|
90
|
+
"data-testid": "element_search__element_before_input",
|
|
91
|
+
"aria-hidden": "true"
|
|
92
|
+
}, jsx(SearchIcon, {
|
|
93
|
+
size: "medium",
|
|
94
|
+
label: "Advanced search",
|
|
95
|
+
primaryColor: "inherit"
|
|
96
|
+
})),
|
|
97
|
+
elemAfterInput: jsx("div", {
|
|
98
|
+
css: elementAfterInput,
|
|
99
|
+
"data-testid": "element_search__element_after_input"
|
|
100
|
+
}, jsx("div", {
|
|
101
|
+
css: styledShortcut
|
|
102
|
+
}, "\u23CE ", formatMessage(commonMessages.elementAfterInputMessage))),
|
|
103
|
+
placeholder: formatMessage(commonMessages.placeHolderMessage),
|
|
104
|
+
"aria-label": "search",
|
|
105
|
+
"aria-labelledby": "search-assistive"
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
107
|
+
,
|
|
108
|
+
className: "js-search-input",
|
|
109
|
+
role: "combobox",
|
|
110
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
111
|
+
value: searchTerm
|
|
112
|
+
}), jsx("span", {
|
|
113
|
+
id: "search-assistive",
|
|
114
|
+
ref: assistiveTextRef,
|
|
115
|
+
"aria-live": "polite",
|
|
116
|
+
"aria-atomic": "true"
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
118
|
+
,
|
|
119
|
+
className: "assistive"
|
|
120
|
+
}, assistiveMessage))
|
|
121
|
+
);
|
|
119
122
|
}
|
|
123
|
+
|
|
124
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
120
125
|
const styledShortcut = css(shortcutStyle, {
|
|
121
126
|
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
|
|
122
127
|
width: "var(--ds-space-600, 48px)"
|
|
123
128
|
});
|
|
124
129
|
const wrapper = css({
|
|
130
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
125
131
|
'& > [data-ds--text-field--container]': {
|
|
132
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
126
133
|
height: `${GRID_SIZE * 6}px`,
|
|
134
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
127
135
|
borderRadius: `${GRID_SIZE}px`,
|
|
128
136
|
flex: '1 1 100%',
|
|
129
137
|
overflow: 'visible',
|
|
138
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
130
139
|
'& > [data-ds--text-field--input]': {
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
131
141
|
fontSize: relativeFontSizeToBase16(14),
|
|
132
142
|
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
|
|
133
143
|
}
|
|
134
144
|
}
|
|
135
145
|
});
|
|
136
146
|
const wrapperInline = css({
|
|
147
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
137
148
|
'& > [data-ds--text-field--container]': {
|
|
149
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
138
150
|
height: `${GRID_SIZE * 5}px`,
|
|
139
151
|
flex: 'none',
|
|
140
152
|
overflow: 'revert'
|
|
@@ -143,6 +155,7 @@ const wrapperInline = css({
|
|
|
143
155
|
const elementBeforeInput = css({
|
|
144
156
|
margin: `1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
|
|
145
157
|
color: `var(--ds-icon, ${N200})`,
|
|
158
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
146
159
|
'span, svg': {
|
|
147
160
|
height: '20px',
|
|
148
161
|
width: '20px'
|
|
@@ -150,6 +163,7 @@ const elementBeforeInput = css({
|
|
|
150
163
|
});
|
|
151
164
|
const elementAfterInput = css({
|
|
152
165
|
margin: `0 ${"var(--ds-space-100, 8px)"}`,
|
|
166
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
153
167
|
height: SEARCH_ITEM_HEIGHT_WIDTH,
|
|
154
168
|
textAlign: 'center'
|
|
155
169
|
});
|
|
@@ -23,9 +23,13 @@ const baseBrowserContainerStyles = css({
|
|
|
23
23
|
height: '100%',
|
|
24
24
|
minHeight: '-webkit-fill-available'
|
|
25
25
|
});
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
26
28
|
const mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
27
29
|
flexDirection: 'column'
|
|
28
30
|
});
|
|
31
|
+
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
29
33
|
const elementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
30
34
|
flexDirection: 'row'
|
|
31
35
|
});
|
|
@@ -35,20 +39,28 @@ const baseSidebarStyles = css({
|
|
|
35
39
|
overflowX: 'auto',
|
|
36
40
|
overflowY: 'hidden'
|
|
37
41
|
});
|
|
42
|
+
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
38
44
|
const mobileSideBar = css(baseSidebarStyles, {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
39
46
|
flex: `0 0 ${INLINE_SIDEBAR_HEIGHT}`,
|
|
40
47
|
padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-150, 12px)"}`
|
|
41
48
|
});
|
|
42
49
|
const mobileSideBarShowCategories = css({
|
|
43
50
|
flex: '0 0 auto'
|
|
44
51
|
});
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
45
53
|
const sideBar = css(baseSidebarStyles, {
|
|
46
54
|
flex: "0 0 'auto'"
|
|
47
55
|
});
|
|
56
|
+
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
48
58
|
const sideBarShowCategories = css(baseSidebarStyles, {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
49
60
|
flex: `0 0 ${SIDEBAR_WIDTH}`
|
|
50
61
|
});
|
|
51
62
|
const sidebarHeading = css({
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
52
64
|
flex: `0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT}`,
|
|
53
65
|
display: 'inline-flex',
|
|
54
66
|
alignItems: 'center',
|
|
@@ -62,6 +74,8 @@ const mobileMainContent = css({
|
|
|
62
74
|
overflowY: 'auto',
|
|
63
75
|
height: '100%'
|
|
64
76
|
});
|
|
77
|
+
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
65
79
|
const mainContent = css(mobileMainContent, {
|
|
66
80
|
marginLeft: "var(--ds-space-200, 16px)",
|
|
67
81
|
height: 'auto'
|
|
@@ -73,14 +87,18 @@ const mobileCategoryListWrapper = css({
|
|
|
73
87
|
display: 'flex',
|
|
74
88
|
overflowX: 'auto',
|
|
75
89
|
padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
|
|
90
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
76
91
|
minHeight: `${GRID_SIZE * 4}px`,
|
|
77
92
|
overflow: '-moz-scrollbars-none',
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
78
94
|
'&::-webkit-scrollbar': {
|
|
79
95
|
display: 'none'
|
|
80
96
|
},
|
|
81
97
|
scrollbarWidth: 'none',
|
|
82
98
|
MsOverflowStyle: 'none'
|
|
83
99
|
});
|
|
100
|
+
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
84
102
|
const categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
85
103
|
padding: 0,
|
|
86
104
|
marginTop: "var(--ds-space-200, 24px)",
|
|
@@ -113,7 +113,9 @@ function ExtensionWithPluginState(props) {
|
|
|
113
113
|
"data-layout": node.attrs.layout
|
|
114
114
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
115
115
|
,
|
|
116
|
-
className: classNames
|
|
116
|
+
className: classNames
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
118
|
+
,
|
|
117
119
|
css: wrapperStyle
|
|
118
120
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
119
121
|
,
|
|
@@ -127,6 +129,7 @@ function ExtensionWithPluginState(props) {
|
|
|
127
129
|
className: 'extension-overlay',
|
|
128
130
|
css: overlay
|
|
129
131
|
}), jsx("div", {
|
|
132
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
130
133
|
css: header,
|
|
131
134
|
contentEditable: false
|
|
132
135
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -137,11 +140,12 @@ function ExtensionWithPluginState(props) {
|
|
|
137
140
|
node: node,
|
|
138
141
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
|
|
139
142
|
}), children), hasBody &&
|
|
140
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
141
144
|
jsx("div", {
|
|
142
145
|
css: newContentStyles,
|
|
143
146
|
className: newContentClassNames
|
|
144
147
|
}, jsx("div", {
|
|
148
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
145
149
|
css: content,
|
|
146
150
|
ref: handleContentDOMRef
|
|
147
151
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -2,36 +2,49 @@ import { css } from '@emotion/react';
|
|
|
2
2
|
import { N30, N500 } from '@atlaskit/theme/colors';
|
|
3
3
|
import { wrapperDefault } from '../styles';
|
|
4
4
|
export const widerLayoutClassName = 'wider-layout';
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
5
7
|
export const wrapperStyle = css(wrapperDefault, {
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
6
9
|
'&.without-frame': {
|
|
7
10
|
background: 'transparent'
|
|
8
11
|
},
|
|
9
12
|
cursor: 'pointer',
|
|
10
13
|
width: '100%',
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
11
15
|
'.extension-overflow-wrapper:not(.with-body)': {
|
|
12
16
|
overflowX: 'auto'
|
|
13
17
|
},
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
14
19
|
'&.with-bodied-border': {
|
|
15
20
|
boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
|
|
16
21
|
},
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
23
|
'&.with-hover-border': {
|
|
18
24
|
boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
|
|
19
25
|
},
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
27
|
'&.with-margin-styles': {
|
|
21
28
|
margin: `0 ${"var(--ds-space-negative-150, -12px)"}`,
|
|
22
29
|
padding: `0 ${"var(--ds-space-150, 12px)"}`
|
|
23
30
|
}
|
|
24
31
|
});
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
25
34
|
export const header = css({
|
|
26
35
|
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
|
|
27
36
|
verticalAlign: 'middle',
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
28
38
|
'&.with-children:not(.without-frame)': {
|
|
29
39
|
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
|
|
30
40
|
},
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
31
42
|
'&.without-frame': {
|
|
32
43
|
padding: 0
|
|
33
44
|
}
|
|
34
45
|
});
|
|
46
|
+
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
35
48
|
export const content = css({
|
|
36
49
|
padding: "var(--ds-space-100, 8px)",
|
|
37
50
|
background: "var(--ds-surface, white)",
|
|
@@ -39,19 +52,26 @@ export const content = css({
|
|
|
39
52
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
40
53
|
cursor: 'initial',
|
|
41
54
|
width: '100%',
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
42
56
|
'&.remove-border': {
|
|
43
57
|
border: 'none'
|
|
44
58
|
}
|
|
45
59
|
});
|
|
60
|
+
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
46
62
|
export const contentWrapper = css({
|
|
47
63
|
padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
|
|
48
64
|
display: 'flex',
|
|
49
65
|
justifyContent: 'center',
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
50
67
|
'&.with-padding-styles': {
|
|
51
68
|
padding: "var(--ds-space-100, 8px)"
|
|
52
69
|
}
|
|
53
70
|
});
|
|
71
|
+
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
54
73
|
export const overflowWrapperStyles = css({
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
55
75
|
'&.with-margin-styles': {
|
|
56
76
|
margin: `0 ${"var(--ds-space-negative-150, -12px)"}`
|
|
57
77
|
}
|
|
@@ -43,7 +43,9 @@ const InlineExtension = props => {
|
|
|
43
43
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
44
44
|
setIsNodeHovered: setIsNodeHovered
|
|
45
45
|
}), jsx("div", {
|
|
46
|
-
"data-testid": "inline-extension-wrapper"
|
|
46
|
+
"data-testid": "inline-extension-wrapper"
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
48
|
+
,
|
|
47
49
|
css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyles]
|
|
48
50
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
49
51
|
,
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { N500 } from '@atlaskit/theme/colors';
|
|
3
3
|
import { wrapperDefault } from '../styles';
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
4
6
|
export const wrapperStyle = css(wrapperDefault, {
|
|
5
7
|
cursor: 'pointer',
|
|
6
8
|
display: 'inline-flex',
|
|
7
9
|
margin: `1px 1px ${"var(--ds-space-050, 4px)"}`,
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
8
11
|
'> img': {
|
|
9
12
|
borderRadius: "var(--ds-border-radius, 3px)"
|
|
10
13
|
},
|
|
@@ -14,19 +17,25 @@ export const wrapperStyle = css(wrapperDefault, {
|
|
|
14
17
|
width: '1px',
|
|
15
18
|
content: "''"
|
|
16
19
|
},
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
21
|
'&.with-children': {
|
|
18
22
|
padding: 0,
|
|
19
23
|
background: "var(--ds-background-neutral-subtle, white)"
|
|
20
24
|
},
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
21
26
|
'&.with-hover-border': {
|
|
22
27
|
boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
|
|
23
28
|
}
|
|
24
29
|
});
|
|
30
|
+
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
25
32
|
export const inlineWrapperStyles = css({
|
|
26
33
|
maxWidth: '100%',
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
27
35
|
'tr &': {
|
|
28
36
|
maxWidth: 'inherit'
|
|
29
37
|
},
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
30
39
|
'.rich-media-item': {
|
|
31
40
|
maxWidth: '100%'
|
|
32
41
|
}
|
|
@@ -12,11 +12,13 @@ const labelStyles = css({
|
|
|
12
12
|
// Unfortunately, these need to be these exact numbers - otherwise there will be a noticeable gap/overlap
|
|
13
13
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
14
14
|
top: '-19px',
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
15
16
|
'&.inline': {
|
|
16
17
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
17
18
|
top: '-18px',
|
|
18
19
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
19
20
|
},
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
22
|
'&.show-label': {
|
|
21
23
|
cursor: 'pointer',
|
|
22
24
|
background: `var(--ds-background-accent-gray-subtle-pressed, ${N40})`,
|
|
@@ -25,14 +27,17 @@ const labelStyles = css({
|
|
|
25
27
|
},
|
|
26
28
|
borderRadius: `${"var(--ds-border-radius, 3px)"} ${"var(--ds-border-radius, 3px)"} 0 0`,
|
|
27
29
|
lineHeight: 1,
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
28
31
|
'&.nested': {
|
|
29
32
|
// Need to add indent if the node is nested since we removed previous indentation styles to make it fit properly
|
|
30
33
|
// in the nested component
|
|
31
34
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
32
35
|
},
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
33
37
|
'&.bodied-background': {
|
|
34
38
|
background: `var(--ds-surface, ${N0})`
|
|
35
39
|
},
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
36
41
|
'&.bodied-border': {
|
|
37
42
|
boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
|
|
38
43
|
}
|
|
@@ -46,6 +51,7 @@ const containerStyles = css({
|
|
|
46
51
|
textAlign: 'left',
|
|
47
52
|
zIndex: 1,
|
|
48
53
|
position: 'relative',
|
|
54
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
49
55
|
'&.bodied': {
|
|
50
56
|
marginTop: "var(--ds-space-300, 24px)"
|
|
51
57
|
}
|
|
@@ -82,7 +88,9 @@ export const ExtensionLabel = ({
|
|
|
82
88
|
}, [setIsNodeHovered]);
|
|
83
89
|
return jsx("div", {
|
|
84
90
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
85
|
-
css: containerStyles
|
|
91
|
+
css: containerStyles
|
|
92
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
93
|
+
,
|
|
86
94
|
className: containerClassNames
|
|
87
95
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
88
96
|
,
|
|
@@ -34,18 +34,23 @@ export const LozengeComponent = ({
|
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
const isBlockExtension = extensionName === 'extension';
|
|
37
|
-
return
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
return (
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
39
|
+
jsx("div", {
|
|
40
|
+
"data-testid": "lozenge-fallback",
|
|
41
|
+
css: placeholderFallback
|
|
42
|
+
}, lozengeData && !isBlockExtension ? renderImage({
|
|
43
|
+
height: ICON_SIZE,
|
|
44
|
+
width: ICON_SIZE,
|
|
45
|
+
...lozengeData
|
|
46
|
+
}) : jsx(EditorFileIcon, {
|
|
47
|
+
label: title
|
|
48
|
+
}), jsx("span", {
|
|
49
|
+
className: "extension-title"
|
|
50
|
+
}, capitalizedTitle), params && !isBlockExtension &&
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
52
|
+
jsx("span", {
|
|
53
|
+
css: placeholderFallbackParams
|
|
54
|
+
}, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)))
|
|
55
|
+
);
|
|
51
56
|
};
|
|
@@ -17,6 +17,7 @@ export default class ExtensionLozenge extends Component {
|
|
|
17
17
|
url,
|
|
18
18
|
...rest
|
|
19
19
|
} = lozengeData;
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
20
21
|
return jsx("img", _extends({
|
|
21
22
|
css: styledImage,
|
|
22
23
|
src: url
|
|
@@ -3,21 +3,28 @@ import { css } from '@emotion/react';
|
|
|
3
3
|
import { N20, N20A, N70 } from '@atlaskit/theme/colors';
|
|
4
4
|
import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
|
|
5
5
|
export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
6
8
|
export const wrapperDefault = css({
|
|
7
9
|
background: `var(--ds-background-neutral, ${N20})`,
|
|
8
10
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
9
11
|
position: 'relative',
|
|
10
12
|
verticalAlign: 'middle',
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
11
14
|
'&.with-overlay': {
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
12
16
|
'.extension-overlay': {
|
|
13
17
|
background: `var(--ds-background-neutral-hovered, ${N20A})`,
|
|
14
18
|
color: 'transparent'
|
|
15
19
|
},
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
16
21
|
'&:hover .extension-overlay': {
|
|
17
22
|
opacity: 1
|
|
18
23
|
}
|
|
19
24
|
}
|
|
20
25
|
});
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
21
28
|
export const overlay = css({
|
|
22
29
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
23
30
|
position: 'absolute',
|
|
@@ -27,9 +34,12 @@ export const overlay = css({
|
|
|
27
34
|
pointerEvents: 'none',
|
|
28
35
|
transition: 'opacity 0.3s'
|
|
29
36
|
});
|
|
37
|
+
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
30
39
|
export const placeholderFallback = css({
|
|
31
40
|
display: 'inline-flex',
|
|
32
41
|
alignItems: 'center',
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
33
43
|
'& > img': {
|
|
34
44
|
margin: `0 ${"var(--ds-space-050, 4px)"}`
|
|
35
45
|
},
|
|
@@ -37,6 +47,8 @@ export const placeholderFallback = css({
|
|
|
37
47
|
/* stylelint-disable-next-line */
|
|
38
48
|
label: 'placeholder-fallback'
|
|
39
49
|
});
|
|
50
|
+
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
40
52
|
export const placeholderFallbackParams = css({
|
|
41
53
|
display: 'inline-block',
|
|
42
54
|
maxWidth: '200px',
|
|
@@ -46,6 +58,8 @@ export const placeholderFallbackParams = css({
|
|
|
46
58
|
whiteSpace: 'nowrap',
|
|
47
59
|
overflow: 'hidden'
|
|
48
60
|
});
|
|
61
|
+
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
49
63
|
export const styledImage = css({
|
|
50
64
|
maxHeight: '16px',
|
|
51
65
|
maxWidth: '16px',
|
|
@@ -4,9 +4,11 @@ import { css, jsx } from '@emotion/react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { ZERO_WIDTH_SPACE } from '../utils';
|
|
6
6
|
const styles = css({
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
7
8
|
'&.inline-extension': {
|
|
8
9
|
display: 'inline-block'
|
|
9
10
|
},
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
10
12
|
'&.relative': {
|
|
11
13
|
position: 'relative'
|
|
12
14
|
}
|