From 0c3066dacb6bc7b6c74fc7cbdb21cfc7621b6d5f Mon Sep 17 00:00:00 2001
From: Francois Eoche <francois.eoche@ovhcloud.com>
Date: Tue, 8 Aug 2023 18:35:45 +0200
Subject: [PATCH 1/3] fix(code): display error when inserting long code inputs

Signed-off-by: Francois Eoche <francois.eoche@ovhcloud.com>
---
 .../src/components/osds-code/osds-code.scss   | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/stencil/components/code/src/components/osds-code/osds-code.scss b/packages/stencil/components/code/src/components/osds-code/osds-code.scss
index 57c6f436ae..8cb34a7b0d 100644
--- a/packages/stencil/components/code/src/components/osds-code/osds-code.scss
+++ b/packages/stencil/components/code/src/components/osds-code/osds-code.scss
@@ -9,24 +9,34 @@
 // CSS for the component but not for theming
 :host {
   @include osds-code-on-main-element() {
-    position: relative;
-    margin: 0;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr;
+    gap: 0;
+    grid-template-areas:
+    ". .";
+    justify-content: start;
+    align-content: start;
+    grid-auto-columns: 100%;
+
 
     @include osds-code-on-container-element() {
-      flex: 1 1 auto;
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      white-space: pre-line;
+      align-self: start;
+      box-sizing: border-box;
+      justify-self: start;
+      white-space: break-spaces;
+      width: 100%;
     }
   }
 }
 
 slot[name='copy'] {
-  display: flex;
-  margin: var(--ods-size-03);
+  align-self: start;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-self: end;
+  padding: var(--ods-size-03);
+  width: 100%;
 }
 
 // apply the theme template for the component

From c5e714059c2cba34c73014b808ea746991c176b9 Mon Sep 17 00:00:00 2001
From: Francois Eoche <francois.eoche@ovhcloud.com>
Date: Tue, 8 Aug 2023 18:35:45 +0200
Subject: [PATCH 2/3] fix(code): display error when inserting long code inputs
 - review

---
 .../theming/size/ods-theming-size.code.scss   |  4 +--
 .../src/components/osds-code/osds-code.scss   | 29 ++++---------------
 .../osds-code/styles/osds-code.size.scss      |  8 ++---
 packages/themes/blue-jeans/theme/theme.scss   |  6 ++--
 4 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/packages/libraries/theming/size/ods-theming-size.code.scss b/packages/libraries/theming/size/ods-theming-size.code.scss
