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

Jump to bottom

feat(button-inverted): delete button solid as a prop #421

Merged
merged 4 commits into from
Aug 2, 2023
Merged

feat(button-inverted): delete button solid as a prop #421

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
113ef5b
feat(button-inverted): delete button solid as a prop
Jul 31, 2023
2eae32a
feat(button-inverted): add warning for ghost inverted button pill
Jul 31, 2023
958bd2a
feat(button-inverted): address comments
Aug 1, 2023
6ec4706
feat(button-inverted): address comments 2
Aug 1, 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
16 changes: 8 additions & 8 deletions src/components/AddReactionButton/AddReactionButton.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -27,11 +27,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -89,11 +89,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with className 1`]
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -105,11 +105,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with className 1`]
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -168,11 +168,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with id 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
id="example-id"
>
<FocusRing>
Expand All @@ -185,11 +185,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with id 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
id="example-id"
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -257,11 +257,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with style 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
style={
Object {
"color": "pink",
Expand All @@ -278,11 +278,11 @@ exports[`<AddReactionButton /> snapshot should match snapshot with style 1`] = `
data-color="primary"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={20}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
12 changes: 6 additions & 6 deletions src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -492,11 +492,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -508,11 +508,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -681,11 +681,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -697,11 +697,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -875,11 +875,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -891,11 +891,11 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
data-color="primary"
data-disabled={false}
data-ghost={true}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={28}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
16 changes: 8 additions & 8 deletions src/components/Banner/Banner.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,11 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
data-color="join"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -141,11 +141,11 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
data-color="join"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -195,11 +195,11 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
data-color="cancel"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -211,11 +211,11 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
data-color="cancel"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -391,11 +391,11 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
data-color="join"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -407,11 +407,11 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
data-color="join"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -461,11 +461,11 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
data-color="cancel"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
>
<FocusRing>
<FocusRing
Expand All @@ -477,11 +477,11 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
data-color="cancel"
data-disabled={false}
data-ghost={false}
data-inverted={false}
data-multiple-children={false}
data-outline={false}
data-shallow-disabled={false}
data-size={40}
data-solid={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ButtonCircle/ButtonCircle.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const DEFAULTS = {
GHOST: false,
OUTLINE: false,
SIZE: 40,
SOLID: false,
INVERTED: false,
};

const COLORS = {
Expand Down
16 changes: 7 additions & 9 deletions src/components/ButtonCircle/ButtonCircle.stories.args.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ const buttonCircleArgTypes = {
},
},
color: {
description:
'Modifies the color of this component. Some colors do not include an outline variant.',
description: 'Modifies the color of this component.',
options: [undefined, ...Object.values(CONSTANTS.COLORS)],
control: { type: 'select' },
table: {
Expand All @@ -51,7 +50,7 @@ const buttonCircleArgTypes = {
},
shallowDisabled: {
description:
'Whether to render the COMPONENT looking as if disabled, but allowing onPress actions to still be passed.',
'Whether to render the component looking as if disabled, but allowing onPress actions to still be passed.',
options: [true, false],
control: { type: 'boolean' },
table: {
Expand All @@ -64,8 +63,7 @@ const buttonCircleArgTypes = {
},
},
ghost: {
description:
'Whether this component is a ghost. This overrides the `color` and `outline` props.',
description: 'Whether this component has a transparent background.',
options: [true, false],
control: { type: 'boolean' },
table: {
Expand All @@ -78,7 +76,7 @@ const buttonCircleArgTypes = {
},
},
outline: {
description: 'Whether to render the outline variant of this component.',
description: 'Whether this component has an outline/border.',
options: [true, false],
control: { type: 'boolean' },
table: {
Expand All @@ -90,17 +88,17 @@ const buttonCircleArgTypes = {
},
},
},
solid: {
inverted: {
description:
'Whether to use the solid background variant of this `<ButtonCircle />`. Does not support `color` or `ghost`',
'Whether this component has inverted background (black for dark mode and white for light mode)',
options: [true, false],
control: { type: 'boolean' },
table: {
type: {
summary: 'boolean',
},
defaultValue: {
summary: CONSTANTS.DEFAULTS.SOLID,
summary: CONSTANTS.DEFAULTS.INVERTED,
},
},
},
Expand Down
Loading
Loading