diff --git a/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx b/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx index acf7c78321..81faabddbf 100644 --- a/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx +++ b/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx @@ -16,8 +16,6 @@ With this guide, we aim to walk through all the breaking changes and how they ca The `ColoredTwitter` and `Twitter` icons were removed. The `X` icon should be used instead. -## Deprecations +### SocialButton type -### `Twitter` icon - -The `Twitter` icon was deprecated and will be removed in a future version. The `X` icon should be used instead. +The `type` prop in `SocialButton` no longer accepts `"twitter"` as a value. It now accepts `"X"` (capital letter) and renders the new icon correctly. diff --git a/packages/orbit-components/src/SocialButton/README.md b/packages/orbit-components/src/SocialButton/README.md index cab5253945..cc2fab41c3 100644 --- a/packages/orbit-components/src/SocialButton/README.md +++ b/packages/orbit-components/src/SocialButton/README.md @@ -47,7 +47,7 @@ Table below contains all types of the props available in SocialButton component. | `"apple"` | `"small"` | `"none"` | | `"facebook"` | `"normal"` | `"smallest"` | | `"google"` | `"large"` | `"small"` | -| `"twitter"` | | `"normal"` | +| `"X"` | | `"normal"` | | `"email"` | | `"medium"` | | | | `"large"` | | | | `"largest"` | diff --git a/packages/orbit-components/src/SocialButton/consts.ts b/packages/orbit-components/src/SocialButton/consts.ts index ba35583b59..809a1b15d6 100644 --- a/packages/orbit-components/src/SocialButton/consts.ts +++ b/packages/orbit-components/src/SocialButton/consts.ts @@ -2,7 +2,7 @@ export enum TYPE_OPTIONS { APPLE = "apple", FACEBOOK = "facebook", GOOGLE = "google", - TWITTER = "twitter", + X = "X", EMAIL = "email", } diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts index 6f6710a5e9..c4055d2d56 100644 --- a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts +++ b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts @@ -10,7 +10,7 @@ const opacity = { [TYPE_OPTIONS.APPLE]: 15, [TYPE_OPTIONS.FACEBOOK]: 8, [TYPE_OPTIONS.GOOGLE]: 8, - [TYPE_OPTIONS.TWITTER]: 8, + [TYPE_OPTIONS.X]: 8, [TYPE_OPTIONS.EMAIL]: 8, }; diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx index 09d0eb3db7..744da67925 100644 --- a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx +++ b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx @@ -4,7 +4,7 @@ import { TYPE_OPTIONS } from "../consts"; import Apple from "../../icons/Apple"; import Google from "../../icons/Google"; import Facebook from "../../icons/Facebook"; -import Twitter from "../../icons/Twitter"; +import X from "../../icons/X"; import Email from "../../icons/Email"; import type { Type } from "../types"; @@ -12,7 +12,7 @@ const getSocialButtonIcon = (type: Type): React.ReactNode | null => { if (type === TYPE_OPTIONS.APPLE) return ; if (type === TYPE_OPTIONS.FACEBOOK) return ; if (type === TYPE_OPTIONS.GOOGLE) return ; - if (type === TYPE_OPTIONS.TWITTER) return ; + if (type === TYPE_OPTIONS.X) return ; if (type === TYPE_OPTIONS.EMAIL) return ; return null; diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts index 0a3628360c..3126538c3a 100644 --- a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts +++ b/packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts @@ -10,63 +10,63 @@ const getSocialButtonTypeToken = (name: string, type: Type, theme: Theme): strin [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormal, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormal, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormal, + [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormal, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormal, }, [TOKENS.backgroundButtonHover]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDarkHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalHover, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalHover, + [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormalHover, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormalHover, }, [TOKENS.backgroundButtonActive]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDarkActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalActive, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalActive, + [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormalActive, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormalActive, }, [TOKENS.backgroundButtonFocus]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormal, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormal, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormal, + [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormal, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormal, }, [TOKENS.colorTextButton]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark, + [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark, }, [TOKENS.colorTextButtonHover]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark, + [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark, }, [TOKENS.colorTextButtonActive]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark, - [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark, + [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark, }, [TOKENS.iconColor]: { [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteSocialFacebook, [TYPE_OPTIONS.GOOGLE]: "currentColor", - [TYPE_OPTIONS.TWITTER]: "#00ACEE", // TODO: add token + [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark, [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark, }, [TOKENS.borderColorButtonFocus]: { [TYPE_OPTIONS.APPLE]: convertHexToRgba(theme.orbit.paletteInkNormal, 50), [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteInkNormal, 30), [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkNormal, 50), - [TYPE_OPTIONS.TWITTER]: convertHexToRgba(theme.orbit.paletteInkNormal, 50), + [TYPE_OPTIONS.X]: convertHexToRgba(theme.orbit.paletteInkNormal, 50), [TYPE_OPTIONS.EMAIL]: convertHexToRgba(theme.orbit.paletteInkNormal, 50), }, }; diff --git a/packages/orbit-components/src/SocialButton/types.d.ts b/packages/orbit-components/src/SocialButton/types.d.ts index 7a037cb776..4680df158c 100644 --- a/packages/orbit-components/src/SocialButton/types.d.ts +++ b/packages/orbit-components/src/SocialButton/types.d.ts @@ -3,7 +3,7 @@ import type { ButtonCommonProps, Size } from "../primitives/ButtonPrimitive/types"; -export type Type = "apple" | "facebook" | "google" | "twitter" | "email"; +export type Type = "apple" | "facebook" | "google" | "X" | "email"; type OmittedButtonCommonProps = Omit;