@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.2

package/components/CodeEditor/code-editor.css

@@ -51,9 +51,22 @@
   --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
+.pf-v6-c-code-editor {
+  display: flex;
+  flex-direction: column;
+}
 .pf-v6-c-code-editor.pf-m-read-only {
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
+.pf-v6-c-code-editor.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
 .pf-v6-c-code-editor__header {
   position: relative;
@@ -120,6 +133,7 @@
 
 .pf-v6-c-code-editor__main {
   position: relative;
+  flex-grow: 1;
   color: var(--pf-v6-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
   border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
@@ -141,6 +155,7 @@
 
 .pf-v6-c-code-editor__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);

package/components/CodeEditor/code-editor.scss

@@ -71,9 +71,22 @@
 }
 
 .#{$code-editor} {
+  display: flex;
+  flex-direction: column;
+
   &.pf-m-read-only {
     --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
   }
+
+  &.pf-m-full-height {
+    height: 100%;
+  }
+}
+
+.#{$code-editor}__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .#{$code-editor}__header {
@@ -144,7 +157,8 @@
 }
 
 .#{$code-editor}__main {
-  position: relative;
+  position: relative; 
+  flex-grow: 1;
   color: var(--#{$code-editor}__main--Color, inherit);
   background-color: var(--#{$code-editor}__main--BackgroundColor);
   border: var(--#{$code-editor}__main--BorderWidth) solid;
@@ -170,6 +184,7 @@
 
 .#{$code-editor}__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--#{$code-editor}__code--PaddingBlockStart);
   padding-block-end: var(--#{$code-editor}__code--PaddingBlockEnd);
   padding-inline-start: var(--#{$code-editor}__code--PaddingInlineStart);

package/components/Table/table-grid.css

@@ -355,7 +355,7 @@
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -625,14 +625,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 48rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -658,7 +658,7 @@
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -928,14 +928,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 62rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -961,7 +961,7 @@
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1231,14 +1231,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 75rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -1264,7 +1264,7 @@
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1534,14 +1534,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 90.625rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;

package/components/Table/table-grid.scss

@@ -7,25 +7,25 @@
   }
 
   .pf-m-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
       @content;
     }
   }
 
   .pf-m-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)) {
       @content;
     }
   }
 
   .pf-m-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)) {
       @content;
     }
   }
 
   .pf-m-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)) {
       @content;
     }
   }

package/components/Table/table-tree-view.css

@@ -246,7 +246,7 @@
   --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-tree-view-grid-md.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -389,7 +389,7 @@
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-tree-view-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -532,7 +532,7 @@
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-tree-view-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -675,7 +675,7 @@
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-tree-view-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/components/Table/table-tree-view.scss

@@ -126,25 +126,25 @@ $pf-v6-c-tree-view--MaxDepth: 10;
   }
 
   .pf-m-tree-view-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)) {
       @content;
     }
   }

package/components/_index.css

@@ -2805,9 +2805,22 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
+.pf-v6-c-code-editor {
+  display: flex;
+  flex-direction: column;
+}
 .pf-v6-c-code-editor.pf-m-read-only {
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
+.pf-v6-c-code-editor.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
 .pf-v6-c-code-editor__header {
   position: relative;
@@ -2874,6 +2887,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 .pf-v6-c-code-editor__main {
   position: relative;
+  flex-grow: 1;
   color: var(--pf-v6-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
   border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
@@ -2895,6 +2909,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 .pf-v6-c-code-editor__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);
@@ -14927,7 +14942,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15197,14 +15212,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 48rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15230,7 +15245,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15500,14 +15515,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 62rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15533,7 +15548,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15803,14 +15818,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 75rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15836,7 +15851,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16106,14 +16121,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 90.625rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -17315,7 +17330,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-tree-view-grid-md.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17458,7 +17473,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-tree-view-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17601,7 +17616,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-tree-view-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17744,7 +17759,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-tree-view-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/docs/components/CodeEditor/examples/CodeEditor.css

@@ -0,0 +1,3 @@
+#ws-core-c-code-editor-with-full-height-modifier .ws-preview-html {
+  height: 400px;
+}

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -2,7 +2,9 @@
 id: Code editor
 section: components
 cssPrefix: pf-v6-c-code-editor
----## Examples
+---import './CodeEditor.css';
+
+## Examples
 
 ### Default
 
@@ -49,11 +51,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -104,11 +106,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -267,11 +269,158 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
+  </div>
+</div>
+
+```
+
+### With optional code editor container
+
+This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
+
+```html
+<div class="pf-v6-c-code-editor">
+  <div role="presentation" tabindex="0" class="pf-v6-c-code-editor__container">
+    <div class="pf-v6-c-code-editor__header">
+      <div class="pf-v6-c-code-editor__header-content">
+        <div class="pf-v6-c-code-editor__controls">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Copy to clipboard"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-copy" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Download code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-download" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Upload code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-upload" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="pf-v6-c-code-editor__tab">
+        <span class="pf-v6-c-code-editor__tab-icon">
+          <i class="fas fa-code"></i>
+        </span>
+        <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__main">
+      <div class="pf-v6-c-code-editor__upload">
+        <div class="pf-v6-c-empty-state">
+          <div class="pf-v6-c-empty-state__content">
+            <div class="pf-v6-c-empty-state__header">
+              <div class="pf-v6-c-empty-state__icon">
+                <i class="fas fa- fa-code" aria-hidden="true"></i>
+              </div>
+              <div class="pf-v6-c-empty-state__title">
+                <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+              </div>
+            </div>
+
+            <div
+              class="pf-v6-c-empty-state__body"
+            >Drag a file here or browse to upload.</div>
+
+            <div class="pf-v6-c-empty-state__footer">
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-primary" type="button">
+                  <span class="pf-v6-c-button__text">Browse</span>
+                </button>
+              </div>
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-link" type="button">
+                  <span class="pf-v6-c-button__text">Start from scratch</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+### With full height modifier
+
+```html
+<div class="pf-v6-c-code-editor pf-m-full-height">
+  <div class="pf-v6-c-code-editor__header">
+    <div class="pf-v6-c-code-editor__header-content">
+      <div class="pf-v6-c-code-editor__controls">
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Copy to clipboard"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-copy" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Download code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-download" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Upload code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-upload" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+      <div class="pf-v6-c-code-editor__header-main">Header main content</div>
+      <div class="pf-v6-c-code-editor__keyboard-shortcuts">
+        <button class="pf-v6-c-button pf-m-link" type="button">
+          <span class="pf-v6-c-button__icon pf-m-start">
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
+          </span>
+          <span class="pf-v6-c-button__text">View shortcuts</span>
+        </button>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__tab">
+      <span class="pf-v6-c-code-editor__tab-icon">
+        <i class="fas fa-code"></i>
+      </span>
+      <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+    </div>
+  </div>
+  <div class="pf-v6-c-code-editor__main">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
+      <pre class="pf-v6-c-code-editor__code-pre">
+                code goes here
+      </pre>
+    </div>
   </div>
 </div>
 
@@ -295,3 +444,5 @@ cssPrefix: pf-v6-c-code-editor
 | `.pf-v6-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                           |
 | `.pf-v6-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                           |
 | `.pf-v6-c-code-editor__upload`             | `<div>`    | Initiates the code editor upload border.                                                      |
+| `.pf-v6-c-code-editor__container`             | `<div>`    | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state.                                                      |
+| `.pf-m-full-height`             | `.pf-v6-c-code-editor`    | Modifies for full-height style.                                                   |