{"payload":{"feedbackUrl":"https://github.com/orgs/community/discussions/53140","repo":{"id":123198469,"defaultBranch":"main","name":"wonder-blocks","ownerLogin":"Khan","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2018-02-27T22:50:41.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/15455?v=4","public":true,"private":false,"isOrgOwned":true},"refInfo":{"name":"","listCacheKey":"v0:1726780827.0","currentOid":""},"activityList":{"items":[{"before":null,"after":"7cef0eb1b475d78ce5f81870516d7080d77463d0","ref":"refs/heads/choice-fieldset-fix","pushedAt":"2024-09-19T21:20:27.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"Fix a11y issue on RadioGroup and ChoiceGroup","shortMessageHtmlLink":"Fix a11y issue on RadioGroup and ChoiceGroup"}},{"before":"ad7f8e1c3c13bb4128c274eff84e5fe48a4a71ff","after":null,"ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-19T18:04:11.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"}},{"before":"3463bde333e39cbfd8c33cd5e7b744e11f66cacb","after":"6699178d68251b91cf312b38de3a6c73c6f2a4b4","ref":"refs/heads/main","pushedAt":"2024-09-19T18:04:09.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"Version Packages (#2327)\n\nCo-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>","shortMessageHtmlLink":"Version Packages (<a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"2537017895\" data-permission-text=\"Title is private\" data-url=\"https://github.com/Khan/wonder-blocks/issues/2327\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/Khan/wonder-blocks/pull/2327/hovercard\" href=\"https://github.com/Khan/wonder-blocks/pull/2327\">#2327</a>)"}},{"before":"a9abc8764e1542168b91ab9659d885626dd67377","after":"ad7f8e1c3c13bb4128c274eff84e5fe48a4a71ff","ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-19T17:57:08.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"khan-actions-bot","name":"Khan Actions Bot","path":"/khan-actions-bot","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/56267880?s=80&v=4"},"commit":{"message":"Version Packages","shortMessageHtmlLink":"Version Packages"}},{"before":"90d24d7e3aa6305fbc41f75c5fd917631974814a","after":null,"ref":"refs/heads/icon-button-submit","pushedAt":"2024-09-19T17:56:34.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"}},{"before":"659a031d16cad68a2f48cd18a60dc468a38822b1","after":"3463bde333e39cbfd8c33cd5e7b744e11f66cacb","ref":"refs/heads/main","pushedAt":"2024-09-19T17:56:33.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"IconButton: Add type=submit prop to allow submitting forms using the button (#2325)\n\n## Summary:\r\n\r\nThis PR adds a new prop `type` to the `IconButton` component that allows the\r\nbutton to submit a form when clicked or pressed. This is useful when we want to\r\nuse an IconButton to submit a form, for example, a search form.\r\n\r\nThis is done as I noticed that the IconButton component is missing the `type`\r\nand was needed in the search page. The prop is currently set, but the type\r\ndefinition is missing.\r\n\r\nIssue: FEI-5728\r\n\r\n## Test plan:\r\n\r\nDocs:\r\n\r\n- Navigate to /?path=/docs/packages-iconbutton--docs#submitting%20forms\r\n- Verify that the docs make sense.\r\n\r\nInteractive example:\r\n\r\n- Navigate to /?path=/story/packages-iconbutton--submitting-forms\r\n- Verify that the submit action is recorded in the SB `Actions` tab.\r\n\r\n<img width=\"1396\" alt=\"Screenshot 2024-09-19 at 10 14 56 AM\" src=\"https://github.com/user-attachments/assets/1afb059a-6537-494e-af55-8cfe95c962ea\">\n\nAuthor: jandrade\n\nReviewers: beaesguerra, jandrade\n\nRequired Reviewers:\n\nApproved By: beaesguerra\n\nChecks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot\n\nPull Request URL: https://github.com/Khan/wonder-blocks/pull/2325","shortMessageHtmlLink":"IconButton: Add type=submit prop to allow submitting forms using the …"}},{"before":"bf2a6f6a2a0bd06aaf6df8470578fc3252b1556c","after":"90d24d7e3aa6305fbc41f75c5fd917631974814a","ref":"refs/heads/icon-button-submit","pushedAt":"2024-09-19T17:50:29.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"Add aria-label to story","shortMessageHtmlLink":"Add aria-label to story"}},{"before":null,"after":"a9abc8764e1542168b91ab9659d885626dd67377","ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-19T17:49:44.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"khan-actions-bot","name":"Khan Actions Bot","path":"/khan-actions-bot","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/56267880?s=80&v=4"},"commit":{"message":"Version Packages","shortMessageHtmlLink":"Version Packages"}},{"before":"dd2759e5f5c8bc5016cee0773770987a71b28cac","after":null,"ref":"refs/heads/search-field-keyup","pushedAt":"2024-09-19T17:49:20.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"}},{"before":"910e2eb87c9585afc9b15da7d5dbe4f3a9071c9e","after":"659a031d16cad68a2f48cd18a60dc468a38822b1","ref":"refs/heads/main","pushedAt":"2024-09-19T17:49:18.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"SearchField: Add onKeyUp prop (#2326)\n\n## Summary:\n\nThe SearchField component now accepts an `onKeyUp` prop that will be called when\nthe user releases a key while the input is focused.\n\nThis is to bring consistency with the other input components in the library and\nalso to allow for more flexibility when using the SearchField component.\n\nAlso took the opportunity to clear some of the SB argtype descriptions, as we no\nlonger need to duplicate them as of SB 8.0.\n\nNOTE: This will be used as part of the Search page refactor.\n\nIssue: FEI-5728\n\n## Test plan:\n\nVerify that the unit tests pass.\n\nAuthor: jandrade\n\nReviewers: beaesguerra, jandrade\n\nRequired Reviewers:\n\nApproved By: beaesguerra\n\nChecks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️  dependabot\n\nPull Request URL: https://github.com/Khan/wonder-blocks/pull/2326","shortMessageHtmlLink":"SearchField: Add onKeyUp prop (<a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"2536494243\" data-permission-text=\"Title is private\" data-url=\"https://github.com/Khan/wonder-blocks/issues/2326\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/Khan/wonder-blocks/pull/2326/hovercard\" href=\"https://github.com/Khan/wonder-blocks/pull/2326\">#2326</a>)"}},{"before":null,"after":"dd2759e5f5c8bc5016cee0773770987a71b28cac","ref":"refs/heads/search-field-keyup","pushedAt":"2024-09-19T14:16:41.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"SearchField: Add onKeyUp prop","shortMessageHtmlLink":"SearchField: Add onKeyUp prop"}},{"before":null,"after":"bf2a6f6a2a0bd06aaf6df8470578fc3252b1556c","ref":"refs/heads/icon-button-submit","pushedAt":"2024-09-19T14:06:04.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"IconButton: Add type=submit prop to allow submitting forms with the button","shortMessageHtmlLink":"IconButton: Add type=submit prop to allow submitting forms with the b…"}},{"before":"5687f523e2c3291687c62903dd69afd7757e79d7","after":"f19cbf9d4908a8daa2ab986bf3d1aa5d740c97f7","ref":"refs/heads/cb-styles","pushedAt":"2024-09-19T13:59:03.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"Address comments","shortMessageHtmlLink":"Address comments"}},{"before":"a17021ee27d037e18a9935cbb89e2207459a8630","after":"406e9dd7c287cd60d212398aa2f6030acb079396","ref":"refs/heads/labeled-text-field-name","pushedAt":"2024-09-18T21:38:10.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"update docs for name prop","shortMessageHtmlLink":"update docs for name prop"}},{"before":"7197141e7e0d4b855ee3be373d99e8a9d1f66daa","after":"a17021ee27d037e18a9935cbb89e2207459a8630","ref":"refs/heads/labeled-text-field-name","pushedAt":"2024-09-18T21:17:33.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"add test","shortMessageHtmlLink":"add test"}},{"before":"bd2fcf172a6dd6a34f3cbdf11556071755912dc0","after":"7197141e7e0d4b855ee3be373d99e8a9d1f66daa","ref":"refs/heads/labeled-text-field-name","pushedAt":"2024-09-18T17:45:25.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"Add changeset","shortMessageHtmlLink":"Add changeset"}},{"before":null,"after":"bd2fcf172a6dd6a34f3cbdf11556071755912dc0","ref":"refs/heads/labeled-text-field-name","pushedAt":"2024-09-18T17:42:43.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"temporarily create npm snapshot for testing","shortMessageHtmlLink":"temporarily create npm snapshot for testing"}},{"before":"55caccd246b6536b2720b4a05e84abbb6ce08c56","after":"c012815030841534105eeeed22e5c02c59f5df0e","ref":"refs/heads/labeled-field-basics","pushedAt":"2024-09-17T16:53:38.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"add docs for light story","shortMessageHtmlLink":"add docs for light story"}},{"before":"a945104c006e97052e1e279a4fb2d196c5a0b99e","after":"5687f523e2c3291687c62903dd69afd7757e79d7","ref":"refs/heads/cb-styles","pushedAt":"2024-09-16T21:17:47.000Z","pushType":"push","commitsCount":5,"pusher":{"login":"jandrade","name":"Juan Andrade","path":"/jandrade","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/843075?s=80&v=4"},"commit":{"message":"Add clear button","shortMessageHtmlLink":"Add clear button"}},{"before":"1528e1276a9b23a2076ea63b941b7c5cc90e30bb","after":null,"ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-16T17:04:31.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"}},{"before":"61dc4448882b89e0d000947e669985a1713c20de","after":"910e2eb87c9585afc9b15da7d5dbe4f3a9071c9e","ref":"refs/heads/main","pushedAt":"2024-09-16T17:04:29.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"Version Packages (#2323)\n\nCo-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>","shortMessageHtmlLink":"Version Packages (<a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"2528805570\" data-permission-text=\"Title is private\" data-url=\"https://github.com/Khan/wonder-blocks/issues/2323\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/Khan/wonder-blocks/pull/2323/hovercard\" href=\"https://github.com/Khan/wonder-blocks/pull/2323\">#2323</a>)"}},{"before":"7941a90c03d97a8e1b930c80c3e1e9726506bad7","after":"1528e1276a9b23a2076ea63b941b7c5cc90e30bb","ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-16T15:56:36.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"khan-actions-bot","name":"Khan Actions Bot","path":"/khan-actions-bot","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/56267880?s=80&v=4"},"commit":{"message":"Version Packages","shortMessageHtmlLink":"Version Packages"}},{"before":"2d4024ca8ab1b0a771d326cd4fe1aea22769d405","after":null,"ref":"refs/heads/text-field-disabled-focusable","pushedAt":"2024-09-16T15:56:08.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"}},{"before":"2dfd5eb6f4812368bd08c1e61b521c1fc6d67add","after":"61dc4448882b89e0d000947e669985a1713c20de","ref":"refs/heads/main","pushedAt":"2024-09-16T15:56:06.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"Allow TextField to be focusable when disabled (#2320)\n\n## Summary:\r\nFor better accessibility, interactive components in WB can be focusable, even when disabled.\r\nThese changes to TextField include:\r\n\r\n- Setting aria-disabled instead of the disabled attribute\r\n- Disabling event handlers if the disabled prop is true. onFocus and onBlur continues to work if disabled prop is true\r\n- Setting the readonly attribute if the disabled prop is true to prevent interactions with textarea\r\n\r\nThese changes are very similar to the changes applied to the TextArea component in https://github.com/Khan/wonder-blocks/pull/2284\r\n\r\nIssue: WB-1751\r\n\r\n## Test plan:\r\n- Review docs around disabled state\r\n  - TextField (`?path=/docs/packages-form-textfield--docs`)\r\n  - LabeledTextField (`?path=/docs/packages-form-labeledtextfield--docs`)\r\n- Review TextField disabled state (`?path=/story/packages-form-textfield--disabled`)\r\n  - Confirm the user can't type in the TextField if it is disabled\r\n  - Confirm the user can still focus on the TextField if it is disabled \r\n  - Confirm screen readers continue to communicate that the field is disabled\r\n- Review LaeledTextField disabled state (`?path=/story/packages-form-labeledtextfield--disabled`)\r\n\r\n## Screen recording\r\n\r\nKeyboard navigation + voiceover\r\n\r\nhttps://github.com/user-attachments/assets/f106cfb3-600f-4c47-a2fa-8ac744e22282\r\n\r\nhttps://github.com/user-attachments/assets/ff78b8e8-ab55-4eff-bdcc-444ac2f82e89\n\nAuthor: beaesguerra\n\nReviewers: beaesguerra, jandrade\n\nRequired Reviewers:\n\nApproved By: jandrade\n\nChecks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot\n\nPull Request URL: https://github.com/Khan/wonder-blocks/pull/2320","shortMessageHtmlLink":"Allow TextField to be focusable when disabled (<a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"2520447051\" data-permission-text=\"Title is private\" data-url=\"https://github.com/Khan/wonder-blocks/issues/2320\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/Khan/wonder-blocks/pull/2320/hovercard\" href=\"https://github.com/Khan/wonder-blocks/pull/2320\">#2320</a>)"}},{"before":"c41f53f37006eb60b0db8ab673c49dd3557872c7","after":"2d4024ca8ab1b0a771d326cd4fe1aea22769d405","ref":"refs/heads/text-field-disabled-focusable","pushedAt":"2024-09-16T15:46:42.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"add changeset","shortMessageHtmlLink":"add changeset"}},{"before":"5d5cdb57c5880a77fc8342268369a323b856eb08","after":"c41f53f37006eb60b0db8ab673c49dd3557872c7","ref":"refs/heads/text-field-disabled-focusable","pushedAt":"2024-09-16T15:46:15.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"add changeset","shortMessageHtmlLink":"add changeset"}},{"before":"2dba027abfe1e490516daf46882e231d0c5ac6fb","after":"5d5cdb57c5880a77fc8342268369a323b856eb08","ref":"refs/heads/text-field-disabled-focusable","pushedAt":"2024-09-16T15:43:15.000Z","pushType":"force_push","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"Updated TextField & TextArea styling (for consistency and addresses cropped outline) (#2311)\n\n## Summary:\r\n\r\nWork was initially done in https://github.com/Khan/wonder-blocks/pull/2302 to update the TextField state styling so it was consistent with other components like SingleSelect, MultiSelect, and TextArea. The new styling had some issues in webapp where the focus outline would get cropped off if an ancestor element had `overflow: hidden`. The new styles were reverted in https://github.com/Khan/wonder-blocks/pull/2309 to unblock other WB changes at the time. This PR re-applies those styles and addresses the focus outline issue in both the TextField and TextArea components.\r\n\r\nThe cropped focus outline issue is resolved by making sure the outlines are within the component. This makes it so the outline is never cropped off if a parent or ancestor element has `overflow: hidden`. The changes that address the outline issue are (see https://github.com/Khan/wonder-blocks/pull/2311/commits/51d9e4f5a87a749542a62359802aeac1cf0733eb):\r\n- using a negative offset for outlines so that they appear within the component (instead of outside)\r\n- simplifying outline styling by removing the box-shadow styling. Only border + outline are used for styling now\r\n\r\nOther alternatives considered:\r\n- Keeping the outline outside and adding additional padding + negative margin so there's enough space for the outline - I think adding spacing around our components isn't ideal because spacing is often added to the components and would override the built in spacing\r\n- Adding the outline styles to a pseudo element (`:after`)  - doesn't work with input elements\r\n- Continue using box-shadow - box-shadow styling also gets cropped out. Could use `inset` option though. I think using outline simplifies things though!\r\n\r\n## Test Plan\r\n- Confirm that the states for TextField and TextArea are as expected. Note: I added `overflow: hidden` to the component variant stories to simulate the issue (see before & after screenshots)\r\n  - TextField `?path=/docs/packages-form-textfield-all-variants--docs`\r\n  - TextArea `?path=/docs/packages-form-textarea-all-variants--docs`\r\n\r\n| Before | After |\r\n| --- | --- |\r\n| <img width=\"1840\" alt=\"Screenshot 2024-08-29 at 8 58 51 AM\" src=\"https://github.com/user-attachments/assets/a9e30b3b-39f2-4807-be14-0554b862542e\"> | <img width=\"1840\" alt=\"Screenshot 2024-08-29 at 8 59 06 AM\" src=\"https://github.com/user-attachments/assets/0d812895-5217-496a-ba72-8c312a246168\"> |\r\n| <img width=\"1840\" alt=\"Screenshot 2024-08-29 at 8 59 37 AM\" src=\"https://github.com/user-attachments/assets/0f761996-ddaf-44be-80d7-ac14b28a89a4\"> | <img width=\"1840\" alt=\"Screenshot 2024-08-29 at 8 59 14 AM\" src=\"https://github.com/user-attachments/assets/83070398-b67a-47e3-9ba4-0886dd097956\"> | \r\n\r\n- Confirmed in webapp that focus outline is not cropped off in TextArea and TextField components \r\n\r\nIssue: WB-1746\n\nAuthor: beaesguerra\n\nReviewers: jandrade\n\nRequired Reviewers:\n\nApproved By: jandrade\n\nChecks: ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ⏭️  Publish npm snapshot, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ gerald, ⌛ undefined\n\nPull Request URL: https://github.com/Khan/wonder-blocks/pull/2311","shortMessageHtmlLink":"Updated TextField &amp; TextArea styling (for consistency and addresses c…"}},{"before":null,"after":"7941a90c03d97a8e1b930c80c3e1e9726506bad7","ref":"refs/heads/changeset-release/main","pushedAt":"2024-09-16T15:35:33.000Z","pushType":"branch_creation","commitsCount":0,"pusher":{"login":"khan-actions-bot","name":"Khan Actions Bot","path":"/khan-actions-bot","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/56267880?s=80&v=4"},"commit":{"message":"Version Packages","shortMessageHtmlLink":"Version Packages"}},{"before":"4543994e4c3d75c845f1db8439f6b76eda0b761b","after":"2dba027abfe1e490516daf46882e231d0c5ac6fb","ref":"refs/heads/text-field-disabled-focusable","pushedAt":"2024-09-16T15:35:18.000Z","pushType":"push","commitsCount":8,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"},"commit":{"message":"Merge branch 'main' into text-field-disabled-focusable","shortMessageHtmlLink":"Merge branch 'main' into text-field-disabled-focusable"}},{"before":"52cfc81f7aed413da1530a40a5b3cd6b3c7ee13d","after":null,"ref":"refs/heads/new-text-field-styling","pushedAt":"2024-09-16T15:35:08.000Z","pushType":"branch_deletion","commitsCount":0,"pusher":{"login":"beaesguerra","name":"Bea Esguerra","path":"/beaesguerra","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/14334617?s=80&v=4"}}],"hasNextPage":true,"hasPreviousPage":false,"activityType":"all","actor":null,"timePeriod":"all","sort":"DESC","perPage":30,"cursor":"djE6ks8AAAAEu1SE0AA","startCursor":null,"endCursor":null}},"title":"Activity · Khan/wonder-blocks"}