Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

WIP: refactor(styles): add selector information #1301

Closed
wants to merge 31 commits into from
Closed

WIP: refactor(styles): add selector information #1301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
f005954
introduce selector/style tuple style files
levithomason May 8, 2019
34ef278
cleanup status styles and variables
levithomason May 8, 2019
276a88b
refactor: avatarStyles to tuple syntax
levithomason May 8, 2019
eb15a88
fix: use relative imports
levithomason May 8, 2019
fb864a9
wip
levithomason Jun 18, 2019
3a95176
Merge branch 'master' into refactor/styles
levithomason Jul 11, 2019
5f33430
merge master, remove color prop anti-patterns
levithomason Oct 29, 2019
e5ab3a5
Converted menu styles
Oct 29, 2019
6675f14
Fixed ts errors
mnajdova Oct 30, 2019
a72e636
Remove unnecessery typings
mnajdova Oct 30, 2019
1f0f68a
fixed issues
mnajdova Nov 4, 2019
1dacee6
converted menu item styles
mnajdova Nov 4, 2019
036ea7a
-fixed regressions
mnajdova Nov 5, 2019
c34ff8f
-removed comments
mnajdova Nov 5, 2019
31fcfd8
-converted menu divider styles
mnajdova Nov 5, 2019
d427794
-fixed menu divider styles
mnajdova Nov 5, 2019
4c41c67
-converted slider styles
mnajdova Nov 5, 2019
7552956
-fixed menu regressions
mnajdova Nov 5, 2019
756442e
-fixed status differences in chat examples
mnajdova Nov 5, 2019
da11f81
fixed ts issues
mnajdova Nov 5, 2019
cb4ec11
-fixed status regressions in the Avatar component
mnajdova Nov 5, 2019
4a87260
fixed avatar regressions, converted menu item styles in hc theme
mnajdova Nov 5, 2019
1b9045c
menuColorAreas
mnajdova Nov 12, 2019
39d881d
fixed render component
mnajdova Nov 12, 2019
260f243
wip
mnajdova Nov 12, 2019
15b43e1
classes root added for inline style overrides
mnajdova Nov 13, 2019
b50ff9e
Merge branch 'master' into refactor/styles
mnajdova Nov 13, 2019
c830f72
merge conflicts
mnajdova Nov 13, 2019
29e05a8
fixed merge
mnajdova Nov 14, 2019
5eb9f8b
-changed slots style definition with class selectors in the root
mnajdova Nov 18, 2019
87879ea
-extracted MenuItemWrapper as a new component with separate style fun…
mnajdova Nov 19, 2019
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
2 changes: 1 addition & 1 deletion docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const AvatarExampleRtl = () => (
<Avatar
name="جون دو"
status={{
color: 'green',
styles: { backgroundColor: 'green' },
Copy link
Contributor

Choose a reason for hiding this comment

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

I've replaced color: 'green' with the identical styles: {backgroundColor: 'green'} for avoiding screener regressions. Will replace this with state: 'success' in a separate PR, where the changes would be scoped and easily tracked.

icon: 'stardust-checkmark',
}}
/>
Expand Down
6 changes: 5 additions & 1 deletion docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import * as React from 'react'
import { Avatar } from '@stardust-ui/react'

const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
const status = {
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}

const AvatarUsageExampleShorthand = () => (
<div>
Expand Down
6 changes: 5 additions & 1 deletion docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import * as React from 'react'
import { Avatar } from '@stardust-ui/react'

const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
const status = {
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}

const AvatarExampleExcludedInitialsShorthand = () => (
<div>
Expand Down
6 changes: 5 additions & 1 deletion docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ const AvatarExampleGetInitialsShorthand = () => (
<Avatar
name="John Doe"
getInitials={getInitials}
status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
status={{
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
/>
)

Expand Down
18 changes: 15 additions & 3 deletions docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@ const AvatarExampleImageCustomizationShorthand = () => (
<>
<Avatar
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of John Doe' }}
status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
status={{
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
/>
&emsp;
<Avatar
image="public/images/avatar/large/jerry.png"
status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
status={{
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
/>
&emsp;
<Avatar
Expand All @@ -28,7 +36,11 @@ const AvatarExampleImageCustomizationShorthand = () => (
/>
))
}
status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
status={{
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
/>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const AvatarExampleNameShorthand = () => (
<Avatar
name="John Doe"
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Avatar, Grid, SizeValue } from '@stardust-ui/react'

const statusProps = {
icon: 'stardust-checkmark',
color: 'green',
styles: { backgroundColor: 'green' },
title: 'Available',
}

Expand Down
13 changes: 10 additions & 3 deletions docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@ const AvatarExampleStatusShorthand = () => (
<div>
<Avatar
image="public/images/avatar/small/matt.jpg"
status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
status={{
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
/>
&emsp;
<Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
<Avatar
image="public/images/avatar/small/matt.jpg"
status={{ styles: { backgroundColor: 'red' }, title: 'Busy' }}
/>
&emsp;
<Avatar
image="public/images/avatar/small/matt.jpg"
status={{ color: 'grey', title: 'Offline' }}
status={{ styles: { backgroundColor: 'grey' }, title: 'Offline' }}
/>
&emsp;
</div>
Expand Down
10 changes: 5 additions & 5 deletions .../src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const defaultAvatar = (
<Avatar
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
Expand All @@ -22,7 +22,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
<Avatar
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
Expand All @@ -34,7 +34,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
size="larger"
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
}}
Expand All @@ -44,7 +44,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
<Avatar
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
size: 'larger',
Expand All @@ -56,7 +56,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
size="larger"
status={{
color: 'green',
styles: { backgroundColor: 'green' },
icon: 'stardust-checkmark',
title: 'Available',
size: 'medium',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Performance/Chat.perf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const avatars = {

const janeAvatar = {
image: `data:image/jpeg;base64,${avatars.ade}`,
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}

const ChatExample = () => {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const avatars = {

const janeAvatar = {
image: `data:image/jpeg;base64,${avatars.ade}`,
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}

export interface PopoverProps {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const items: ShorthandCollection<ChatItemProps> = [
gutter: (
<Avatar
image="public/images/avatar/small/ade.jpg"
status={{ color: 'green', icon: 'stardust-checkmark' }}
status={{ styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' }}
/>
),
message: (
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, Divider, ShorthandCollection } from '@star

const janeAvatar = {
image: 'public/images/avatar/small/ade.jpg',
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}

const items: ShorthandCollection<ChatItemProps> = [
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const [janeAvatar, johnAvatar] = [
'public/images/avatar/small/joe.jpg',
].map(src => ({
image: src,
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}))

const items: ShorthandCollection<ChatItemProps> = [
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/r

const janeAvatar = {
image: 'public/images/avatar/small/ade.jpg',
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}

const items: ShorthandCollection<ChatItemProps> = [
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const reactions: ShorthandCollection<ReactionProps> = [

const janeAvatar: AvatarProps = {
image: 'public/images/avatar/small/ade.jpg',
status: { color: 'green', icon: 'stardust-checkmark' },
status: { styles: { backgroundColor: 'green' }, icon: 'stardust-checkmark' },
}

const content = (
Expand Down
Loading