feat(ui): component theming #5170
Conversation
Co-authored-by: Caleb Pollman <[email protected]>
|
dbanksdesign
changed the title
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| it('should work with top-level modifiers', () => { | ||
| const classname = ratingClassnames({ _modifiers: 'large' }); | ||
| // @ts-expect-error | ||
| const badClassname = ratingClassnames({ _modifiers: 'foo' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| it('should work with elements without modifiers', () => { | ||
| const classname = ratingClassnames({ _element: 'item' }); | ||
| // @ts-expect-error | ||
| const badClassname = ratingClassnames({ _element: 'foo' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| it('should work with elements with modifiers', () => { | ||
| const classname = ratingClassnames({ _element: { icon: 'empty' } }); | ||
| // @ts-expect-error | ||
| const badClassname = ratingClassnames({ _element: 'foo' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| _modifiers: [null, undefined], | ||
| }); | ||
|
|
||
| const badClassname = avatarClassnames({ |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| // these should all work and have type-safety | ||
| const c4 = className({ _element: 'icon' }); | ||
| const c5 = className(); | ||
| const c6 = className({ _element: 'icon', _modifiers: 'large' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| const c4 = className({ _element: 'icon' }); | ||
| const c5 = className(); | ||
| const c6 = className({ _element: 'icon', _modifiers: 'large' }); | ||
| const c7 = className({ _modifiers: 'small' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| // These should all have TypeScript errors | ||
|
|
||
| // @ts-expect-error | ||
| const c1 = className({ _element: 'foo' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| const c1 = className({ _element: 'foo' }); | ||
|
|
||
| // @ts-expect-error | ||
| const c2 = className({ _element: { icon: 'foo' } }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| const c2 = className({ _element: { icon: 'foo' } }); | ||
|
|
||
| // @ts-expect-error | ||
| const c3 = className({ _modifiers: 'foo' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| import { | ||
| Alert, | ||
| Badge, | ||
| Button, | ||
| Flex, | ||
| Message, | ||
| Text, | ||
| } from '@aws-amplify/ui-react'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| @@ -0,0 +1,91 @@ | |||
| import { createComponentTheme } from '../createTheme'; | |||
| import { WebTokens } from '../tokens'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| import { | ||
| Modifiers, | ||
| BaseProperties, | ||
| Elements, | ||
| ColorTheme, | ||
| BaseTheme, | ||
| } from './utils'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| }; | ||
| }; | ||
|
|
||
| const test = createComponentTheme({ |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| import { AlertTheme, alertTheme } from './alert'; | ||
| import { AutoCompleteTheme } from './autocomplete'; | ||
| import { BadgeTheme } from './badge'; | ||
| import { BreadcrumbsTheme } from './breadcrumbs'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| return className; | ||
| } | ||
|
|
||
| const c = createComponentClasses({ name: 'alert' }); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| @@ -0,0 +1,32 @@ | |||
| 'use client'; | |||
Check warning
Code scanning / CodeQL
Unknown directive Warning
| @@ -0,0 +1,41 @@ | |||
| 'use client'; | |||
Check warning
Code scanning / CodeQL
Unknown directive Warning
| @@ -0,0 +1,7 @@ | |||
| 'use client'; | |||
Check warning
Code scanning / CodeQL
Unknown directive Warning
Description of changes
Issue #, if available
Description of how you validated changes
Checklist
yarn testpasses and tests are updated/addedsideEffectsfield updatedBy submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.