From e305defd606a0b8afeac16725e173a9a8d9d0cf2 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Tue, 10 Oct 2023 21:51:28 +0200 Subject: [PATCH] feat(Stepper): migrate to Tailwind MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit docs: update tailwind status yaml Update packages/orbit-components/src/Stepper/StepperStateless/index.tsx Co-authored-by: Marco Vidal García Update packages/orbit-components/src/Stepper/StepperStateless/index.tsx Co-authored-by: Marco Vidal García --- docs/src/data/tailwind-migration-status.yaml | 4 +- .../src/Stepper/Stepper.stories.tsx | 17 +- .../src/Stepper/StepperStateless/index.tsx | 158 +++++------------- .../src/Stepper/__tests__/index.test.tsx | 9 - 4 files changed, 59 insertions(+), 129 deletions(-) diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml index 8de9192c12..b5205d1a22 100644 --- a/docs/src/data/tailwind-migration-status.yaml +++ b/docs/src/data/tailwind-migration-status.yaml @@ -82,8 +82,8 @@ Slide: false Slider: false SocialButton: true Stack: true -Stepper: false -StepperStateless: false +Stepper: true +StepperStateless: true StopoverArrow: false Switch: true Tab: false diff --git a/packages/orbit-components/src/Stepper/Stepper.stories.tsx b/packages/orbit-components/src/Stepper/Stepper.stories.tsx index 7ba0db8ea9..67b27c160b 100644 --- a/packages/orbit-components/src/Stepper/Stepper.stories.tsx +++ b/packages/orbit-components/src/Stepper/Stepper.stories.tsx @@ -101,9 +101,24 @@ export const Playground = () => { /> ); }; - Playground.story = { parameters: { info: "Here you can try Stepper component with additional functionality.", }, }; + +export const VisualTest = () => { + return ( +
+ + + +
+ ); +}; + +VisualTest.story = { + parameters: { + chromatic: { disableSnapshot: false }, + }, +}; diff --git a/packages/orbit-components/src/Stepper/StepperStateless/index.tsx b/packages/orbit-components/src/Stepper/StepperStateless/index.tsx index a689f60f59..6dfc5aa541 100644 --- a/packages/orbit-components/src/Stepper/StepperStateless/index.tsx +++ b/packages/orbit-components/src/Stepper/StepperStateless/index.tsx @@ -1,118 +1,33 @@ "use client"; import * as React from "react"; -import styled, { css } from "styled-components"; +import cx from "clsx"; -import mq from "../../utils/mediaQuery"; import Minus from "../../icons/Minus"; import Plus from "../../icons/Plus"; -import defaultTheme from "../../defaultTheme"; -import Button from "../../primitives/ButtonPrimitive"; +import ButtonPrimitive from "../../primitives/ButtonPrimitive"; import useTheme from "../../hooks/useTheme"; -import { defaultFocus } from "../../utils/common"; import type { Props } from "./types"; -const getMaxWidth = ({ maxWidth }) => { +const getMaxWidth = ({ maxWidth }: { maxWidth: string | number }) => { if (typeof maxWidth === "string") return maxWidth; - return `${parseInt(maxWidth, 10)}px`; + return `${parseInt(maxWidth.toString(), 10)}px`; }; -const StyledStepper = styled.div` - display: flex; - width: 100%; - max-width: ${getMaxWidth}; - flex: 1 1 auto; -`; - -const iconMixin = css<{ isActive?: boolean; isDisabled?: boolean }>` - ${({ theme, isActive, isDisabled }) => css` - padding: 2px; - height: 20px; - width: 20px; - background: ${isActive ? theme.orbit.paletteBlueNormal : theme.orbit.paletteCloudNormal}; - border-radius: ${theme.orbit.borderRadiusCircle}; - ${mq.desktop(css` - height: 16px; - width: 16px; - `)}; - - ${!isDisabled && - css` - &:hover { - background: ${isActive - ? theme.orbit.paletteBlueNormalHover - : theme.orbit.paletteCloudNormalHover}; - } - - &:focus, - &:active { - box-shadow: inset 0 0 0 2px - ${isActive ? theme.orbit.paletteBlueLightActive : theme.orbit.paletteCloudNormalActive}; - } - `}; - `} -`; - -const StyledMinusIcon = styled(Minus)` - ${iconMixin}; -`; - -StyledMinusIcon.defaultProps = { - theme: defaultTheme, -}; - -const StyledPlusIcon = styled(Plus)` - ${iconMixin}; -`; - -StyledPlusIcon.defaultProps = { - theme: defaultTheme, -}; - -const StyledStepperInput = styled.input` - ${({ theme, disabled }) => css` - width: 100%; - height: 44px; - padding: 0; - border: 0; - font-size: ${theme.orbit.fontSizeTextLarge}; - font-weight: ${theme.orbit.fontWeightMedium}; - color: ${theme.orbit.paletteInkDark}; - text-align: center; - min-width: 0; - opacity: ${disabled ? "0.5" : "1"}; - background-color: ${disabled && "transparent"}; - - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - - &:focus { - outline: none; - } - `} -`; - -StyledStepperInput.defaultProps = { - theme: defaultTheme, -}; - -const StyledStepperButton = styled(Button)` - &:focus { - outline: none; - - ${StyledMinusIcon}, - ${StyledPlusIcon} { - ${defaultFocus} - } - } -`; - -StyledStepperButton.defaultProps = { - theme: defaultTheme, -}; +const stepperButtonMixin = ({ disabled, active }: { disabled: boolean; active?: boolean }) => + cx( + "[&_svg]:p-xxxs", + "de:[&_svg]:h-icon-small de:[&_svg]:w-icon-small [&_svg]:h-icon-medium [&_svg]:w-icon-medium", + "[&_svg]:rounded-circle", + "focus:outline-0", + "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2", + !disabled && [ + active + ? "[&_svg]:bg-blue-normal hover:[&_svg]:bg-blue-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-blue-light-active)]" + : "[&_svg]:bg-cloud-normal hover:[&_svg]:bg-cloud-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-cloud-normal-active)]", + ], + disabled && "[&_svg]:bg-cloud-normal", + ); const StepperStateless = ({ maxWidth = "120px", @@ -136,11 +51,6 @@ const StepperStateless = ({ }: Props) => { const theme = useTheme(); - const commonButtonStyles = { - background: "transparent", - width: "44px", - }; - const iconStyles = { foreground: active ? theme.orbit.paletteWhite : theme.orbit.paletteInkDark, }; @@ -151,10 +61,16 @@ const StepperStateless = ({ disabled || disabledIncrement || (typeof value === "number" && value >= +maxValue); return ( - - + } + iconLeft={} onClick={ev => { if (onDecrement && !disabled) { onDecrement(ev); @@ -162,9 +78,17 @@ const StepperStateless = ({ }} title={titleDecrement} icons={iconStyles} - {...commonButtonStyles} /> - - } + iconLeft={} onClick={ev => { if (onIncrement && !disabled) { onIncrement(ev); @@ -190,9 +115,8 @@ const StepperStateless = ({ }} title={titleIncrement} icons={iconStyles} - {...commonButtonStyles} /> - + ); }; diff --git a/packages/orbit-components/src/Stepper/__tests__/index.test.tsx b/packages/orbit-components/src/Stepper/__tests__/index.test.tsx index ba69dc49ed..0b05006083 100644 --- a/packages/orbit-components/src/Stepper/__tests__/index.test.tsx +++ b/packages/orbit-components/src/Stepper/__tests__/index.test.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import userEvent from "@testing-library/user-event"; import { render, screen, fireEvent } from "../../test-utils"; -import defaultTheme from "../../defaultTheme"; import StepperStateless from "../StepperStateless"; describe("Stepper", () => { @@ -57,14 +56,6 @@ describe("Stepper", () => { expect(onBlur).toHaveBeenCalled(); }); - it("should have active state", () => { - render(); - - expect(document.querySelector("svg")).toHaveStyle({ - background: defaultTheme.orbit.paletteBlueNormal, - }); - }); - it("should have maxWidth", () => { render();