From c20a494e0f87014a6d5c55fe09e1e8a83fa9fa96 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 6 Nov 2024 21:56:10 +0000
Subject: [PATCH 01/14] Concat className with default

---
 lib/octicons_react/src/createIconComponent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index f895c43ec..9876590ba 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -16,7 +16,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         'aria-label': ariaLabel,
         'aria-labelledby': arialabelledby,
         tabIndex,
-        className = defaultClassName,
+        className = '',
         fill = 'currentColor',
         size = 16,
         verticalAlign = 'text-bottom',
@@ -41,7 +41,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           focusable={tabIndex >= 0 ? 'true' : 'false'}
           aria-label={ariaLabel}
           aria-labelledby={arialabelledby}
-          className={className}
+          className={`${defaultClassName} ${className}`}
           role={role}
           viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
           width={width}

From 78b6409d0f98a001d3e8db75379e92391b3ff1a3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 6 Nov 2024 21:57:51 +0000
Subject: [PATCH 02/14] join space

---
 lib/octicons_react/src/createIconComponent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 9876590ba..351a6a482 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -16,7 +16,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         'aria-label': ariaLabel,
         'aria-labelledby': arialabelledby,
         tabIndex,
-        className = '',
+        className,
         fill = 'currentColor',
         size = 16,
         verticalAlign = 'text-bottom',
@@ -41,7 +41,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           focusable={tabIndex >= 0 ? 'true' : 'false'}
           aria-label={ariaLabel}
           aria-labelledby={arialabelledby}
-          className={`${defaultClassName} ${className}`}
+          className={[defaultClassName, className].join(' ')}
           role={role}
           viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
           width={width}

From d1fae9fdf62d28e7213a552c447d82ae90253226 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:09:37 +0000
Subject: [PATCH 03/14] update snap

---
 lib/octicons_react/__tests__/tree-shaking.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index a490c44bf..69c51376f 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"0.065kB"`)
 })

From a90732551585b544048176f0066b986e1133ca3b Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:13:57 +0000
Subject: [PATCH 04/14] tests

---
 lib/octicons_react/__tests__/tree-shaking.test.js              | 2 +-
 lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap | 2 +-
 lib/octicons_react/src/__tests__/octicon.js                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index 69c51376f..d3820f12d 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"0.065kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.505kB"`)
 })
diff --git a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
index 2c1947a65..fccca3b42 100644
--- a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
+++ b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
@@ -3,7 +3,7 @@
 exports[`An icon component matches snapshot 1`] = `
 <svg
   aria-hidden="true"
-  class="octicon octicon-alert"
+  class="octicon octicon-alert "
   fill="currentColor"
   focusable="false"
   height="16"
diff --git a/lib/octicons_react/src/__tests__/octicon.js b/lib/octicons_react/src/__tests__/octicon.js
index c4a9493a7..f72a2f005 100644
--- a/lib/octicons_react/src/__tests__/octicon.js
+++ b/lib/octicons_react/src/__tests__/octicon.js
@@ -54,7 +54,7 @@ describe('An icon component', () => {
 
   it('respects the className prop', () => {
     const {container} = render(<AlertIcon className="foo" />)
-    expect(container.querySelector('svg')).toHaveAttribute('class', 'foo')
+    expect(container.querySelector('svg')).toHaveAttribute('class', 'octicon octicon-alert foo')
   })
 
   it('respects the fill prop', () => {

From ff1758b99375725b3df791c246265701bd2e27df Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Fri, 8 Nov 2024 10:07:26 -0800
Subject: [PATCH 05/14] Refactor className concatenation method

---
 lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap | 2 +-
 lib/octicons_react/src/createIconComponent.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
index fccca3b42..2c1947a65 100644
--- a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
+++ b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
@@ -3,7 +3,7 @@
 exports[`An icon component matches snapshot 1`] = `
 <svg
   aria-hidden="true"
-  class="octicon octicon-alert "
+  class="octicon octicon-alert"
   fill="currentColor"
   focusable="false"
   height="16"
diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 351a6a482..e1db1c937 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -41,7 +41,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           focusable={tabIndex >= 0 ? 'true' : 'false'}
           aria-label={ariaLabel}
           aria-labelledby={arialabelledby}
-          className={[defaultClassName, className].join(' ')}
+          className={`${defaultClassName} ${className}`.trim()}
           role={role}
           viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
           width={width}

From 5cde1e477e427d2046fdbcf27ef78ca64caca4de Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Fri, 8 Nov 2024 10:19:05 -0800
Subject: [PATCH 06/14] Set default value for className variable

---
 lib/octicons_react/src/createIconComponent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index e1db1c937..3c104a1fa 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -16,7 +16,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         'aria-label': ariaLabel,
         'aria-labelledby': arialabelledby,
         tabIndex,
-        className,
+        className = '',
         fill = 'currentColor',
         size = 16,
         verticalAlign = 'text-bottom',

From 1aed5e82fe6b00ccf7ecc131a88f2285019fbda6 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Fri, 8 Nov 2024 10:21:57 -0800
Subject: [PATCH 07/14] Update snapshot size in tree-shaking test