index 1deb9202a2..606655b84c 100644
--- a/packages/libraries/theming/size/ods-theming-size.code.scss
+++ b/packages/libraries/theming/size/ods-theming-size.code.scss
@@ -4,8 +4,8 @@
     @return (
       border-radius: var(--ods-size-code-#{$size-name}-border-radius),
       min-height: var(--ods-size-code-#{$size-name}-min-height),
-      padding-y: var(--ods-size-code-#{$size-name}-padding-y),
-      padding-x: var(--ods-size-code-#{$size-name}-padding-x)
+      global-padding: var(--ods-size-code-#{$size-name}-global-padding),
+      code-padding: var(--ods-size-code-#{$size-name}-code-padding)
     )
   }
 
diff --git a/packages/stencil/components/code/src/components/osds-code/osds-code.scss b/packages/stencil/components/code/src/components/osds-code/osds-code.scss
index 8cb34a7b0d..54614b6e44 100644
--- a/packages/stencil/components/code/src/components/osds-code/osds-code.scss
+++ b/packages/stencil/components/code/src/components/osds-code/osds-code.scss
@@ -9,34 +9,17 @@
 // CSS for the component but not for theming
 :host {
   @include osds-code-on-main-element() {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 1fr;
-    gap: 0;
-    grid-template-areas:
-    ". .";
-    justify-content: start;
-    align-content: start;
-    grid-auto-columns: 100%;
-
+    display: flex;
 
     @include osds-code-on-container-element() {
-      align-self: start;
-      box-sizing: border-box;
-      justify-self: start;
-      white-space: break-spaces;
-      width: 100%;
+      flex-grow: 1;
+      white-space: pre-line;
     }
   }
-}
 
-slot[name='copy'] {
-  align-self: start;
-  box-sizing: border-box;
-  display: inline-flex;
-  justify-self: end;
-  padding: var(--ods-size-03);
-  width: 100%;
+  ::slotted([slot="copy"]) {
+    flex-shrink: 0;
+  }
 }
 
 // apply the theme template for the component
diff --git a/packages/stencil/components/code/src/components/osds-code/styles/osds-code.size.scss b/packages/stencil/components/code/src/components/osds-code/styles/osds-code.size.scss
index 7a814c4a05..9daa703db9 100644
--- a/packages/stencil/components/code/src/components/osds-code/styles/osds-code.size.scss
+++ b/packages/stencil/components/code/src/components/osds-code/styles/osds-code.size.scss
@@ -2,16 +2,16 @@
 @import './osds-code.mixins';
 
 @mixin osds-code-theme-size() {
-  /** sizes */
-
   @include ods-foreach-theme-size(code) using ($sizes) {
     @include osds-code-on-selected-host() {
       border-radius: ods-get-size-property($sizes, border-radius);
+      margin: 0; // browser reset of <pre> tag
       min-height: ods-get-size-properties($sizes, min-height);
-      padding: 0;
+      padding: ods-get-size-property($sizes, global-padding);
+
 
       @include osds-code-on-container-element() {
-        padding: ods-get-size-property($sizes, padding-y) ods-get-size-property($sizes, padding-x);
+        padding: ods-get-size-property($sizes, code-padding);
       }
     }
   }
diff --git a/packages/themes/blue-jeans/theme/theme.scss b/packages/themes/blue-jeans/theme/theme.scss
index e6e509ebe0..e6e060e3fc 100644
--- a/packages/themes/blue-jeans/theme/theme.scss
+++ b/packages/themes/blue-jeans/theme/theme.scss
@@ -131,9 +131,9 @@
       $code: (
         md: (
           border-radius: var(--ods-size-border-radius-01),
-          min-height: calc(2.75rem * var(--ods-size-ratio)),
-          padding-y: var(--ods-size-inline-05),
-          padding-x: var(--ods-size-inline-05)
+          min-height: var(--ods-size-09),
+          global-padding: var(--ods-size-inset-03),
+          code-padding: var(--ods-size-inset-04)
         ),
       ),
       $divider: (

From 5309b71aa9b79778b9a56663cd2f66c7a88f8d5c Mon Sep 17 00:00:00 2001
From: Francois Eoche <francois.eoche@ovhcloud.com>
Date: Fri, 11 Aug 2023 11:25:14 +0200
Subject: [PATCH 3/3] fix(code): display error when inserting long code inputs
 - review 2

---
 .../stories/components/code/code.web-components.stories.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tools/storybook/stories/components/code/code.web-components.stories.ts b/packages/tools/storybook/stories/components/code/code.web-components.stories.ts
index 83aea03a00..7c4458c108 100644
--- a/packages/tools/storybook/stories/components/code/code.web-components.stories.ts
+++ b/packages/tools/storybook/stories/components/code/code.web-components.stories.ts
@@ -53,7 +53,7 @@ Default.args = {
 };
 
 const TemplateCopy = (args: any) => html`
-<osds-code ...=${getTagAttributes(args)}><osds-button slot="copy" title="copy text"></osds-button>${unsafeHTML(args.codeContent)}</osds-code>
+<osds-code ...=${getTagAttributes(args)}><span slot="copy"><osds-button color="default" contrasted size="sm" variant="ghost"><osds-icon name="copy" size="xs" contrasted></osds-icon></osds-button></span>${unsafeHTML(args.codeContent)}</osds-code>
 `;
 export const Copy = TemplateCopy.bind({});
 Copy.args = {