From 65c6763ffe45ff5d96f518f6d10ae1e607f3b9ef Mon Sep 17 00:00:00 2001 From: Marco Vidal Garcia Date: Thu, 9 Nov 2023 17:30:22 +0100 Subject: [PATCH] feat(ChoiceGroup): migrate to Tailwind Closes FEPLT-1707 --- docs/src/data/tailwind-migration-status.yaml | 2 +- .../src/ChoiceGroup/README.md | 2 +- .../ChoiceGroup/components/Feedback.js.flow | 3 - .../src/ChoiceGroup/components/Feedback.tsx | 60 ++++++-------- .../ChoiceGroup/components/FilterWrapper.tsx | 80 +++++-------------- .../src/ChoiceGroup/index.tsx | 29 ++----- 6 files changed, 52 insertions(+), 124 deletions(-) diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml index c90697149d..648039fefc 100644 --- a/docs/src/data/tailwind-migration-status.yaml +++ b/docs/src/data/tailwind-migration-status.yaml @@ -20,7 +20,7 @@ Card: true CardSection: true CarrierLogo: true Checkbox: true -ChoiceGroup: false +ChoiceGroup: true Collapse: true Coupon: false CountryFlag: true diff --git a/packages/orbit-components/src/ChoiceGroup/README.md b/packages/orbit-components/src/ChoiceGroup/README.md index 3f91f3521d..0aa83abd17 100644 --- a/packages/orbit-components/src/ChoiceGroup/README.md +++ b/packages/orbit-components/src/ChoiceGroup/README.md @@ -77,7 +77,7 @@ For more realistic usage you can check out the "Render prop" example in Storyboo ## Functional specs -- onChange props in `` or `` will be overrode by internal onChange function +- onChange props in `` or `` will be overridden by internal onChange function - If you want to handle selecting field, pass `onChange` to `` and it will be always triggered when `` or `` should change - `onChange` will return `SyntheticEvent` of field that should change diff --git a/packages/orbit-components/src/ChoiceGroup/components/Feedback.js.flow b/packages/orbit-components/src/ChoiceGroup/components/Feedback.js.flow index 9fa354d47c..b6e2fb53fb 100644 --- a/packages/orbit-components/src/ChoiceGroup/components/Feedback.js.flow +++ b/packages/orbit-components/src/ChoiceGroup/components/Feedback.js.flow @@ -1,5 +1,4 @@ // @flow -import type { StyledComponent } from "styled-components"; import * as React from "react"; import type { Globals } from "../../common/common.js.flow"; @@ -10,5 +9,3 @@ export type Props = {| |}; declare export default React.ComponentType; - -declare export var StyledFormFeedback: StyledComponent; diff --git a/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx b/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx index d05f66e1fc..dc4dbb6e8f 100644 --- a/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx +++ b/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { css } from "styled-components"; +import cx from "clsx"; import defaultTheme from "../../defaultTheme"; @@ -8,44 +8,30 @@ interface Props { children: React.ReactNode; } -export const StyledFormFeedback = styled(props =>
)` - ${({ theme }) => css` - color: ${theme.orbit.colorTextError}; - font-family: ${theme.orbit.fontFamily}; - font-size: ${theme.orbit.fontSizeFormFeedback}; - font-weight: ${theme.orbit.fontWeightMedium}; - line-height: ${theme.orbit.lineHeightTextSmall}; - width: 100%; - margin-top: 2px; - position: absolute; - top: 100%; - max-height: ${Math.floor( - theme.orbit.lineHeightText * parseInt(theme.orbit.fontSizeFormFeedback, 10), - )}px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - & a { - color: ${theme.orbit.colorTextError}; - font-weight: ${theme.orbit.fontWeightMedium}; - text-decoration: underline; - cursor: pointer; - } - strong, - b { - font-weight: ${theme.fontWeightMedium}; - color: ${theme.paletteInkDark}; - } - `} -`; - -StyledFormFeedback.defaultProps = { - theme: defaultTheme, -}; - const FormFeedback = (props: Props) => { const { children, dataTest } = props; - return {children}; + return ( +
+ {children} +
+ ); }; export default FormFeedback; diff --git a/packages/orbit-components/src/ChoiceGroup/components/FilterWrapper.tsx b/packages/orbit-components/src/ChoiceGroup/components/FilterWrapper.tsx index 82774d0826..7252f31c05 100644 --- a/packages/orbit-components/src/ChoiceGroup/components/FilterWrapper.tsx +++ b/packages/orbit-components/src/ChoiceGroup/components/FilterWrapper.tsx @@ -1,11 +1,8 @@ import * as React from "react"; -import styled, { css } from "styled-components"; +import cx from "clsx"; -import defaultTheme from "../../defaultTheme"; import ButtonLink from "../../ButtonLink"; -const StyledOnlyButton = styled.div``; - interface Props { readonly child: React.ReactElement>; readonly children: React.ReactElement>; @@ -16,67 +13,28 @@ interface Props { ) => void | Promise; } -const hoverAndFocus = () => css` - background-color: ${({ theme }) => theme.orbit.paletteBlueLight}; - - ${StyledOnlyButton} { - visibility: visible; - opacity: 1; - } -`; - -const StyledContentWrapper = styled.div<{ disabled: boolean }>` - ${({ disabled }) => css` - box-sizing: border-box; - width: 100%; - padding-left: 4px; - border-radius: 4px; - display: flex; - align-items: center; - height: ${({ theme }) => theme.orbit.heightButtonSmall}; - - ${StyledOnlyButton} { - visibility: hidden; - opacity: 0; - } - - ${!disabled && - css` - @media (hover: none) { - ${StyledOnlyButton} { - visibility: visible; - opacity: 0.3; - &:hover { - opacity: 1; - } - } - } - - @media (hover) and (pointer: fine) { - &:hover { - ${hoverAndFocus}; - } - - &:focus-within { - ${hoverAndFocus} - } - } - `}; - `} -`; - -StyledContentWrapper.defaultProps = { - theme: defaultTheme, -}; - const FilterWrapper = ({ child, children, onOnlySelection, onlySelectionText }: Props) => { const { value, label, disabled } = child.props; return ( - +
{children} {onOnlySelection && !disabled && ( - +
{onlySelectionText} - +
)} - +
); }; diff --git a/packages/orbit-components/src/ChoiceGroup/index.tsx b/packages/orbit-components/src/ChoiceGroup/index.tsx index fe8b924046..d17f0218dc 100644 --- a/packages/orbit-components/src/ChoiceGroup/index.tsx +++ b/packages/orbit-components/src/ChoiceGroup/index.tsx @@ -1,14 +1,13 @@ "use client"; import * as React from "react"; -import styled from "styled-components"; +import cx from "clsx"; import Heading from "../Heading"; import type { Type } from "../Heading/types"; import Stack from "../Stack"; import { LABEL_SIZES, LABEL_ELEMENTS } from "./consts"; -import Feedback, { StyledFormFeedback } from "./components/Feedback"; -import defaultTheme from "../defaultTheme"; +import Feedback from "./components/Feedback"; import FilterWrapper from "./components/FilterWrapper"; import useRandomId from "../hooks/useRandomId"; import useTheme from "../hooks/useTheme"; @@ -23,22 +22,6 @@ const getHeadingSize = (size: Size): Type => { return SIZES[size]; }; -const StyledChoiceGroup = styled.div` - width: 100%; - display: flex; - flex-direction: column; - - ${StyledFormFeedback} { - position: relative; - margin-top: ${({ theme }) => theme.orbit.spaceXSmall}; - top: initial; - } -`; - -StyledChoiceGroup.defaultProps = { - theme: defaultTheme, -}; - const ItemContainer = ({ filter, itemProps, onOnlySelection, onlySelectionText }) => ({ children }) => { @@ -87,12 +70,16 @@ const ChoiceGroup = React.forwardRef( }; return ( - {label && ( @@ -128,7 +115,7 @@ const ChoiceGroup = React.forwardRef( )} {error && {error}} - +
); }, );