Skip to content

refactor(octicons_react): add support for className, use presentational attributes over inline styles #1037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Dec 9, 2024
Merged

refactor(octicons_react): add support for className, use presentational attributes over inline styles #1037

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c20a494
Concat className with default
jonrohan Nov 6, 2024
78b6409
join space
jonrohan Nov 6, 2024
d1fae9f
update snap
langermank Nov 6, 2024
a907325
tests
langermank Nov 6, 2024
ff1758b
Refactor className concatenation method
jonrohan Nov 8, 2024
5cde1e4
Set default value for className variable
jonrohan Nov 8, 2024
1aed5e8
Update snapshot size in tree-shaking test
jonrohan Nov 8, 2024
8b4f5d9
Move to logical properties and deprecate verticalAlign
jonrohan Dec 4, 2024
ed631fd
Fix verticalAlign style property formatting
jonrohan Dec 4, 2024
9f16e69
test: update snapshots, add support for style
joshblack Dec 9, 2024
20f7acf
chore: update snapshots
joshblack Dec 9, 2024
2efb058
chore: add changeset
joshblack Dec 9, 2024
a641df3
Merge branch 'main' into octicons_react_classname
jonrohan Dec 9, 2024
4e787d1
Remove duplicate style variable
jonrohan Dec 9, 2024
06e6d44
Update expected bundle size in test
jonrohan Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/octicons_react/__tests__/tree-shaking.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(`"3.505kB"`)
})
2 changes: 1 addition & 1 deletion lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion lib/octicons_react/src/__tests__/octicon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions lib/octicons_react/src/createIconComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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].join(' ')}
role={role}
viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
width={width}
Expand Down
Loading