feat(code-block): hide line numbers

[adamjohnson]

What I did

1. Added the ability for users to optionally hide line numbers in <rh-code-block> via the hide-line-numbers boolean attribute.

Testing Instructions

1. Open the Hide Line Numbers demo in the DP.
2. View the attribute on the element, ensure the line numbers are not there.
3. Ensure no other code blocks have been harmed by this change.
4. Verify the changeset is correctly formatted

Notes to Reviewers

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 03fa47d5224090a55ad756bae6b58190be73358a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	03fa47d5224090a55ad756bae6b58190be73358a
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/682b7b0092c281000848b00c
😎 Deploy Preview	https://deploy-preview-2319--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions[bot]]

Size Change: +41 B (+0.02%)

Total Size: 234 kB

Filename	Size	Change
./elements/rh-code-block/rh-code-block.js	7.25 kB	+41 B (+0.57%)

ℹ️ View Unchanged

Filename	Size
./elements.js	538 B
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.67 kB
./elements/rh-accordion/rh-accordion-panel.js	1.26 kB
./elements/rh-accordion/rh-accordion.js	3.32 kB
./elements/rh-alert/rh-alert.js	4.98 kB
./elements/rh-announcement/rh-announcement.js	2.12 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.81 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js	1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.4 kB
./elements/rh-audio-player/rh-audio-player.js	13 kB
./elements/rh-audio-player/rh-cue.js	1.95 kB
./elements/rh-audio-player/rh-transcript.js	2.68 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.68 kB
./elements/rh-back-to-top/rh-back-to-top.js	1.96 kB
./elements/rh-badge/rh-badge.js	1.53 kB
./elements/rh-blockquote/rh-blockquote.js	1.37 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.84 kB
./elements/rh-button/rh-button.js	3.29 kB
./elements/rh-card/rh-card.js	3.43 kB
./elements/rh-chip/context.js	165 B
./elements/rh-chip/rh-chip-group.js	1.58 kB
./elements/rh-chip/rh-chip.js	2.06 kB
./elements/rh-code-block/prism.css.js	667 B
./elements/rh-code-block/prism.js	572 B
./elements/rh-cta/rh-cta.js	3.96 kB
./elements/rh-dialog/rh-dialog.js	4.81 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-disclosure/rh-disclosure.js	2.09 kB
./elements/rh-footer/rh-footer-block.js	714 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.19 kB
./elements/rh-footer/rh-footer-social-link.js	1.15 kB
./elements/rh-footer/rh-footer-universal.js	3.96 kB
./elements/rh-footer/rh-footer.js	4.84 kB
./elements/rh-health-index/rh-health-index.js	2.4 kB
./elements/rh-icon/rh-icon.js	2.49 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-jump-links/context.js	179 B
./elements/rh-jump-links/rh-jump-link.js	1.46 kB
./elements/rh-jump-links/rh-jump-links-list.js	1.15 kB
./elements/rh-jump-links/rh-jump-links.js	2.35 kB
./elements/rh-menu/rh-menu.js	1.21 kB
./elements/rh-navigation-primary/context.js	176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js	1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js	3.4 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js	534 B
./elements/rh-navigation-primary/rh-navigation-primary.js	7.32 kB
./elements/rh-navigation-primary/test/fixtures.js	4.49 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.26 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.4 kB
./elements/rh-site-status/rh-site-status.js	2.38 kB
./elements/rh-skip-link/rh-skip-link.js	1.19 kB
./elements/rh-spinner/rh-spinner.js	1.29 kB
./elements/rh-stat/rh-stat.js	2.08 kB
./elements/rh-subnav/rh-subnav.js	2.44 kB
./elements/rh-surface/rh-surface.js	893 B
./elements/rh-surface/test/elements.js	763 B
./elements/rh-switch/rh-switch.js	2.89 kB
./elements/rh-table/rh-sort-button.js	1.4 kB
./elements/rh-table/rh-table.js	2.89 kB
./elements/rh-tabs/context.js	226 B
./elements/rh-tabs/rh-tab-panel.js	973 B
./elements/rh-tabs/rh-tab.js	2.95 kB
./elements/rh-tabs/rh-tabs.js	3.62 kB
./elements/rh-tag/rh-tag.js	2.66 kB
./elements/rh-tile/rh-tile-group.js	1.78 kB
./elements/rh-tile/rh-tile.js	4.89 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	2.71 kB
./elements/rh-video-embed/rh-video-embed.js	4.6 kB
./lib/color-palettes.js	851 B
./lib/context/headings/consumer.js	593 B
./lib/context/headings/provider.js	1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js	1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.18 kB
./lib/environment.js	194 B
./lib/functions.js	175 B
./lib/I18nController.js	1.37 kB
./lib/ScreenSizeController.js	876 B
./lib/ssr-controller.js	201 B
./lib/themable.js	549 B
./react/rh-accordion/rh-accordion-header.js	199 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	215 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-announcement/rh-announcement.js	189 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js	213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	207 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-chip/rh-chip-group.js	182 B
./react/rh-chip/rh-chip.js	187 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-disclosure/rh-disclosure.js	192 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-icon/rh-icon.js	202 B
./react/rh-jump-links/rh-jump-link.js	196 B
./react/rh-jump-links/rh-jump-links-list.js	189 B
./react/rh-jump-links/rh-jump-links.js	195 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js	205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js	210 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js	199 B
./react/rh-navigation-primary/rh-navigation-primary.js	189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	185 B
./react/rh-table/rh-sort-button.js	213 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	194 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B
./react/rh-video-embed/rh-video-embed.js	227 B
./uxdot/ssr-failure-recoverable.js	581 B
./uxdot/uxdot-best-practice.js	812 B
./uxdot/uxdot-color-scheme-picker.js	1.56 kB
./uxdot/uxdot-copy-button.js	1.24 kB
./uxdot/uxdot-copy-permalink.js	1.1 kB
./uxdot/uxdot-demo.js	1.38 kB
./uxdot/uxdot-example.js	1.14 kB
./uxdot/uxdot-feedback.js	727 B
./uxdot/uxdot-header.js	1.02 kB
./uxdot/uxdot-masthead.js	1.25 kB
./uxdot/uxdot-pattern-ssr-controller-client.js	615 B
./uxdot/uxdot-pattern-ssr-controller-server.js	1.71 kB
./uxdot/uxdot-pattern-ssr-controller.js	213 B
./uxdot/uxdot-pattern.js	2.23 kB
./uxdot/uxdot-repo-status-checklist.js	1.16 kB
./uxdot/uxdot-repo-status-list.js	1.07 kB
./uxdot/uxdot-repo-status-table.js	782 B
./uxdot/uxdot-repo.js	1.17 kB
./uxdot/uxdot-search.js	2.39 kB
./uxdot/uxdot-sidenav.js	2.69 kB
./uxdot/uxdot-spacer-tokens-table.js	2.46 kB
./uxdot/uxdot-toc.js	1.8 kB