---
 lib/octicons_react/__tests__/tree-shaking.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index d3820f12d..03ba880bf 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.505kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.597kB"`)
 })

From 8b4f5d93c22564616b55cf9b044fb28b2ee7de35 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 4 Dec 2024 21:58:20 +0000
Subject: [PATCH 08/14] Move to logical properties and deprecate verticalAlign

---
 lib/octicons_react/src/createIconComponent.js | 5 ++---
 lib/octicons_react/src/index.d.ts             | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 3c104a1fa..e1efd297a 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -48,11 +48,10 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           height={height}
           fill={fill}
           id={id}
+          display="inline-block"
+          overflow="visible"
           style={{
-            display: 'inline-block',
-            userSelect: 'none',
             verticalAlign,
-            overflow: 'visible'
           }}
         >
           {title ? <title>{title}</title> : null}
diff --git a/lib/octicons_react/src/index.d.ts b/lib/octicons_react/src/index.d.ts
index 3b7302c5b..126464e7f 100644
--- a/lib/octicons_react/src/index.d.ts
+++ b/lib/octicons_react/src/index.d.ts
@@ -17,6 +17,7 @@ export interface OcticonProps {
   fill?: string
   icon?: Icon | React.ReactNode
   size?: number | Size
+  /** @deprecated use v-align utilities instead */
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
 }
 

From ed631fd8fc03ea4346ff90ef289597adc2ffbcf4 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Wed, 4 Dec 2024 15:19:14 -0800
Subject: [PATCH 09/14] Fix verticalAlign style property formatting

---
 lib/octicons_react/src/createIconComponent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index e1efd297a..7339c81b2 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -51,7 +51,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           display="inline-block"
           overflow="visible"
           style={{
-            verticalAlign,
+            verticalAlign
           }}
         >
           {title ? <title>{title}</title> : null}

From 9f16e69b1c91436decf11714bad8a97da25226b0 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 9 Dec 2024 13:54:35 -0600
Subject: [PATCH 10/14] test: update snapshots, add support for style

---
 lib/octicons_react/__tests__/tree-shaking.test.js             | 2 +-
 .../src/__tests__/__snapshots__/octicon.js.snap               | 4 +++-
 lib/octicons_react/src/createIconComponent.js                 | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index 03ba880bf..a490c44bf 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.597kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
 })
diff --git a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
index 2c1947a65..99317fff7 100644
--- a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
+++ b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
@@ -4,10 +4,12 @@ exports[`An icon component matches snapshot 1`] = `
 <svg
   aria-hidden="true"
   class="octicon octicon-alert"
+  display="inline-block"
   fill="currentColor"
   focusable="false"
   height="16"
-  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+  overflow="visible"
+  style="vertical-align: text-bottom;"
   viewBox="0 0 16 16"
   width="16"
 >
diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 7339c81b2..d8ae6c2d8 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -19,6 +19,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         className = '',
         fill = 'currentColor',
         size = 16,
+        style,
         verticalAlign = 'text-bottom',
         id,
         title
@@ -51,7 +52,8 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           display="inline-block"
           overflow="visible"
           style={{
-            verticalAlign
+            verticalAlign,
+            ...style
           }}
         >
           {title ? <title>{title}</title> : null}

From 20f7acf33592ec7c2a56913cea2dcf23552feef9 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 9 Dec 2024 14:00:39 -0600
Subject: [PATCH 11/14] chore: update snapshots

---
 lib/octicons_react/__tests__/tree-shaking.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index a490c44bf..3e7827208 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"4.787kB"`)
 })

From 2efb05822d3c8f8e8e7475e7805de33188bb5888 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 9 Dec 2024 14:09:50 -0600
Subject: [PATCH 12/14] chore: add changeset

---
 .changeset/brown-buttons-search.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/brown-buttons-search.md

diff --git a/.changeset/brown-buttons-search.md b/.changeset/brown-buttons-search.md
new file mode 100644
index 000000000..ca64c5ad0
--- /dev/null
+++ b/.changeset/brown-buttons-search.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons': minor
+---
+
+Update octicons-react to use presentational attributes over inline styles for base styles

From 4e787d19d5905dde7820b1ee60004a6b6abc12dc Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Mon, 9 Dec 2024 14:13:57 -0800
Subject: [PATCH 13/14] Remove duplicate style variable

---
 lib/octicons_react/src/createIconComponent.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 020df2f01..baa67db17 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -19,7 +19,6 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         className = '',
         fill = 'currentColor',
         size = 16,
-        style,
         verticalAlign = 'text-bottom',
         id,
         title,

From 06e6d44f8a953ea8f12cd5ac24aeaaab13e11a1d Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Mon, 9 Dec 2024 14:15:51 -0800
Subject: [PATCH 14/14] Update expected bundle size in test

---
 lib/octicons_react/__tests__/tree-shaking.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index 5ce93e15e..d39e1c2aa 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.29kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.292kB"`)
 })