Skip to content
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.

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

LG-1719 Add description to radio #1647

Merged
merged 7 commits into from Mar 14, 2023
Merged

Conversation

TheSonOfThomp
Copy link
Collaborator

@TheSonOfThomp TheSonOfThomp commented Mar 1, 2023

✍️ Proposed changes

🎟 Jira ticket: LG-1719

✅ Checklist

For bug fixes, new features & breaking changes

  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • I have run yarn changeset and documented my changes

For new components

  • I have added my new package to the global tsconfig
  • I have added my new package to the Table of Contents on the global README

🧪 How to test changes

@TheSonOfThomp TheSonOfThomp added the 1. New Feature 🚀 non-breaking change which adds functionality label Mar 1, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023

Size Change: +434 B (0%)

Total Size: 829 kB

Filename Size Change
packages/radio-group/dist/esm/index.js 3.19 kB +216 B (+7%) 🔍
packages/radio-group/dist/index.js 3.38 kB +218 B (+7%) 🔍
ℹ️ View Unchanged
Filename Size
packages/a11y/dist/esm/index.js 1.61 kB
packages/a11y/dist/index.js 1.78 kB
packages/badge/dist/esm/index.js 1.33 kB
packages/badge/dist/index.js 1.55 kB
packages/banner/dist/esm/index.js 3.09 kB
packages/banner/dist/index.js 3.43 kB
packages/box/dist/esm/index.js 532 B
packages/box/dist/index.js 689 B
packages/button/dist/esm/index.js 4.42 kB
packages/button/dist/index.js 4.66 kB
packages/callout/dist/esm/index.js 2.49 kB
packages/callout/dist/index.js 2.77 kB
packages/card/dist/esm/index.js 1.36 kB
packages/card/dist/index.js 1.58 kB
packages/checkbox/dist/esm/index.js 3.88 kB
packages/checkbox/dist/index.js 4.07 kB
packages/code/dist/esm/index.js 9.39 kB
packages/code/dist/index.js 10 kB
packages/combobox/dist/esm/index.js 11.4 kB
packages/combobox/dist/index.js 11.8 kB
packages/confirmation-modal/dist/esm/index.js 2.22 kB
packages/confirmation-modal/dist/index.js 2.48 kB
packages/copyable/dist/esm/index.js 2.77 kB
packages/copyable/dist/index.js 2.99 kB
packages/emotion/dist/esm/index.js 338 B
packages/emotion/dist/index.js 554 B
packages/expandable-card/dist/esm/index.js 2.69 kB
packages/expandable-card/dist/index.js 2.89 kB
packages/form-footer/dist/esm/index.js 1.43 kB
packages/form-footer/dist/index.js 1.62 kB
packages/guide-cue/dist/esm/index.js 4.11 kB
packages/guide-cue/dist/index.js 4.38 kB
packages/hooks/dist/esm/index.js 2.91 kB
packages/hooks/dist/index.js 3.1 kB
packages/icon-button/dist/esm/index.js 2.26 kB
packages/icon-button/dist/index.js 2.49 kB
packages/icon/dist/ActivityFeed.js 1.91 kB
packages/icon/dist/AddFile.js 1.68 kB
packages/icon/dist/Apps.js 1.37 kB
packages/icon/dist/Array.js 1.48 kB
packages/icon/dist/ArrowDown.js 1.6 kB
packages/icon/dist/ArrowLeft.js 1.61 kB
packages/icon/dist/ArrowRight.js 1.61 kB
packages/icon/dist/ArrowUp.js 1.6 kB
packages/icon/dist/Beaker.js 2.03 kB
packages/icon/dist/Bell.js 1.57 kB
packages/icon/dist/Biometric.js 2.12 kB
packages/icon/dist/Building.js 1.56 kB
packages/icon/dist/Bulb.js 1.6 kB
packages/icon/dist/Calendar.js 1.56 kB
packages/icon/dist/CaretDown.js 1.43 kB
packages/icon/dist/CaretLeft.js 1.44 kB
packages/icon/dist/CaretRight.js 1.43 kB
packages/icon/dist/CaretUp.js 1.44 kB
packages/icon/dist/Charts.js 1.51 kB
packages/icon/dist/Checkmark.js 1.57 kB
packages/icon/dist/CheckmarkWithCircle.js 1.63 kB
packages/icon/dist/ChevronDown.js 1.54 kB
packages/icon/dist/ChevronLeft.js 1.54 kB
packages/icon/dist/ChevronRight.js 1.55 kB
packages/icon/dist/ChevronUp.js 1.53 kB
packages/icon/dist/Clock.js 1.59 kB
packages/icon/dist/ClockWithArrow.js 1.86 kB
packages/icon/dist/Clone.js 1.46 kB
packages/icon/dist/Cloud.js 1.64 kB
packages/icon/dist/Code.js 1.83 kB
packages/icon/dist/Connect.js 1.89 kB
packages/icon/dist/Copy.js 1.83 kB
packages/icon/dist/CreditCard.js 1.4 kB
packages/icon/dist/CurlyBraces.js 1.99 kB
packages/icon/dist/Cursor.js 1.52 kB
packages/icon/dist/Database.js 1.93 kB
packages/icon/dist/Diagram.js 1.61 kB
packages/icon/dist/Diagram2.js 1.61 kB
packages/icon/dist/Diagram3.js 1.6 kB
packages/icon/dist/Disconnect.js 1.82 kB
packages/icon/dist/Download.js 1.62 kB
packages/icon/dist/Drag.js 1.56 kB
packages/icon/dist/Edit.js 1.48 kB
packages/icon/dist/Ellipsis.js 1.46 kB
packages/icon/dist/Email.js 1.66 kB
packages/icon/dist/esm/ActivityFeed.js 1.66 kB
packages/icon/dist/esm/AddFile.js 1.44 kB
packages/icon/dist/esm/Apps.js 1.12 kB
packages/icon/dist/esm/Array.js 1.23 kB
packages/icon/dist/esm/ArrowDown.js 1.35 kB
packages/icon/dist/esm/ArrowLeft.js 1.36 kB
packages/icon/dist/esm/ArrowRight.js 1.36 kB
packages/icon/dist/esm/ArrowUp.js 1.35 kB
packages/icon/dist/esm/Beaker.js 1.78 kB
packages/icon/dist/esm/Bell.js 1.32 kB
packages/icon/dist/esm/Biometric.js 1.87 kB
packages/icon/dist/esm/Building.js 1.31 kB
packages/icon/dist/esm/Bulb.js 1.35 kB
packages/icon/dist/esm/Calendar.js 1.31 kB
packages/icon/dist/esm/CaretDown.js 1.19 kB
packages/icon/dist/esm/CaretLeft.js 1.19 kB
packages/icon/dist/esm/CaretRight.js 1.19 kB
packages/icon/dist/esm/CaretUp.js 1.19 kB
packages/icon/dist/esm/Charts.js 1.26 kB
packages/icon/dist/esm/Checkmark.js 1.32 kB
packages/icon/dist/esm/CheckmarkWithCircle.js 1.38 kB
packages/icon/dist/esm/ChevronDown.js 1.29 kB
packages/icon/dist/esm/ChevronLeft.js 1.29 kB
packages/icon/dist/esm/ChevronRight.js 1.3 kB
packages/icon/dist/esm/ChevronUp.js 1.28 kB
packages/icon/dist/esm/Clock.js 1.34 kB
packages/icon/dist/esm/ClockWithArrow.js 1.61 kB
packages/icon/dist/esm/Clone.js 1.22 kB
packages/icon/dist/esm/Cloud.js 1.39 kB
packages/icon/dist/esm/Code.js 1.59 kB
packages/icon/dist/esm/Connect.js 1.64 kB
packages/icon/dist/esm/Copy.js 1.57 kB
packages/icon/dist/esm/CreditCard.js 1.15 kB
packages/icon/dist/esm/CurlyBraces.js 1.74 kB
packages/icon/dist/esm/Cursor.js 1.27 kB
packages/icon/dist/esm/Database.js 1.68 kB
packages/icon/dist/esm/Diagram.js 1.36 kB
packages/icon/dist/esm/Diagram2.js 1.36 kB
packages/icon/dist/esm/Diagram3.js 1.35 kB
packages/icon/dist/esm/Disconnect.js 1.57 kB
packages/icon/dist/esm/Download.js 1.37 kB
packages/icon/dist/esm/Drag.js 1.32 kB
packages/icon/dist/esm/Edit.js 1.23 kB
packages/icon/dist/esm/Ellipsis.js 1.21 kB
packages/icon/dist/esm/Email.js 1.41 kB
packages/icon/dist/esm/Export.js 1.48 kB
packages/icon/dist/esm/Favorite.js 1.44 kB
packages/icon/dist/esm/File.js 1.26 kB
packages/icon/dist/esm/Filter.js 1.24 kB
packages/icon/dist/esm/Folder.js 1.16 kB
packages/icon/dist/esm/FullScreenEnter.js 1.41 kB
packages/icon/dist/esm/FullScreenExit.js 1.42 kB
packages/icon/dist/esm/GlobeAmericas.js 1.35 kB
packages/icon/dist/esm/GovernmentBuilding.js 1.39 kB
packages/icon/dist/esm/Home.js 1.46 kB
packages/icon/dist/esm/Import.js 1.48 kB
packages/icon/dist/esm/ImportantWithCircle.js 1.25 kB
packages/icon/dist/esm/index.js 19.2 kB
packages/icon/dist/esm/InfoWithCircle.js 1.28 kB
packages/icon/dist/esm/InviteUser.js 1.58 kB
packages/icon/dist/esm/Key.js 1.32 kB
packages/icon/dist/esm/Laptop.js 1.37 kB
packages/icon/dist/esm/Link.js 1.74 kB
packages/icon/dist/esm/Lock.js 1.34 kB
packages/icon/dist/esm/MagnifyingGlass.js 1.33 kB
packages/icon/dist/esm/Megaphone.js 1.3 kB
packages/icon/dist/esm/Menu.js 1.21 kB
packages/icon/dist/esm/Minus.js 1.16 kB
packages/icon/dist/esm/NoFilter.js 1.38 kB
packages/icon/dist/esm/NotAllowed.js 1.27 kB
packages/icon/dist/esm/Note.js 1.3 kB
packages/icon/dist/esm/OpenNewTab.js 1.57 kB
packages/icon/dist/esm/Pause.js 1.2 kB
packages/icon/dist/esm/Person.js 1.36 kB
packages/icon/dist/esm/PersonGroup.js 1.57 kB
packages/icon/dist/esm/PersonWithLock.js 1.57 kB
packages/icon/dist/esm/Play.js 1.2 kB
packages/icon/dist/esm/Plus.js 1.21 kB
packages/icon/dist/esm/PlusWithCircle.js 1.25 kB
packages/icon/dist/esm/QuestionMarkWithCircle.js 1.6 kB
packages/icon/dist/esm/Read.js 1.91 kB
packages/icon/dist/esm/Redo.js 1.54 kB
packages/icon/dist/esm/Refresh.js 1.61 kB
packages/icon/dist/esm/Relationship.js 1.31 kB
packages/icon/dist/esm/ReplicaSet.js 1.46 kB
packages/icon/dist/esm/Resize.js 1.29 kB
packages/icon/dist/esm/Save.js 1.8 kB
packages/icon/dist/esm/Serverless.js 1.45 kB
packages/icon/dist/esm/Settings.js 1.88 kB
packages/icon/dist/esm/ShardedCluster.js 1.82 kB
packages/icon/dist/esm/Shell.js 1.36 kB
packages/icon/dist/esm/SMS.js 1.32 kB
packages/icon/dist/esm/SortAscending.js 1.41 kB
packages/icon/dist/esm/SortDescending.js 1.4 kB
packages/icon/dist/esm/SplitHorizontal.js 1.18 kB
packages/icon/dist/esm/SplitVertical.js 1.17 kB
packages/icon/dist/esm/Stitch.js 1.22 kB
packages/icon/dist/esm/Support.js 1.4 kB
packages/icon/dist/esm/Sweep.js 1.43 kB
packages/icon/dist/esm/Table.js 1.2 kB
packages/icon/dist/esm/TimeSeries.js 1.55 kB
packages/icon/dist/esm/Trash.js 1.24 kB
packages/icon/dist/esm/Undo.js 1.53 kB
packages/icon/dist/esm/University.js 1.72 kB
packages/icon/dist/esm/Unlock.js 1.42 kB
packages/icon/dist/esm/Unsorted.js 1.45 kB
packages/icon/dist/esm/UpDownCarets.js 1.3 kB
packages/icon/dist/esm/Upload.js 1.5 kB
packages/icon/dist/esm/VerticalEllipsis.js 1.23 kB
packages/icon/dist/esm/Visibility.js 1.53 kB
packages/icon/dist/esm/VisibilityOff.js 1.92 kB
packages/icon/dist/esm/Warning.js 1.3 kB
packages/icon/dist/esm/Write.js 1.9 kB
packages/icon/dist/esm/X.js 1.34 kB
packages/icon/dist/esm/XWithCircle.js 1.29 kB
packages/icon/dist/Export.js 1.73 kB
packages/icon/dist/Favorite.js 1.7 kB
packages/icon/dist/File.js 1.51 kB
packages/icon/dist/Filter.js 1.49 kB
packages/icon/dist/Folder.js 1.41 kB
packages/icon/dist/FullScreenEnter.js 1.65 kB
packages/icon/dist/FullScreenExit.js 1.66 kB
packages/icon/dist/GlobeAmericas.js 1.6 kB
packages/icon/dist/GovernmentBuilding.js 1.64 kB
packages/icon/dist/Home.js 1.72 kB
packages/icon/dist/Import.js 1.73 kB
packages/icon/dist/ImportantWithCircle.js 1.5 kB
packages/icon/dist/index.js 19.5 kB
packages/icon/dist/InfoWithCircle.js 1.53 kB
packages/icon/dist/InviteUser.js 1.83 kB
packages/icon/dist/Key.js 1.57 kB
packages/icon/dist/Laptop.js 1.62 kB
packages/icon/dist/Link.js 1.99 kB
packages/icon/dist/Lock.js 1.59 kB
packages/icon/dist/MagnifyingGlass.js 1.58 kB
packages/icon/dist/Megaphone.js 1.55 kB
packages/icon/dist/Menu.js 1.46 kB
packages/icon/dist/Minus.js 1.41 kB
packages/icon/dist/NoFilter.js 1.63 kB
packages/icon/dist/NotAllowed.js 1.52 kB
packages/icon/dist/Note.js 1.55 kB
packages/icon/dist/OpenNewTab.js 1.82 kB
packages/icon/dist/Pause.js 1.44 kB
packages/icon/dist/Person.js 1.61 kB
packages/icon/dist/PersonGroup.js 1.82 kB
packages/icon/dist/PersonWithLock.js 1.82 kB
packages/icon/dist/Play.js 1.45 kB
packages/icon/dist/Plus.js 1.46 kB
packages/icon/dist/PlusWithCircle.js 1.49 kB
packages/icon/dist/QuestionMarkWithCircle.js 1.85 kB
packages/icon/dist/Read.js 2.15 kB
packages/icon/dist/Redo.js 1.79 kB
packages/icon/dist/Refresh.js 1.85 kB
packages/icon/dist/Relationship.js 1.56 kB
packages/icon/dist/ReplicaSet.js 1.71 kB
packages/icon/dist/Resize.js 1.54 kB
packages/icon/dist/Save.js 2.05 kB
packages/icon/dist/Serverless.js 1.7 kB
packages/icon/dist/Settings.js 2.13 kB
packages/icon/dist/ShardedCluster.js 2.07 kB
packages/icon/dist/Shell.js 1.61 kB
packages/icon/dist/SMS.js 1.57 kB
packages/icon/dist/SortAscending.js 1.66 kB
packages/icon/dist/SortDescending.js 1.65 kB
packages/icon/dist/SplitHorizontal.js 1.43 kB
packages/icon/dist/SplitVertical.js 1.42 kB
packages/icon/dist/Stitch.js 1.47 kB
packages/icon/dist/Support.js 1.65 kB
packages/icon/dist/Sweep.js 1.68 kB
packages/icon/dist/Table.js 1.45 kB
packages/icon/dist/TimeSeries.js 1.8 kB
packages/icon/dist/Trash.js 1.48 kB
packages/icon/dist/Undo.js 1.78 kB
packages/icon/dist/University.js 1.97 kB
packages/icon/dist/Unlock.js 1.67 kB
packages/icon/dist/Unsorted.js 1.7 kB
packages/icon/dist/UpDownCarets.js 1.55 kB
packages/icon/dist/Upload.js 1.75 kB
packages/icon/dist/VerticalEllipsis.js 1.48 kB
packages/icon/dist/Visibility.js 1.78 kB
packages/icon/dist/VisibilityOff.js 2.17 kB
packages/icon/dist/Warning.js 1.55 kB
packages/icon/dist/Write.js 2.15 kB
packages/icon/dist/X.js 1.59 kB
packages/icon/dist/XWithCircle.js 1.54 kB
packages/inline-definition/dist/esm/index.js 1.07 kB
packages/inline-definition/dist/index.js 1.26 kB
packages/input-option/dist/esm/index.js 1.65 kB
packages/input-option/dist/index.js 1.83 kB
packages/leafygreen-provider/dist/esm/index.js 1.58 kB
packages/leafygreen-provider/dist/index.js 1.78 kB
packages/lib/dist/esm/index.js 2.74 kB
packages/lib/dist/index.js 2.9 kB
packages/logo/dist/esm/index.js 39.9 kB
packages/logo/dist/index.js 40.1 kB
packages/marketing-modal/dist/esm/index.js 3.37 kB
packages/marketing-modal/dist/index.js 3.62 kB
packages/menu/dist/esm/index.js 7.71 kB
packages/menu/dist/index.js 7.96 kB
packages/modal/dist/esm/index.js 3.12 kB
packages/modal/dist/index.js 3.36 kB
packages/pagination/dist/esm/index.js 1.76 kB
packages/pagination/dist/index.js 1.97 kB
packages/palette/dist/esm/index.js 392 B
packages/palette/dist/index.js 581 B
packages/password-input/dist/esm/index.js 4.86 kB
packages/password-input/dist/index.js 5.13 kB
packages/pipeline/dist/esm/index.js 8.55 kB
packages/pipeline/dist/index.js 8.84 kB
packages/polymorphic/dist/esm/index.js 685 B
packages/polymorphic/dist/index.js 847 B
packages/popover/dist/esm/index.js 4.8 kB
packages/popover/dist/index.js 4.97 kB
packages/portal/dist/esm/index.js 947 B
packages/portal/dist/index.js 1.13 kB
packages/radio-box-group/dist/esm/index.js 2.84 kB
packages/radio-box-group/dist/index.js 3.02 kB
packages/ripple/dist/esm/index.js 962 B
packages/ripple/dist/index.js 1.09 kB
packages/search-input/dist/esm/index.js 6 kB
packages/search-input/dist/index.js 6.24 kB
packages/segmented-control/dist/esm/index.js 5.35 kB
packages/segmented-control/dist/index.js 5.53 kB
packages/select/dist/esm/index.js 8.87 kB
packages/select/dist/index.js 9.12 kB
packages/side-nav/dist/esm/index.js 7.51 kB
packages/side-nav/dist/index.js 7.83 kB
packages/stepper/dist/esm/index.js 3.45 kB
packages/stepper/dist/index.js 3.67 kB
packages/table/dist/esm/index.js 7.23 kB
packages/table/dist/index.js 7.51 kB
packages/tabs/dist/esm/index.js 4.06 kB
packages/tabs/dist/index.js 4.25 kB
packages/testing-lib/dist/esm/index.js 1.49 kB
packages/testing-lib/dist/index.js 1.6 kB
packages/text-area/dist/esm/index.js 2.55 kB
packages/text-area/dist/index.js 2.73 kB
packages/text-input/dist/esm/index.js 4.28 kB
packages/text-input/dist/index.js 4.52 kB
packages/toast/dist/esm/index.js 3.09 kB
packages/toast/dist/index.js 3.4 kB
packages/toggle/dist/esm/index.js 2.87 kB
packages/toggle/dist/index.js 3.07 kB
packages/tokens/dist/esm/index.js 726 B
packages/tokens/dist/index.js 857 B
packages/tooltip/dist/esm/index.js 4.16 kB
packages/tooltip/dist/index.js 4.48 kB
packages/typography/dist/esm/index.js 5.28 kB
packages/typography/dist/index.js 5.51 kB

compressed-size-action

& + & {
margin-top: 8px;
}
`;

export const containerSizeStyle: Omit<Record<Size, string>, 'xsmall'> = {
[Size.Small]: css`
grid-template-columns: ${14 + 8}px auto;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where are these numbers coming from?


{description && (
<Description
className={css`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move these styles to .styles?

</Label>

{description && (
<Description
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to add an id to this and pass that to input with aria-describedby?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep 👍

/**
* Description text rendered under the label.
*/
description?: string;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can also add this to PropTypes.

export const containerStyle = css`
display: grid;
grid-template-areas: 'label label' '. description';

& + & {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could also remove this bit of code and replace with flex and gap. This way, teams can use flex-direction.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good call!!

Copy link
Collaborator

@shaneeza shaneeza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✨ looking good - I left a few minor comments.

@TheSonOfThomp TheSonOfThomp merged commit bc77959 into main Mar 14, 2023
7 checks passed
@TheSonOfThomp TheSonOfThomp deleted the LG-1719-add-description-to-radio branch March 14, 2023 19:00
bruugey pushed a commit that referenced this pull request Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. New Feature 🚀 non-breaking change which adds functionality
Projects
None yet
2 participants