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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

BREAKING: Removing stylistic data-attributes #4452

Merged
merged 8 commits into from
Sep 22, 2023
Merged

BREAKING: Removing stylistic data-attributes #4452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9216844
breaking: removing stylistic data attributes from primitives
dbanksdesign Sep 16, 2023
9c0b8ba
fix
dbanksdesign Sep 16, 2023
dac0875
Create afraid-pugs-kiss.md
dbanksdesign Sep 16, 2023
d7feff4
Update .changeset/afraid-pugs-kiss.md
dbanksdesign Sep 21, 2023
109e35a
Merge branch 'next-release/main' into next-release/remove-data-attrs
dbanksdesign Sep 21, 2023
e6a5a61
updates
dbanksdesign Sep 21, 2023
eadea0b
cleaning up tests for caleb
dbanksdesign Sep 21, 2023
401b240
fixing tests
dbanksdesign Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/afraid-pugs-kiss.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@aws-amplify/ui-react": major
---

BREAKING:
* Removing stylistic data-attributes from React primitives
* Update SwitchField classnames to be BEM
* Removing remnants of "countryCode"
2 changes: 0 additions & 2 deletions ...torage/src/components/StorageManager/__tests__/__snapshots__/StorageManager.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@ exports[`StorageManager renders as expected 1`] = `
</p>
<button
class="amplify-button amplify-field-group__control amplify-button--small amplify-storagemanager__file__picker"
data-fullwidth="false"
data-size="small"
type="button"
>
Browse files
Expand Down
8 changes: 0 additions & 8 deletions ...c/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ exports[`FileControl renders as expected when file is uploading 1`] = `
/>
<svg
class="amplify-loader amplify-loader--linear amplify-storagemanager__loader"
data-variation="linear"
role="img"
>
<g>
Expand All @@ -45,8 +44,6 @@ exports[`FileControl renders as expected when file is uploading 1`] = `
</svg>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down Expand Up @@ -108,8 +105,6 @@ exports[`FileControl renders as expected when uploading is paused 1`] = `
/>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down Expand Up @@ -192,7 +187,6 @@ exports[`FileControl renders thumbnails 1`] = `
/>
<svg
class="amplify-loader amplify-loader--linear amplify-storagemanager__loader"
data-variation="linear"
role="img"
>
<g>
Expand All @@ -215,8 +209,6 @@ exports[`FileControl renders thumbnails 1`] = `
</svg>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down
13 changes: 0 additions & 13 deletions .../src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ exports[`FileList renders an alert in case of error 1`] = `
/>
<svg
class="amplify-loader amplify-loader--linear amplify-loader--determinate amplify-storagemanager__loader"
data-variation="linear"
role="img"
>
<g>
Expand Down Expand Up @@ -55,8 +54,6 @@ exports[`FileList renders an alert in case of error 1`] = `
</svg>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down Expand Up @@ -95,7 +92,6 @@ exports[`FileList renders an alert in case of error 1`] = `
</div>
<div
class="amplify-flex amplify-alert amplify-alert--error"
data-variation="error"
role="alert"
>
<span
Expand Down Expand Up @@ -160,7 +156,6 @@ exports[`FileList renders as expected 1`] = `
/>
<svg
class="amplify-loader amplify-loader--linear amplify-loader--determinate amplify-storagemanager__loader"
data-variation="linear"
role="img"
>
<g>
Expand Down Expand Up @@ -192,8 +187,6 @@ exports[`FileList renders as expected 1`] = `
</svg>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down Expand Up @@ -257,7 +250,6 @@ exports[`FileList renders as expected when upload is resumable 1`] = `
/>
<svg
class="amplify-loader amplify-loader--linear amplify-storagemanager__loader"
data-variation="linear"
role="img"
>
<g>
Expand All @@ -280,17 +272,12 @@ exports[`FileList renders as expected when upload is resumable 1`] = `
</svg>
<button
class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small"
data-fullwidth="false"
data-size="small"
data-variation="link"
type="button"
>
Pause
</button>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down
4 changes: 0 additions & 4 deletions ...ponents/StorageManager/ui/FileList/__tests__/__snapshots__/FileRemoveButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ exports[`FileRemoveButton renders as expected 1`] = `
<div>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down Expand Up @@ -42,8 +40,6 @@ exports[`FileRemoveButton renders custom icons from IconProvider 1`] = `
<div>
<button
class="amplify-button amplify-field-group__control amplify-button--small"
data-fullwidth="false"
data-size="small"
type="button"
>
<span
Expand Down
2 changes: 0 additions & 2 deletions .../components/StorageManager/ui/FilePicker/__tests__/__snapshots__/FilePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ exports[`FilePicker renders correctly 1`] = `
<div>
<button
class="amplify-button amplify-field-group__control amplify-button--small amplify-storagemanager__file__picker"
data-fullwidth="false"
data-size="small"
type="button"
>
Pick a file, any file.
Expand Down
20 changes: 0 additions & 20 deletions ...nents/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,9 @@ exports[`ChangePassword renders as expected 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -43,7 +41,6 @@ exports[`ChangePassword renders as expected 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
Copy link
Contributor

@reesscot reesscot Sep 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

This isn't used either? I don't see a corresponding classname above

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Correct, doing a search in the repo for data-fullwidth only comes up with snapshot tests and vue/angular code. No CSS references it.

role="switch"
type="button"
>
Expand Down Expand Up @@ -86,11 +83,9 @@ exports[`ChangePassword renders as expected 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -109,7 +104,6 @@ exports[`ChangePassword renders as expected 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
role="switch"
type="button"
>
Expand Down Expand Up @@ -152,11 +146,9 @@ exports[`ChangePassword renders as expected 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -175,7 +167,6 @@ exports[`ChangePassword renders as expected 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
role="switch"
type="button"
>
Expand Down Expand Up @@ -209,7 +200,6 @@ exports[`ChangePassword renders as expected 1`] = `
</div>
<button
class="amplify-button amplify-field-group__control amplify-button--disabled"
data-fullwidth="false"
disabled=""
type="submit"
>
Expand Down Expand Up @@ -240,11 +230,9 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -263,7 +251,6 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
role="switch"
type="button"
>
Expand Down Expand Up @@ -306,11 +293,9 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -329,7 +314,6 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
role="switch"
type="button"
>
Expand Down Expand Up @@ -372,11 +356,9 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand All @@ -395,7 +377,6 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
aria-checked="false"
aria-label="Show password"
class="amplify-button amplify-field-group__control amplify-field__show-password"
data-fullwidth="false"
role="switch"
type="button"
>
Expand Down Expand Up @@ -429,7 +410,6 @@ exports[`ChangePassword renders as expected with component overrides 1`] = `
</div>
<button
class="amplify-button amplify-field-group__control amplify-button--disabled"
data-fullwidth="false"
disabled=""
type="submit"
>
Expand Down
3 changes: 0 additions & 3 deletions ...rc/components/AccountSettings/DeleteUser/__tests__/__snapshots__/DeleteUser.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ exports[`DeleteUser renders as expected 1`] = `
>
<button
class="amplify-button amplify-field-group__control amplify-button--warning"
data-fullwidth="false"
data-variation="warning"
type="button"
>
Delete Account
Expand All @@ -26,7 +24,6 @@ exports[`DeleteUser renders as expected with components overrides 1`] = `
>
<button
class="amplify-button amplify-field-group__control"
data-fullwidth="false"
type="button"
>
Custom Delete Button
Expand Down
4 changes: 0 additions & 4 deletions ...SignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Facebook',
<div>
<button
class="amplify-button amplify-field-group__control federated-sign-in-button"
data-fullwidth="false"
style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
type="button"
>
Expand All @@ -21,7 +20,6 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Google', te
<div>
<button
class="amplify-button amplify-field-group__control federated-sign-in-button"
data-fullwidth="false"
style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
type="button"
>
Expand All @@ -38,7 +36,6 @@ exports[`FederatedSignInButton renders as expected with { provider: 'LoginWithAm
<div>
<button
class="amplify-button amplify-field-group__control federated-sign-in-button"
data-fullwidth="false"
style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
type="button"
>
Expand All @@ -55,7 +52,6 @@ exports[`FederatedSignInButton renders as expected with { provider: 'SignInWithA
<div>
<button
class="amplify-button amplify-field-group__control federated-sign-in-button"
data-fullwidth="false"
style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
type="button"
>
Expand Down
5 changes: 0 additions & 5 deletions ...react/src/components/Authenticator/shared/__tests__/__snapshots__/FormField.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@ exports[`FormField renders as expected in the happy path 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-invalid="false"
Expand Down Expand Up @@ -48,11 +46,9 @@ exports[`FormField renders as expected in the unhappy path 1`] = `
</label>
<div
class="amplify-flex amplify-field-group amplify-field-group--horizontal"
data-orientation="horizontal"
>
<div
class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
data-orientation="horizontal"
>
<input
aria-describedby="amplify-id-1"
Expand All @@ -74,7 +70,6 @@ exports[`FormField renders as expected in the unhappy path 1`] = `
>
<p
class="amplify-text amplify-text--error"
data-variation="error"
role="alert"
>
Username cannot be empty.
Expand Down
Loading