_{compressed-size-action}

[coreyvickery]

Please add some prose in the docs

@coreyvickery please add guidelines around this feature

We need to update the docs in general, issue to do that is here.

[adamjohnson]

@coreyvickery I see the Figma listed in #2381 has docs updates for code block. If that Figma is ready to go, I can do one of the following:

1. Take what's presented in that Figma, code it in this PR and these updates will get released in Diglett.
2. Take only the bits about hiding line numbers from the Figma and add that prose to docs in this PR. Again, to be released in Diglett.
   • The rest of the updates could be added in another PR and pushed out on uxdot earlier than whenever Diglett goes out.

I'm assuming there are updates in addition to hiding line numbers.

I'm happy to code these docs, but I don't want to steal your or @marionnegp's thunder. Let me know how you would like to proceed.

[bennypowers]

Unrelated docs changes should not block this pr

[bennypowers]

However, docs changes related to the line numbers attribute must be included in this PR.

[coreyvickery]

@adamjohnson Agreed with what Benny said, let's stick with what's appropriate for this PR.

[coreyvickery]

When docs indicate that more than one option is possible, they should explain why one option might be preferable to another and under which circumstances that might be the case.

@bennypowers @adamjohnson From a developer perspective, why are line numbers preferable? Easier to site an individual or a group of lines of code? Is the only reason not to have line numbers because it's a bit cleaner?

[bennypowers]

When docs indicate that more than one option is possible, they should explain why one option might be preferable to another and under which circumstances that might be the case.

@bennypowers @adamjohnson From a developer perspective, why are line numbers preferable? Easier to site an individual or a group of lines of code? Is the only reason not to have line numbers because it's a bit cleaner?

CC @kylebuch8 who kindly brought this issue to our attention