@atlaskit/renderer 136.2.3 → 136.2.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 136.2.4
+
+### Patch Changes
+
+- [`b6733d7c1b79e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b6733d7c1b79e) -
+  [ux] Updated styles for collapsible headings to ensure any element with height set via inline
+  style is not taking space when heading is collapsed.
+- Updated dependencies
+
 ## 136.2.3
 
 ### Patch Changes

package/dist/cjs/ui/Renderer/RendererStyleContainer.js

@@ -99,10 +99,17 @@ var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProper
   clear: 'both'
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> [".concat(_collapsibleHeadingsDom.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
   display: 'block',
-  minBlockSize: 0,
-  marginBlock: 0,
-  paddingBlock: 0,
-  borderBlockWidth: 0
+  // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+  // contents but keeps its own box, sized by its own specified sizes. Everything below
+  // needs `!important` because extension nodes are sized and spaced by declarations that
+  // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+  // `react/nodes/extension.tsx`), and `!important` alignment margins from
+  // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+  blockSize: '0 !important',
+  minBlockSize: '0 !important',
+  marginBlock: '0 !important',
+  paddingBlock: '0 !important',
+  borderBlockWidth: '0 !important'
 }), ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"

package/dist/cjs/ui/Renderer/index.js

@@ -74,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.2";
+var packageVersion = "136.2.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -90,10 +90,17 @@ const baseStyles = css({
   [`.${RendererCssClassName.DOCUMENT}`]: {
     [`> [${COLLAPSED_CONTENT_OWNERS_ATTRIBUTE}][hidden='until-found']`]: {
       display: 'block',
-      minBlockSize: 0,
-      marginBlock: 0,
-      paddingBlock: 0,
-      borderBlockWidth: 0
+      // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+      // contents but keeps its own box, sized by its own specified sizes. Everything below
+      // needs `!important` because extension nodes are sized and spaced by declarations that
+      // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+      // `react/nodes/extension.tsx`), and `!important` alignment margins from
+      // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+      blockSize: '0 !important',
+      minBlockSize: '0 !important',
+      marginBlock: '0 !important',
+      paddingBlock: '0 !important',
+      borderBlockWidth: '0 !important'
     },
     // p, h3, and action items
     [`.${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {

package/dist/es2019/ui/Renderer/index.js

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "136.2.2";
+const packageVersion = "136.2.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -92,10 +92,17 @@ var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProp
   clear: 'both'
 }), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "> [".concat(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
   display: 'block',
-  minBlockSize: 0,
-  marginBlock: 0,
-  paddingBlock: 0,
-  borderBlockWidth: 0
+  // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+  // contents but keeps its own box, sized by its own specified sizes. Everything below
+  // needs `!important` because extension nodes are sized and spaced by declarations that
+  // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+  // `react/nodes/extension.tsx`), and `!important` alignment margins from
+  // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+  blockSize: '0 !important',
+  minBlockSize: '0 !important',
+  marginBlock: '0 !important',
+  paddingBlock: '0 !important',
+  borderBlockWidth: '0 !important'
 }), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"

package/dist/esm/ui/Renderer/index.js

@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.2";
+var packageVersion = "136.2.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "136.2.3",
+	"version": "136.2.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"