-
Notifications
You must be signed in to change notification settings - Fork 535
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
Changes alignment of form control validation message icon #3121
Conversation
🦋 Changeset detectedLatest commit: 0b8d5cf The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
size-limit report 📦
|
src/_InputValidation.tsx
Outdated
@@ -45,7 +45,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id | |||
}} | |||
> | |||
{IconComponent && ( | |||
<Box as="span" mr={1} sx={{display: 'flex'}} aria-hidden="true"> | |||
<Box as="span" display="flex" mr={1} sx={{transform: 'translateY(2px)'}} aria-hidden="true"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to deal with a similar problem (offsetting icon to align with the text). So I am wondering:
Why do you prefer translate
vs margin?
Is it correct to assume that alignment will break if user changes the font or font size?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, the alignment would break if we changed the font size, but it doesn't break if the user zooms their browser in or out.
I'm a little confused by the failing snapshots. I'm going to pull from |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In ActionList, we handle this slightly differently. I'm not sure if its a better solution but wanted to share. This uses new typography design tokens but I think just using the value for now is best.
So for the container, align-items: start
For the icon wrapper:
min-height: 20px;
align-items: center;
For the label text:
line-height: calc(20/12);
Result in Firefox:
With translate, it looks slightly off in Firefox:
Hey! Any updates on this PR? |
@GlebIrovich - I'm going to try and incorporate @langermank 's feedback today. I'm also not sure if it's actually better, but I'm not opposed to it. I'll try and nudge for more reviews once I'm done. |
@langermank - which design tokens are you referencing in your solution? I checked https://primer.style/primitives/storybook/?path=/story/typography-functional--caption and the related stories, but couldn't find anything that matched I know you said we should start with the values for now, but I'd like to leave a comment referencing the correct tokens to use when we update PRC to use the latest token system. If there's no design tokens that match these values, I'd prefer to just keep the |
@mperrotti I had the values wrong in my example. I thought it would be easier to just make this same fix in PVC since we'll need to do it anyways! This is what I'm thinking: primer/view_components#2032 We don't have a token for that |
@langermank - I wasn't comfortable using a base token for this, so I came up with a formula that achieves the same result :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! 🚀
* ci(release-schedule): update format for previous issue id * ci(release-schedule): use tagged template literals for assignees row * docs: update to storybook v7 (#3298) * docs: update to storybook v7 * ci: update storybook build command * docs: fix typescript errors in stories * chore: update build-storybook custom script * test(e2e): update root selector for e2e tests * chore: add storybook/csf dependency * test: update lockfile test --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Jdrush89/tree focus bug (#3300) * Adding example of focus bug * Not using focusInStrategy when clicking * Clearing mousedown state correctly * Adding changeset * Removing unused import * Moving mouseup handler * feat(npm): add experimental entrypoint (#3295) * feat(npm): add experimental entrypoint * chore: add changeset --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * ci: release notification (#3318) Co-authored-by: Josh Black <joshblack@github.com> * SelectPanel: Add filter input label and description (#3312) * Make placeholderText prop optional * Add `inputLabel` prop * Add filter input description * Create early-beds-whisper.md * Document inputLabel prop * Update src/SelectPanel/SelectPanel.docs.json * Update generated/components.json --------- Co-authored-by: colebemis <colebemis@users.noreply.github.com> * SelectPanel: Add `title` prop (#3311) * Add a title prop to SelectPanel * Update generated/components.json * Create small-queens-vanish.md * Allow title to be ReactElement * Update SelectPanel stories * Update generated/components.json * Update snapshots --------- Co-authored-by: colebemis <colebemis@users.noreply.github.com> * SelectPanel: Announce changes to screen readers (#3316) * SelectPanel: Announce filter changes to screenreaders * Create rare-humans-watch.md * Update formatting * chore(dependencies): update @typescript-eslint/* (#3307) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Remove chroma-js dependency (#3325) * remove chroma.valid to drop chroma-js dependency * Create rotten-dogs-hang.md * Update accessibility-alt-text-bot.yml (#3326) * Update accessibility-alt-text-bot.yml ### What The accessibility-alt-text-bot workflow does not have permissions to write a comment on an issue. This is likely due to how permissions are setup in this repo. In order to keep permissions, at the repo level, unchanged, we need to add permission directly to the workflow. I also took this as an opportunity to bump the alt-text-bot version and give you access to reminders in discussions * format * add contents * add contents * Remove aria-hidden=true from spans with required asterisk (#3320) * Remove aria-hidden=true from spans with required asterisk * Create pink-beds-fetch.md --------- Co-authored-by: Cole Bemis <colebemis@github.com> * Update `PageLayout` docs around `<main>` usage (#3323) * Update `PageLayout` docs around `<main>` usage * Update generated/components.json * Fix links --------- Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com> * ci: update ci workflow to run against next-major branch (#3329) * NavList: Fix group dividers (#3328) * Fix NavLIst.Group dividers * Use first-of-type instead of first-child * Update snapshots and stories * Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247) * Update FilteredActionList to use non-deprecated ActionList. * Use non-deprecated ActionList in FilteredActionList. * Fix a11y issues in FilteredActionList story. * Add prop to hide selection component if needed. * Remove unused hook import. * Get SavedReplies to look as it did with deprecated ActionList. * Fix failing test. * Create weak-jokes-chew.md * Update generated/components.json * Fix themePreval snapshot. * Linting fixes. * Fix type-check errors. * Update themePreval snapshot again. * Fix themePreval snapshot to match origin. Unsure why it's not generating the same way. * Hide selections in MarkdownEditor saved replies. * Remove hideSelection prop and add defaultRenderFn to FilteredActionList so these don't have to be defined manually everywhere. * Fix selection rendering (needed explicit selected boolean) and fix SelectPanel docs. * Pass selectionVariant illegally to SelectPanel in src/MarkdownEditor/_SavedReplies.tsx so Selection components don't render. * Remove remaining references of hideSelection prop. * Update changeset to reflect that changes impact SelectPanel. * Remove renderFn prop from SelectPanel and use default for FilteredActionList, which seems to cover most cases. * Fix truncation in SavedReplies descriptions. * Update generated/components.json * Fix linting error. * Don't make renderFn a prop (if we need to make this configurable, we can expose it later. Use maxWidth 100% for SavedReplies truncation. * Use showDividers prop in SelectPanel story. * Formatting. * Add temporary support for showItemDividers prop to SelectPanel to keep backwards compatibility. * Support passing deprecated showItemDividers prop in ActionList. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Add PostCSS color var fallback for upcoming CSS work (#3278) * add fallback plugin * Update rollup.config.js Co-authored-by: Josh Black <joshblack@github.com> * remove fallbacks from source * add back conflict free package-lock * use lockfileVersion 3 --------- Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Move theme dependencies on lodash from devDependencies to dependencies (#3332) * move theme deps from devDependencies * Create eleven-sloths-laugh.md * chore(deps-dev): bump terser from 5.16.1 to 5.17.6 (#3336) Bumps [terser](https://github.com/terser/terser) from 5.16.1 to 5.17.6. - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](terser/terser@v5.16.1...v5.17.6) --- updated-dependencies: - dependency-name: terser dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump micromark-extension-mdxjs from 1.0.0 to 1.0.1 (#3337) Bumps [micromark-extension-mdxjs](https://github.com/micromark/micromark-extension-mdxjs) from 1.0.0 to 1.0.1. - [Release notes](https://github.com/micromark/micromark-extension-mdxjs/releases) - [Commits](micromark/micromark-extension-mdxjs@1.0.0...1.0.1) --- updated-dependencies: - dependency-name: micromark-extension-mdxjs dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @storybook/addon-essentials from 7.0.12 to 7.0.18 (#3338) Bumps [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials) from 7.0.12 to 7.0.18. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/v7.0.18/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v7.0.18/code/addons/essentials) --- updated-dependencies: - dependency-name: "@storybook/addon-essentials" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ci(vrt): update build storybook step (#3333) * chore(deps-dev): bump prettier from 2.8.1 to 2.8.8 (#3335) * chore(deps-dev): bump prettier from 2.8.1 to 2.8.8 Bumps [prettier](https://github.com/prettier/prettier) from 2.8.1 to 2.8.8. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@2.8.1...2.8.8) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: run prettier --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346) * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler (#3163) * test: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler Failing test for #3162 * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`ߴs `onSelect` handler * add storybook example: Delayed Menu Close * update docs * docs: changeset * Update changelog --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Update generated/components.json --------- Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com> Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com> * Loosen `@primitives` dependency (#3350) * add caret * Create fluffy-pants-play.md * Bump alt-text-bot: get alt text reminders on discussion comments (#3351) * Changes alignment of form control validation message icon (#3121) * changes alignment of validation message icon * Create .changeset/big-days-obey.md * updates snapshots * updates snapshots again * refactors layout styles * test(vrt): update snapshots --------- Co-authored-by: joshblack <joshblack@users.noreply.github.com> * Update release-schedule.yml (#3342) * Update release-schedule.yml (#3345) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Joshua Rush <jdrush89@gmail.com> Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: colebemis <colebemis@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Kendall Gassner <kendallgassner@github.com> Co-authored-by: Adriana Babakanian <adrianababakanian@github.com> Co-authored-by: Tyler Jones <tylerjdev@github.com> Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com> Co-authored-by: Jeremy Neal <radglob@github.com> Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com>
* Update `next-major` with changes from `main` (#3354) * ci(release-schedule): update format for previous issue id * ci(release-schedule): use tagged template literals for assignees row * docs: update to storybook v7 (#3298) * docs: update to storybook v7 * ci: update storybook build command * docs: fix typescript errors in stories * chore: update build-storybook custom script * test(e2e): update root selector for e2e tests * chore: add storybook/csf dependency * test: update lockfile test --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Jdrush89/tree focus bug (#3300) * Adding example of focus bug * Not using focusInStrategy when clicking * Clearing mousedown state correctly * Adding changeset * Removing unused import * Moving mouseup handler * feat(npm): add experimental entrypoint (#3295) * feat(npm): add experimental entrypoint * chore: add changeset --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * ci: release notification (#3318) Co-authored-by: Josh Black <joshblack@github.com> * SelectPanel: Add filter input label and description (#3312) * Make placeholderText prop optional * Add `inputLabel` prop * Add filter input description * Create early-beds-whisper.md * Document inputLabel prop * Update src/SelectPanel/SelectPanel.docs.json * Update generated/components.json --------- Co-authored-by: colebemis <colebemis@users.noreply.github.com> * SelectPanel: Add `title` prop (#3311) * Add a title prop to SelectPanel * Update generated/components.json * Create small-queens-vanish.md * Allow title to be ReactElement * Update SelectPanel stories * Update generated/components.json * Update snapshots --------- Co-authored-by: colebemis <colebemis@users.noreply.github.com> * SelectPanel: Announce changes to screen readers (#3316) * SelectPanel: Announce filter changes to screenreaders * Create rare-humans-watch.md * Update formatting * chore(dependencies): update @typescript-eslint/* (#3307) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Remove chroma-js dependency (#3325) * remove chroma.valid to drop chroma-js dependency * Create rotten-dogs-hang.md * Update accessibility-alt-text-bot.yml (#3326) * Update accessibility-alt-text-bot.yml ### What The accessibility-alt-text-bot workflow does not have permissions to write a comment on an issue. This is likely due to how permissions are setup in this repo. In order to keep permissions, at the repo level, unchanged, we need to add permission directly to the workflow. I also took this as an opportunity to bump the alt-text-bot version and give you access to reminders in discussions * format * add contents * add contents * Remove aria-hidden=true from spans with required asterisk (#3320) * Remove aria-hidden=true from spans with required asterisk * Create pink-beds-fetch.md --------- Co-authored-by: Cole Bemis <colebemis@github.com> * Update `PageLayout` docs around `<main>` usage (#3323) * Update `PageLayout` docs around `<main>` usage * Update generated/components.json * Fix links --------- Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com> * ci: update ci workflow to run against next-major branch (#3329) * NavList: Fix group dividers (#3328) * Fix NavLIst.Group dividers * Use first-of-type instead of first-child * Update snapshots and stories * Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247) * Update FilteredActionList to use non-deprecated ActionList. * Use non-deprecated ActionList in FilteredActionList. * Fix a11y issues in FilteredActionList story. * Add prop to hide selection component if needed. * Remove unused hook import. * Get SavedReplies to look as it did with deprecated ActionList. * Fix failing test. * Create weak-jokes-chew.md * Update generated/components.json * Fix themePreval snapshot. * Linting fixes. * Fix type-check errors. * Update themePreval snapshot again. * Fix themePreval snapshot to match origin. Unsure why it's not generating the same way. * Hide selections in MarkdownEditor saved replies. * Remove hideSelection prop and add defaultRenderFn to FilteredActionList so these don't have to be defined manually everywhere. * Fix selection rendering (needed explicit selected boolean) and fix SelectPanel docs. * Pass selectionVariant illegally to SelectPanel in src/MarkdownEditor/_SavedReplies.tsx so Selection components don't render. * Remove remaining references of hideSelection prop. * Update changeset to reflect that changes impact SelectPanel. * Remove renderFn prop from SelectPanel and use default for FilteredActionList, which seems to cover most cases. * Fix truncation in SavedReplies descriptions. * Update generated/components.json * Fix linting error. * Don't make renderFn a prop (if we need to make this configurable, we can expose it later. Use maxWidth 100% for SavedReplies truncation. * Use showDividers prop in SelectPanel story. * Formatting. * Add temporary support for showItemDividers prop to SelectPanel to keep backwards compatibility. * Support passing deprecated showItemDividers prop in ActionList. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Add PostCSS color var fallback for upcoming CSS work (#3278) * add fallback plugin * Update rollup.config.js Co-authored-by: Josh Black <joshblack@github.com> * remove fallbacks from source * add back conflict free package-lock * use lockfileVersion 3 --------- Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Move theme dependencies on lodash from devDependencies to dependencies (#3332) * move theme deps from devDependencies * Create eleven-sloths-laugh.md * chore(deps-dev): bump terser from 5.16.1 to 5.17.6 (#3336) Bumps [terser](https://github.com/terser/terser) from 5.16.1 to 5.17.6. - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](terser/terser@v5.16.1...v5.17.6) --- updated-dependencies: - dependency-name: terser dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump micromark-extension-mdxjs from 1.0.0 to 1.0.1 (#3337) Bumps [micromark-extension-mdxjs](https://github.com/micromark/micromark-extension-mdxjs) from 1.0.0 to 1.0.1. - [Release notes](https://github.com/micromark/micromark-extension-mdxjs/releases) - [Commits](micromark/micromark-extension-mdxjs@1.0.0...1.0.1) --- updated-dependencies: - dependency-name: micromark-extension-mdxjs dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @storybook/addon-essentials from 7.0.12 to 7.0.18 (#3338) Bumps [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials) from 7.0.12 to 7.0.18. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/v7.0.18/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v7.0.18/code/addons/essentials) --- updated-dependencies: - dependency-name: "@storybook/addon-essentials" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ci(vrt): update build storybook step (#3333) * chore(deps-dev): bump prettier from 2.8.1 to 2.8.8 (#3335) * chore(deps-dev): bump prettier from 2.8.1 to 2.8.8 Bumps [prettier](https://github.com/prettier/prettier) from 2.8.1 to 2.8.8. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@2.8.1...2.8.8) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: run prettier --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346) * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler (#3163) * test: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler Failing test for #3162 * fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`ߴs `onSelect` handler * add storybook example: Delayed Menu Close * update docs * docs: changeset * Update changelog --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Update generated/components.json --------- Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com> Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com> * Loosen `@primitives` dependency (#3350) * add caret * Create fluffy-pants-play.md * Bump alt-text-bot: get alt text reminders on discussion comments (#3351) * Changes alignment of form control validation message icon (#3121) * changes alignment of validation message icon * Create .changeset/big-days-obey.md * updates snapshots * updates snapshots again * refactors layout styles * test(vrt): update snapshots --------- Co-authored-by: joshblack <joshblack@users.noreply.github.com> * Update release-schedule.yml (#3342) * Update release-schedule.yml (#3345) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Joshua Rush <jdrush89@gmail.com> Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: colebemis <colebemis@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Kendall Gassner <kendallgassner@github.com> Co-authored-by: Adriana Babakanian <adrianababakanian@github.com> Co-authored-by: Tyler Jones <tylerjdev@github.com> Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com> Co-authored-by: Jeremy Neal <radglob@github.com> Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com> * Remove support for for Breadcrumb, SubNav, TabNav, UnderlineNav (#3319) * Remove support for for Breadcrumb, SubNav, TabNav, UnderlineNav * update snapshots after removing activeClassName test * update docs to remove activeClassName instructions * Remove extralarge from Tokens (#3313) * Remove extralarge from Tokens * add changeset * chore: include reverted changes * chore: include reverted changes * Update minimum version of react and react-dom to v18 (#3240) * feat(project): update React minimum version to 18 * chore: add changeset * ci: remove type-check (17) option * test: remove console.error spy --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Button API alignment (#2893) * copy from other pr * snippy snaps * Create .changeset/flat-onions-sort.md * color swaps * snappy snips * add missing type * use the correct prop for ActionMenu.Button * type fixes * fix docs * snaps * Update flat-onions-sort.md * fix merge conflict? * change to count prop * remove Button.Counter in favor of count prop * Hoping to revert some unnecessary snaps diff * update Button.Counter to use count prop * update changeset and remove outine button examples from the story * Update generated/components.json * test: remove outline tests * test(e2e): remove outline tests * test(e2e): remove outdated snapshots * test(vrt): update snapshots * fix stories, fix count and trailing vis conflict * test(vrt): update snapshots --------- Co-authored-by: Armağan <broccolinisoup@github.com> Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: langermank <langermank@users.noreply.github.com> * Deprecate old filter components (#3396) * deprecates FilterList and FilteredSearch components * 3230 Refactor internal components - TextInputInnerVisualSlot (#3373) * refactor(TextInputInnerVisualSlot): moved to internal * fix import * deprecates FilterList and FilteredSearch * Update generated/components.json * fixes broken import * fixes type errors * fixes FilteredSearch docs data import path --------- Co-authored-by: Amanda Brown <amanda.brown@testdouble.com> Co-authored-by: mperrotti <mperrotti@users.noreply.github.com> * Remove 'warning' status from form validation (#3414) * 3230 Refactor internal components - TextInputInnerVisualSlot (#3373) * refactor(TextInputInnerVisualSlot): moved to internal * fix import * removes 'warning' status from form validation * Update generated/components.json * adds changeset * Update old-coats-sniff.md --------- Co-authored-by: Amanda Brown <amanda.brown@testdouble.com> Co-authored-by: mperrotti <mperrotti@users.noreply.github.com> * Remove PageLayout.Pane position prop. (#3386) * Remove position prop and reorganize PageLayout stories to match previous layout. * Create yellow-windows-accept.md * Remove position references to fix type checks. * Update generated/components.json * Linting fixes. * Fix stories by moving panes around. * Remove position prop in NavList story. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Fix type errors in next-major (#3456) * fixes type errors that appeared during v36 updates * adds changeset * re-add ts-expect-error to CounterLabel ref * fixes circular depency in CheckboxOrRadioGroup (I think) * testing a fix for CI type errors * testing ANOTHER fix for CI type errors * testing ONE MORE fix for CI type erros on the 'size' check * removes janky attempt at fixing CI 'size' check's type error * replace Button2 with Button * Button major changes leadingIcon-> leadingVisual updates on Markdown comp * update props on the story * try not exporting Button2 * try exporting Button2 as Button2 --------- Co-authored-by: Armagan Ersoz <broccolinisoup@github.com> * Use createRoot instead of ReactDOM.render for React 18 compatibility. (#3367) * Use createRoot instead of ReactDOM.render for React 18 compatibility. * Create lucky-coins-guess.md * Updated snapshots. * Refactor Autocomplete to use the newest ActionList (#3387) * started refactoring the Autocomplete component to use the new ActionList * Gets Autocomplete working with latest ActionList Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * updates snapshots * code improvements * adds changeset * fixes docs typo, updates snapshots * fixes bug in useFocusZone, updates snapshots * updates snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Make styled-components types an optional peer peer dependency (#3399) * makes @types/styled-components an optional peer dependency * adds changeset * rm unused ts-expect-error comment * chore(npm): add types packages as optional peer deps (#3509) * chore(npm): add types packages as optional peer deps * chore(deps): update lockfile * ci: update consumer test workflow to use npm pack versus npm link * ci: reset package workspace --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> --------- Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * test(e2e): update snapshots * Remove deprecated components that have no usage across (#3542) * Remove BorderBox * snapshot update and changeset for BorderBox * Remove ChoiceFieldset * Remove Flex * Remove Grid * Remove Position * Remove Dropdown * Remove FormGroup * Remove Select * Remove InputField * Remove Label * remove snaps for Position * update snaps * add changed components * syntax fix * test(vrt): update snapshots --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com> * Remove `DropdownButton` and `DropdownMenu` from deprecated and update the usages across (#3544) * Remove DropdownMenu and DropdownButton and update usages across * copy ts expect from main and add changeset * clean up * unused ts expect * Remove deprecated ActionList from SelectPanel and FilteredActionList. (#3538) * Remove deprecated ActionList from SelectPanel and FilteredActionList. * Create fluffy-waves-kiss.md * Add changed components to changeset. * test(vrt): update snapshots * It would appear we do not care about FilteredActionList in changesets. * Don't introduce type changes. * Format and linting. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Use IconButton instead of ButtonClose in v1 Dialog. (#3557) * Use IconButton in place of deprecated ButtonClose in v1 Dialog component. * Create poor-wasps-stare.md * Fix linting issue in src/Dialog.tsx. * chore: address eslint violations * chore: update snapshots * Remove components from draft and move UnderlineNav2 to main bundle (#3260) * move draft UnderlinNav to main bundle * Update generated/components.json * Remove components from draft bundle * fix broken file paths * snaps * fix as you find errors * snaps * update docs path * update draft imports * linting * Remove act() warning check * test fixes * update e2e tests * remove Drafts from underlinenav stories title * add code back in that was lost in the merge conflict * Update generated/components.json * add changed components * test(vrt): update snapshots * chore: add NavList back to drafts bundle for gatsby theme compat * Fix merge conflict issues and clean up * name fix and remove behaveascomponent --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Fix misc issues with Dialog v2 (#3444) * fixes styling issues * deprecates old Dialog component * Update generated/components.json * moves Dialog and ConfirmationDialog to drafts directory * adds line breaks in Dialog v2 props table's Type column to preserve the readability of the Descriptioncolumn * adds changeset * Update generated/components.json * fixes import path in deprecated Dialog types test * updates snapshots * updates import path for ConfirmationDialog checkExports test * updates tests * NavList snapshot updates for some reason? * un-deprecate Dialog * mv draft Dialog types test * test(vrt): update snapshots * moves test files * use IconButton instead of CloseButton * correct path to prop data in draft Dialog docs * update confirmation button snapshots * updates ConfirmationDialog tests for the newer Button --------- Co-authored-by: mperrotti <mperrotti@users.noreply.github.com> Co-authored-by: Armagan Ersoz <broccolinisoup@github.com> * ActionList item should have `border-radius` on hover with `full` variant (#3556) * border radius * Create shaggy-insects-march.md --------- Co-authored-by: Josep Martins <josepmartins@github.com> * chore(deps): update styled-components and related dependencies to v5 (#3569) * chore(deps): update styled-components and related dependencies to v5 * test(vrt): update snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * test(e2e): update snapshots * chore: address typescript errors * chore: update lockfile * test: update snapshots * fix: re-add useConfirm in public entrypoint * test: update snapshots * Revert "test: update snapshots" This reverts commit b935de9. * Revert "fix: re-add useConfirm in public entrypoint" This reverts commit e441725. * Revert "Fix misc issues with Dialog v2 (#3444)" This reverts commit d3146ce. * chore: update lockfiles * chore(examples): update package-lock.json * Revert "Remove deprecated ActionList from SelectPanel and FilteredActionList. (#3538)" This reverts commit 3ad237f. * Remove StyledOcticon * Revert "Remove StyledOcticon" This reverts commit 273438e. * test(vrt): add vrt snapshots * chore: update lockfile * Remove StyledOcticon component (#3735) * Remove StyledOcticon * Create kind-readers-grab.md * Update kind-readers-grab.md * revert changes * Rebuild package-lock.json * Update package-lock.json * Update kind-readers-grab.md * Update kind-readers-grab.md * test(vrt): add Octicon snapshots * chore: address typescript violations * docs(PageHeader): update leadingIcon, trailingIcon to visual * chore: update lockfile * fix(Autocomplete): use children over text if it exists for output * next-major: Update docs and changeset for #3386 and #3367 (#3858) * Update pagelayout pane changeset * Update docs for PageLayout.Pane * Update SplitPageLayout.Pane docs * Update yellow-windows-accept.md * positionWhenNarrow is never actually used * delete deprecated prop from test * add components changed to changeset * Update changeset for ConfirmationDialog * revert: restore original PageLayout behavior (#3865) * revert: restore original PageLayout behavior * test(e2e): update snapshots * test(e2e): update snapshots * chore: remove changeset --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * docs: update stories with new type changes * chore(deps): update to canary doctocat release * chore: update pacakge-lock.json * chore(examples): update package-lock.json * test: update snapshots --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Joshua Rush <jdrush89@gmail.com> Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: colebemis <colebemis@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Kendall Gassner <kendallgassner@github.com> Co-authored-by: Adriana Babakanian <adrianababakanian@github.com> Co-authored-by: Tyler Jones <tylerjdev@github.com> Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com> Co-authored-by: Jeremy Neal <radglob@github.com> Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com> Co-authored-by: Armağan <broccolinisoup@github.com> Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com> Co-authored-by: langermank <langermank@users.noreply.github.com> Co-authored-by: Amanda Brown <amanda.brown@testdouble.com> Co-authored-by: mperrotti <mperrotti@users.noreply.github.com> Co-authored-by: Josep Martins <josepmartins@github.com> Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Changes the alignment of the validation message icon to be center-aligned with the first line of text.
Screenshots
Before:
After:
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.