From e3ca0184421c2c56e268da6bfebee11c433252af Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Wed, 9 Oct 2024 13:39:57 +0200 Subject: [PATCH] chore: remove safari <14.1 styles and logic --- .../orbit-components/src/Inline/helpers.ts | 211 ++++++------ .../src/Slider/components/Handle/index.tsx | 4 +- .../src/common/tailwind/spacing.ts | 319 +----------------- .../src/hooks/useMediaQuery/index.ts | 14 +- 4 files changed, 111 insertions(+), 437 deletions(-) diff --git a/packages/orbit-components/src/Inline/helpers.ts b/packages/orbit-components/src/Inline/helpers.ts index c90a52a659..ea029bb66d 100644 --- a/packages/orbit-components/src/Inline/helpers.ts +++ b/packages/orbit-components/src/Inline/helpers.ts @@ -3,81 +3,80 @@ import type { MediaQuery } from "./types"; import { getJustifyClasses, getAlignItemsClasses } from "../common/tailwind"; import { QUERIES } from "../utils/mediaQuery"; -// TODO refactor to gap once we no longer support iOS Safari < 14.5 const spacingClasses: { [K in QUERIES | SPACINGS | DEPRECATED_SPACINGS]: K extends QUERIES ? Record : string; } = { [SPACINGS.NONE]: "", - [SPACINGS.FIFTY]: "-mt-50 -ms-50 *:mt-50 *:ms-50", - [SPACINGS.ONE_HUNDRED]: "-mt-100 -ms-100 *:mt-100 *:ms-100", - [SPACINGS.ONE_HUNDRED_FIFTY]: "-mt-150 -ms-150 *:mt-150 *:ms-150", - [SPACINGS.TWO_HUNDRED]: "-mt-200 -ms-200 *:mt-200 *:ms-200", - [SPACINGS.THREE_HUNDRED]: "-mt-300 -ms-300 *:mt-300 *:ms-300", - [SPACINGS.FOUR_HUNDRED]: "-mt-400 -ms-400 *:mt-400 *:ms-400", - [SPACINGS.FIVE_HUNDRED]: "-mt-500 -ms-500 *:mt-500 *:ms-500", - [SPACINGS.SIX_HUNDRED]: "-mt-600 -ms-600 *:mt-600 *:ms-600", - [SPACINGS.EIGHT_HUNDRED]: "-mt-800 -ms-800 *:mt-800 *:ms-800", - [SPACINGS.ONE_THOUSAND]: "-mt-1000 -ms-1000 *:mt-1000 *:ms-1000", - [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "-mt-1200 -ms-1200 *:mt-1200 *:ms-1200", - [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "-mt-1600 -ms-1600 *:mt-1600 *:ms-1600", - [DEPRECATED_SPACINGS.XXXSMALL]: "-mt-50 -ms-50 *:mt-50 *:ms-50", // deprecated - [DEPRECATED_SPACINGS.XXSMALL]: "-mt-100 -ms-100 *:mt-100 *:ms-100", // deprecated - [DEPRECATED_SPACINGS.XSMALL]: "-mt-200 -ms-200 *:mt-200 *:ms-200", // deprecated - [DEPRECATED_SPACINGS.SMALL]: "-mt-300 -ms-300 *:mt-300 *:ms-300", // deprecated - [DEPRECATED_SPACINGS.MEDIUM]: "-mt-400 -ms-400 *:mt-400 *:ms-400", // deprecated - [DEPRECATED_SPACINGS.LARGE]: "-mt-600 -ms-600 *:mt-600 *:ms-600", // deprecated - [DEPRECATED_SPACINGS.XLARGE]: "-mt-800 -ms-800 *:mt-800 *:ms-800", // deprecated - [DEPRECATED_SPACINGS.XXLARGE]: "-mt-1000 -ms-1000 *:mt-1000 *:ms-1000", // deprecated - [DEPRECATED_SPACINGS.XXXLARGE]: "-mt-[52px] -ms-[52px] *:mt-[52px] *:ms-[52px]", // deprecated + [SPACINGS.FIFTY]: "gap-50", + [SPACINGS.ONE_HUNDRED]: "gap-100", + [SPACINGS.ONE_HUNDRED_FIFTY]: "gap-150", + [SPACINGS.TWO_HUNDRED]: "gap-200", + [SPACINGS.THREE_HUNDRED]: "gap-300", + [SPACINGS.FOUR_HUNDRED]: "gap-400", + [SPACINGS.FIVE_HUNDRED]: "gap-500", + [SPACINGS.SIX_HUNDRED]: "gap-600", + [SPACINGS.EIGHT_HUNDRED]: "gap-800", + [SPACINGS.ONE_THOUSAND]: "gap-1000", + [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "gap-1200", + [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "gap-1600", + [DEPRECATED_SPACINGS.XXXSMALL]: "gap-50", // deprecated + [DEPRECATED_SPACINGS.XXSMALL]: "gap-100", // deprecated + [DEPRECATED_SPACINGS.XSMALL]: "gap-200", // deprecated + [DEPRECATED_SPACINGS.SMALL]: "gap-300", // deprecated + [DEPRECATED_SPACINGS.MEDIUM]: "gap-400", // deprecated + [DEPRECATED_SPACINGS.LARGE]: "gap-600", // deprecated + [DEPRECATED_SPACINGS.XLARGE]: "gap-800", // deprecated + [DEPRECATED_SPACINGS.XXLARGE]: "gap-1000", // deprecated + [DEPRECATED_SPACINGS.XXXLARGE]: "gap-[52px]", // deprecated [QUERIES.LARGEDESKTOP]: { [SPACINGS.NONE]: "", - [SPACINGS.FIFTY]: "ld:-mt-50 ld:-ms-50 ld:*:mt-50 ld:*:ms-50", - [SPACINGS.ONE_HUNDRED]: "ld:-mt-100 ld:-ms-100 ld:*:mt-100 ld:*:ms-100", - [SPACINGS.ONE_HUNDRED_FIFTY]: "ld:-mt-150 ld:-ms-150 ld:*:mt-150 ld:*:ms-150", - [SPACINGS.TWO_HUNDRED]: "ld:-mt-200 ld:-ms-200 ld:*:mt-200 ld:*:ms-200", - [SPACINGS.THREE_HUNDRED]: "ld:-mt-300 ld:-ms-300 ld:*:mt-300 ld:*:ms-300", - [SPACINGS.FOUR_HUNDRED]: "ld:-mt-400 ld:-ms-400 ld:*:mt-400 ld:*:ms-400", - [SPACINGS.FIVE_HUNDRED]: "ld:-mt-500 ld:-ms-500 ld:*:mt-500 ld:*:ms-500", - [SPACINGS.SIX_HUNDRED]: "ld:-mt-600 ld:-ms-600 ld:*:mt-600 ld:*:ms-600", - [SPACINGS.EIGHT_HUNDRED]: "ld:-mt-800 ld:-ms-800 ld:*:mt-800 ld:*:ms-800", - [SPACINGS.ONE_THOUSAND]: "ld:-mt-1000 ld:-ms-1000 ld:*:mt-1000 ld:*:ms-1000", - [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "ld:-mt-1200 ld:-ms-1200 ld:*:mt-1200 ld:*:ms-1200", - [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "ld:-mt-1600 ld:-ms-1600 ld:*:mt-1600 ld:*:ms-1600", - [DEPRECATED_SPACINGS.XXXSMALL]: "ld:-mt-50 ld:-ms-50 ld:*:mt-50 ld:*:ms-50", // deprecated - [DEPRECATED_SPACINGS.XXSMALL]: "ld:-mt-100 ld:-ms-100 ld:*:mt-100 ld:*:ms-100", // deprecated - [DEPRECATED_SPACINGS.XSMALL]: "ld:-mt-200 ld:-ms-200 ld:*:mt-200 ld:*:ms-200", // deprecated - [DEPRECATED_SPACINGS.SMALL]: "ld:-mt-300 ld:-ms-300 ld:*:mt-300 ld:*:ms-300", // deprecated - [DEPRECATED_SPACINGS.MEDIUM]: "ld:-mt-400 ld:-ms-400 ld:*:mt-400 ld:*:ms-400", // deprecated - [DEPRECATED_SPACINGS.LARGE]: "ld:-mt-600 ld:-ms-600 ld:*:mt-600 ld:*:ms-600", // deprecated - [DEPRECATED_SPACINGS.XLARGE]: "ld:-mt-800 ld:-ms-800 ld:*:mt-800 ld:*:ms-800", // deprecated - [DEPRECATED_SPACINGS.XXLARGE]: "ld:-mt-1000 ld:-ms-1000 ld:*:mt-1000 ld:*:ms-1000", // deprecated - [DEPRECATED_SPACINGS.XXXLARGE]: "ld:-mt-[52px] ld:-ms-[52px] ld:*:mt-[52px] ld:*:ms-[52px]", // deprecated + [SPACINGS.FIFTY]: "ld:gap-50", + [SPACINGS.ONE_HUNDRED]: "ld:gap-100", + [SPACINGS.ONE_HUNDRED_FIFTY]: "ld:gap-150", + [SPACINGS.TWO_HUNDRED]: "ld:gap-200", + [SPACINGS.THREE_HUNDRED]: "ld:gap-300", + [SPACINGS.FOUR_HUNDRED]: "ld:gap-400", + [SPACINGS.FIVE_HUNDRED]: "ld:gap-500", + [SPACINGS.SIX_HUNDRED]: "ld:gap-600", + [SPACINGS.EIGHT_HUNDRED]: "ld:gap-800", + [SPACINGS.ONE_THOUSAND]: "ld:gap-1000", + [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "ld:gap-1200", + [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "ld:gap-1600", + [DEPRECATED_SPACINGS.XXXSMALL]: "ld:gap-50", // deprecated + [DEPRECATED_SPACINGS.XXSMALL]: "ld:gap-100", // deprecated + [DEPRECATED_SPACINGS.XSMALL]: "ld:gap-200", // deprecated + [DEPRECATED_SPACINGS.SMALL]: "ld:gap-300", // deprecated + [DEPRECATED_SPACINGS.MEDIUM]: "ld:gap-400", // deprecated + [DEPRECATED_SPACINGS.LARGE]: "ld:gap-600", // deprecated + [DEPRECATED_SPACINGS.XLARGE]: "ld:gap-800", // deprecated + [DEPRECATED_SPACINGS.XXLARGE]: "ld:gap-1000", // deprecated + [DEPRECATED_SPACINGS.XXXLARGE]: "ld:gap-[52px]", // deprecated }, [QUERIES.DESKTOP]: { [SPACINGS.NONE]: "", - [SPACINGS.FIFTY]: "de:-mt-50 de:-ms-50 de:*:mt-50 de:*:ms-50", - [SPACINGS.ONE_HUNDRED]: "de:-mt-100 de:-ms-100 de:*:mt-100 de:*:ms-100", - [SPACINGS.ONE_HUNDRED_FIFTY]: "de:-mt-150 de:-ms-150 de:*:mt-150 de:*:ms-150", - [SPACINGS.TWO_HUNDRED]: "de:-mt-200 de:-ms-200 de:*:mt-200 de:*:ms-200", - [SPACINGS.THREE_HUNDRED]: "de:-mt-300 de:-ms-300 de:*:mt-300 de:*:ms-300", - [SPACINGS.FOUR_HUNDRED]: "de:-mt-400 de:-ms-400 de:*:mt-400 de:*:ms-400", - [SPACINGS.FIVE_HUNDRED]: "de:-mt-500 de:-ms-500 de:*:mt-500 de:*:ms-500", - [SPACINGS.SIX_HUNDRED]: "de:-mt-600 de:-ms-600 de:*:mt-600 de:*:ms-600", - [SPACINGS.EIGHT_HUNDRED]: "de:-mt-800 de:-ms-800 de:*:mt-800 de:*:ms-800", - [SPACINGS.ONE_THOUSAND]: "de:-mt-1000 de:-ms-1000 de:*:mt-1000 de:*:ms-1000", - [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "de:-mt-1200 de:-ms-1200 de:*:mt-1200 de:*:ms-1200", - [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "de:-mt-1600 de:-ms-1600 de:*:mt-1600 de:*:ms-1600", - [DEPRECATED_SPACINGS.XXXSMALL]: "de:-mt-50 de:-ms-50 de:*:mt-50 de:*:ms-50", // deprecated - [DEPRECATED_SPACINGS.XXSMALL]: "de:-mt-100 de:-ms-100 de:*:mt-100 de:*:ms-100", // deprecated - [DEPRECATED_SPACINGS.XSMALL]: "de:-mt-200 de:-ms-200 de:*:mt-200 de:*:ms-200", // deprecated - [DEPRECATED_SPACINGS.SMALL]: "de:-mt-300 de:-ms-300 de:*:mt-300 de:*:ms-300", // deprecated - [DEPRECATED_SPACINGS.MEDIUM]: "de:-mt-400 de:-ms-400 de:*:mt-400 de:*:ms-400", // deprecated - [DEPRECATED_SPACINGS.LARGE]: "de:-mt-600 de:-ms-600 de:*:mt-600 de:*:ms-600", // deprecated - [DEPRECATED_SPACINGS.XLARGE]: "de:-mt-800 de:-ms-800 de:*:mt-800 de:*:ms-800", // deprecated - [DEPRECATED_SPACINGS.XXLARGE]: "de:-mt-1000 de:-ms-1000 de:*:mt-1000 de:*:ms-1000", // deprecated - [DEPRECATED_SPACINGS.XXXLARGE]: "de:-mt-[52px] de:-ms-[52px] de:*:mt-[52px] de:*:ms-[52px]", // deprecated + [SPACINGS.FIFTY]: "de:gap-50", + [SPACINGS.ONE_HUNDRED]: "de:gap-100", + [SPACINGS.ONE_HUNDRED_FIFTY]: "de:gap-150", + [SPACINGS.TWO_HUNDRED]: "de:gap-200", + [SPACINGS.THREE_HUNDRED]: "de:gap-300", + [SPACINGS.FOUR_HUNDRED]: "de:gap-400", + [SPACINGS.FIVE_HUNDRED]: "de:gap-500", + [SPACINGS.SIX_HUNDRED]: "de:gap-600", + [SPACINGS.EIGHT_HUNDRED]: "de:gap-800", + [SPACINGS.ONE_THOUSAND]: "de:gap-1000", + [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "de:gap-1200", + [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "de:gap-1600", + [DEPRECATED_SPACINGS.XXXSMALL]: "de:gap-50", // deprecated + [DEPRECATED_SPACINGS.XXSMALL]: "de:gap-100", // deprecated + [DEPRECATED_SPACINGS.XSMALL]: "de:gap-200", // deprecated + [DEPRECATED_SPACINGS.SMALL]: "de:gap-300", // deprecated + [DEPRECATED_SPACINGS.MEDIUM]: "de:gap-400", // deprecated + [DEPRECATED_SPACINGS.LARGE]: "de:gap-600", // deprecated + [DEPRECATED_SPACINGS.XLARGE]: "de:gap-800", // deprecated + [DEPRECATED_SPACINGS.XXLARGE]: "de:gap-1000", // deprecated + [DEPRECATED_SPACINGS.XXXLARGE]: "de:gap-[52px]", // deprecated }, [QUERIES.TABLET]: { [SPACINGS.NONE]: "", @@ -105,51 +104,51 @@ const spacingClasses: { }, [QUERIES.LARGEMOBILE]: { [SPACINGS.NONE]: "", - [SPACINGS.FIFTY]: "lm:-mt-50 lm:-ms-50 lm:*:mt-50 lm:*:ms-50", - [SPACINGS.ONE_HUNDRED]: "lm:-mt-100 lm:-ms-100 lm:*:mt-100 lm:*:ms-100", - [SPACINGS.ONE_HUNDRED_FIFTY]: "lm:-mt-150 lm:-ms-150 lm:*:mt-150 lm:*:ms-150", - [SPACINGS.TWO_HUNDRED]: "lm:-mt-200 lm:-ms-200 lm:*:mt-200 lm:*:ms-200", - [SPACINGS.THREE_HUNDRED]: "lm:-mt-300 lm:-ms-300 lm:*:mt-300 lm:*:ms-300", - [SPACINGS.FOUR_HUNDRED]: "lm:-mt-400 lm:-ms-400 lm:*:mt-400 lm:*:ms-400", - [SPACINGS.FIVE_HUNDRED]: "lm:-mt-500 lm:-ms-500 lm:*:mt-500 lm:*:ms-500", - [SPACINGS.SIX_HUNDRED]: "lm:-mt-600 lm:-ms-600 lm:*:mt-600 lm:*:ms-600", - [SPACINGS.EIGHT_HUNDRED]: "lm:-mt-800 lm:-ms-800 lm:*:mt-800 lm:*:ms-800", - [SPACINGS.ONE_THOUSAND]: "lm:-mt-1000 lm:-ms-1000 lm:*:mt-1000 lm:*:ms-1000", - [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "lm:-mt-1200 lm:-ms-1200 lm:*:mt-1200 lm:*:ms-1200", - [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "lm:-mt-1600 lm:-ms-1600 lm:*:mt-1600 lm:*:ms-1600", - [DEPRECATED_SPACINGS.XXXSMALL]: "lm:-mt-50 lm:-ms-50 lm:*:mt-50 lm:*:ms-50", // deprecated - [DEPRECATED_SPACINGS.XXSMALL]: "lm:-mt-100 lm:-ms-100 lm:*:mt-100 lm:*:ms-100", // deprecated - [DEPRECATED_SPACINGS.XSMALL]: "lm:-mt-200 lm:-ms-200 lm:*:mt-200 lm:*:ms-200", // deprecated - [DEPRECATED_SPACINGS.SMALL]: "lm:-mt-300 lm:-ms-300 lm:*:mt-300 lm:*:ms-300", // deprecated - [DEPRECATED_SPACINGS.MEDIUM]: "lm:-mt-400 lm:-ms-400 lm:*:mt-400 lm:*:ms-400", // deprecated - [DEPRECATED_SPACINGS.LARGE]: "lm:-mt-600 lm:-ms-600 lm:*:mt-600 lm:*:ms-600", // deprecated - [DEPRECATED_SPACINGS.XLARGE]: "lm:-mt-800 lm:-ms-800 lm:*:mt-800 lm:*:ms-800", // deprecated - [DEPRECATED_SPACINGS.XXLARGE]: "lm:-mt-1000 lm:-ms-1000 lm:*:mt-1000 lm:*:ms-1000", // deprecated - [DEPRECATED_SPACINGS.XXXLARGE]: "lm:-mt-[52px] lm:-ms-[52px] lm:*:mt-[52px] lm:*:ms-[52px]", // deprecated + [SPACINGS.FIFTY]: "lm:gap-50", + [SPACINGS.ONE_HUNDRED]: "lm:gap-100", + [SPACINGS.ONE_HUNDRED_FIFTY]: "lm:gap-150", + [SPACINGS.TWO_HUNDRED]: "lm:gap-200", + [SPACINGS.THREE_HUNDRED]: "lm:gap-300", + [SPACINGS.FOUR_HUNDRED]: "lm:gap-400", + [SPACINGS.FIVE_HUNDRED]: "lm:gap-500", + [SPACINGS.SIX_HUNDRED]: "lm:gap-600", + [SPACINGS.EIGHT_HUNDRED]: "lm:gap-800", + [SPACINGS.ONE_THOUSAND]: "lm:gap-1000", + [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "lm:gap-1200", + [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "lm:gap-1600", + [DEPRECATED_SPACINGS.XXXSMALL]: "lm:gap-50", // deprecated + [DEPRECATED_SPACINGS.XXSMALL]: "lm:gap-100", // deprecated + [DEPRECATED_SPACINGS.XSMALL]: "lm:gap-200", // deprecated + [DEPRECATED_SPACINGS.SMALL]: "lm:gap-300", // deprecated + [DEPRECATED_SPACINGS.MEDIUM]: "lm:gap-400", // deprecated + [DEPRECATED_SPACINGS.LARGE]: "lm:gap-600", // deprecated + [DEPRECATED_SPACINGS.XLARGE]: "lm:gap-800", // deprecated + [DEPRECATED_SPACINGS.XXLARGE]: "lm:gap-1000", // deprecated + [DEPRECATED_SPACINGS.XXXLARGE]: "lm:gap-[52px]", // deprecated }, [QUERIES.MEDIUMMOBILE]: { [SPACINGS.NONE]: "", - [SPACINGS.FIFTY]: "mm:-mt-50 mm:-ms-50 mm:*:mt-50 mm:*:ms-50", - [SPACINGS.ONE_HUNDRED]: "mm:-mt-100 mm:-ms-100 mm:*:mt-100 mm:*:ms-100", - [SPACINGS.ONE_HUNDRED_FIFTY]: "mm:-mt-150 mm:-ms-150 mm:*:mt-150 mm:*:ms-150", - [SPACINGS.TWO_HUNDRED]: "mm:-mt-200 mm:-ms-200 mm:*:mt-200 mm:*:ms-200", - [SPACINGS.THREE_HUNDRED]: "mm:-mt-300 mm:-ms-300 mm:*:mt-300 mm:*:ms-300", - [SPACINGS.FOUR_HUNDRED]: "mm:-mt-400 mm:-ms-400 mm:*:mt-400 mm:*:ms-400", - [SPACINGS.FIVE_HUNDRED]: "mm:-mt-500 mm:-ms-500 mm:*:mt-500 mm:*:ms-500", - [SPACINGS.SIX_HUNDRED]: "mm:-mt-600 mm:-ms-600 mm:*:mt-600 mm:*:ms-600", - [SPACINGS.EIGHT_HUNDRED]: "mm:-mt-800 mm:-ms-800 mm:*:mt-800 mm:*:ms-800", - [SPACINGS.ONE_THOUSAND]: "mm:-mt-1000 mm:-ms-1000 mm:*:mt-1000 mm:*:ms-1000", - [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "mm:-mt-1200 mm:-ms-1200 mm:*:mt-1200 mm:*:ms-1200", - [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "mm:-mt-1600 mm:-ms-1600 mm:*:mt-1600 mm:*:ms-1600", - [DEPRECATED_SPACINGS.XXXSMALL]: "mm:-mt-50 mm:-ms-50 mm:*:mt-50 mm:*:ms-50", // deprecated - [DEPRECATED_SPACINGS.XXSMALL]: "mm:-mt-100 mm:-ms-100 mm:*:mt-100 mm:*:ms-100", // deprecated - [DEPRECATED_SPACINGS.XSMALL]: "mm:-mt-200 mm:-ms-200 mm:*:mt-200 mm:*:ms-200", // deprecated - [DEPRECATED_SPACINGS.SMALL]: "mm:-mt-300 mm:-ms-300 mm:*:mt-300 mm:*:ms-300", // deprecated - [DEPRECATED_SPACINGS.MEDIUM]: "mm:-mt-400 mm:-ms-400 mm:*:mt-400 mm:*:ms-400", // deprecated - [DEPRECATED_SPACINGS.LARGE]: "mm:-mt-600 mm:-ms-600 mm:*:mt-600 mm:*:ms-600", // deprecated - [DEPRECATED_SPACINGS.XLARGE]: "mm:-mt-800 mm:-ms-800 mm:*:mt-800 mm:*:ms-800", // deprecated - [DEPRECATED_SPACINGS.XXLARGE]: "mm:-mt-1000 mm:-ms-1000 mm:*:mt-1000 mm:*:ms-1000", // deprecated - [DEPRECATED_SPACINGS.XXXLARGE]: "mm:-mt-[52px] mm:-ms-[52px] mm:*:mt-[52px] mm:*:ms-[52px]", // deprecated + [SPACINGS.FIFTY]: "mm:gap-50", + [SPACINGS.ONE_HUNDRED]: "mm:gap-100", + [SPACINGS.ONE_HUNDRED_FIFTY]: "mm:gap-150", + [SPACINGS.TWO_HUNDRED]: "mm:gap-200", + [SPACINGS.THREE_HUNDRED]: "mm:gap-300", + [SPACINGS.FOUR_HUNDRED]: "mm:gap-400", + [SPACINGS.FIVE_HUNDRED]: "mm:gap-500", + [SPACINGS.SIX_HUNDRED]: "mm:gap-600", + [SPACINGS.EIGHT_HUNDRED]: "mm:gap-800", + [SPACINGS.ONE_THOUSAND]: "mm:gap-1000", + [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: "mm:gap-1200", + [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: "mm:gap-1600", + [DEPRECATED_SPACINGS.XXXSMALL]: "mm:gap-50", // deprecated + [DEPRECATED_SPACINGS.XXSMALL]: "mm:gap-100", // deprecated + [DEPRECATED_SPACINGS.XSMALL]: "mm:gap-200", // deprecated + [DEPRECATED_SPACINGS.SMALL]: "mm:gap-300", // deprecated + [DEPRECATED_SPACINGS.MEDIUM]: "mm:gap-400", // deprecated + [DEPRECATED_SPACINGS.LARGE]: "mm:gap-600", // deprecated + [DEPRECATED_SPACINGS.XLARGE]: "mm:gap-800", // deprecated + [DEPRECATED_SPACINGS.XXLARGE]: "mm:gap-1000", // deprecated + [DEPRECATED_SPACINGS.XXXLARGE]: "mm:gap-[52px]", // deprecated }, }; diff --git a/packages/orbit-components/src/Slider/components/Handle/index.tsx b/packages/orbit-components/src/Slider/components/Handle/index.tsx index 373fa616b4..d250c2bad8 100644 --- a/packages/orbit-components/src/Slider/components/Handle/index.tsx +++ b/packages/orbit-components/src/Slider/components/Handle/index.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import cx from "clsx"; -import { left as leftRight } from "../../../utils/rtl"; import type { Value } from "../../types"; import useTheme from "../../../hooks/useTheme"; @@ -87,8 +86,7 @@ const Handle = ({ onTop && "z-20", )} style={{ - // TODO use inset-inline-start once we don’t support ios_safari 14 - [leftRight({ theme })]: `calc(${left}% - ${theme.orbit.space300})`, + insetInlineStart: `calc(${left}% - ${theme.orbit.space300})`, }} data-test={dataTest} tabIndex={0} diff --git a/packages/orbit-components/src/common/tailwind/spacing.ts b/packages/orbit-components/src/common/tailwind/spacing.ts index fe86c6a7de..81794b4307 100644 --- a/packages/orbit-components/src/common/tailwind/spacing.ts +++ b/packages/orbit-components/src/common/tailwind/spacing.ts @@ -466,315 +466,13 @@ export const gapTokens = { }, }; -const safariVerticalTokens = { - [SPACING.REVERSE]: "safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "safari:not-last:*:space-y-none", - [SPACING.FIFTY]: "safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "safari:not-last:*:space-y-50", // deprecated - [SPACING.XXSMALL]: "safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "safari:not-last:*:space-y-[52px]", // deprecated - [QUERIES.MEDIUMMOBILE]: { - [SPACING.REVERSE]: "mm:safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "mm:safari:*:not-last:space-y-none", - [SPACING.FIFTY]: "mm:safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "mm:safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "mm:safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "mm:safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "mm:safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "mm:safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "mm:safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "mm:safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "mm:safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "mm:safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "mm:safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "mm:safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "mm:safari:*:not-last:space-y-50", // deprecated - [SPACING.XXSMALL]: "mm:safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "mm:safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "mm:safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "mm:safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "mm:safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "mm:safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "mm:safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "mm:safari:not-last:*:space-y-[52px]", // deprecated - }, - [QUERIES.LARGEMOBILE]: { - [SPACING.REVERSE]: "lm:safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "lm:safari:not-last:*:space-y-none", - [SPACING.FIFTY]: "lm:safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "lm:safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "lm:safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "lm:safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "lm:safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "lm:safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "lm:safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "lm:safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "lm:safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "lm:safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "lm:safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "lm:safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "lm:safari:not-last:*:space-y-50", // deprecated - [SPACING.XXSMALL]: "lm:safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "lm:safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "lm:safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "lm:safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "lm:safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "lm:safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "lm:safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "lm:safari:not-last:*:space-y-[52px]", // deprecated - }, - [QUERIES.TABLET]: { - [SPACING.REVERSE]: "tb:safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "tb:safari:not-last:*:space-y-none", - [SPACING.FIFTY]: "tb:safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "tb:safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "tb:safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "tb:safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "tb:safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "tb:safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "tb:safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "tb:safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "tb:safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "tb:safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "tb:safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "tb:safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "tb:safari:not-last:*:space-y-50", // deprecated - [SPACING.XXSMALL]: "tb:safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "tb:safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "tb:safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "tb:safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "tb:safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "tb:safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "tb:safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "tb:safari:not-last:*:space-y-[52px]", // deprecated - }, - [QUERIES.DESKTOP]: { - [SPACING.REVERSE]: "de:safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "de:safari:not-last:*:space-y-none", - [SPACING.FIFTY]: "de:safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "de:safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "de:safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "de:safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "de:safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "de:safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "de:safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "de:safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "de:safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "de:safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "de:safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "de:safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "de:safari:not-last:*:space-y-50", // deprecated - [SPACING.XXSMALL]: "de:safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "de:safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "de:safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "de:safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "de:safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "de:safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "de:safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "de:safari:not-last:*:space-y-[52px]", // deprecated - }, - [QUERIES.LARGEDESKTOP]: { - [SPACING.REVERSE]: "ld:safari:not-last:*:space-y-reverse", - [SPACING.NONE]: "ld:safari:not-last:*:space-y-none", - [SPACING.FIFTY]: "ld:safari:not-last:*:space-y-50", - [SPACING.ONE_HUNDRED]: "ld:safari:not-last:*:space-y-100", - [SPACING.ONE_HUNDRED_FIFTY]: "ld:safari:not-last:*:space-y-150", - [SPACING.TWO_HUNDRED]: "ld:safari:not-last:*:space-y-200", - [SPACING.THREE_HUNDRED]: "ld:safari:not-last:*:space-y-300", - [SPACING.FOUR_HUNDRED]: "ld:safari:not-last:*:space-y-400", - [SPACING.FIVE_HUNDRED]: "ld:safari:not-last:*:space-y-500", - [SPACING.SIX_HUNDRED]: "ld:safari:not-last:*:space-y-600", - [SPACING.EIGHT_HUNDRED]: "ld:safari:not-last:*:space-y-800", - [SPACING.ONE_THOUSAND]: "ld:safari:not-last:*:space-y-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "ld:safari:not-last:*:space-y-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "ld:safari:not-last:*:space-y-1600", - [SPACING.XXXSMALL]: "ld:safari:not-last:*:space-y-50", // deprecated - [SPACING.XXSMALL]: "ld:safari:not-last:*:space-y-100", // deprecated - [SPACING.XSMALL]: "ld:safari:not-last:*:space-y-200", // deprecated - [SPACING.SMALL]: "ld:safari:not-last:*:space-y-300", // depcrecated - [SPACING.MEDIUM]: "ld:safari:not-last:*:space-y-400", // deprecated - [SPACING.LARGE]: "ld:safari:not-last:*:space-y-600", // deprecated - [SPACING.XLARGE]: "ld:safari:not-last:*:space-y-800", // deprecated - [SPACING.XXLARGE]: "ld:safari:not-last:*:space-y-1000", // deprecated - [SPACING.XXXLARGE]: "ld:safari:not-last:*:space-y-[52px]", // deprecated - }, -}; - -const safariHorizontalTokens = { - [SPACING.REVERSE]: "safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "safari:not-last:*:space-x-[52px]", // deprecated - [QUERIES.MEDIUMMOBILE]: { - [SPACING.REVERSE]: "mm:safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "mm:safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "mm:safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "mm:safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "mm:safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "mm:safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "mm:safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "mm:safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "mm:safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "mm:safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "mm:safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "mm:safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "mm:safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "mm:safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "mm:safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "mm:safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "mm:safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "mm:safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "mm:safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "mm:safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "mm:safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "mm:safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "mm:safari:not-last:*:space-x-[52px]", // deprecated - }, - [QUERIES.LARGEMOBILE]: { - [SPACING.REVERSE]: "lm:safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "lm:safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "lm:safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "lm:safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "lm:safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "lm:safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "lm:safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "lm:safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "lm:safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "lm:safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "lm:safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "lm:safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "lm:safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "lm:safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "lm:safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "lm:safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "lm:safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "lm:safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "lm:safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "lm:safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "lm:safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "lm:safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "lm:safari:not-last:*:space-x-[52px]", // deprecated - }, - [QUERIES.TABLET]: { - [SPACING.REVERSE]: "tb:safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "tb:safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "tb:safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "tb:safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "tb:safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "tb:safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "tb:safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "tb:safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "tb:safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "tb:safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "tb:safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "tb:safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "tb:safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "tb:safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "tb:safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "tb:safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "tb:safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "tb:safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "tb:safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "tb:safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "tb:safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "tb:safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "tb:safari:not-last:*:space-x-[52px]", // deprecated - }, - [QUERIES.DESKTOP]: { - [SPACING.REVERSE]: "de:safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "de:safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "de:safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "de:safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "de:safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "de:safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "de:safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "de:safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "de:safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "de:safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "de:safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "de:safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "de:safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "de:safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "de:safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "de:safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "de:safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "de:safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "de:safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "de:safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "de:safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "de:safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "de:safari:not-last:*:space-x-[52px]", // deprecated - }, - [QUERIES.LARGEDESKTOP]: { - [SPACING.REVERSE]: "ld:safari:not-last:*:space-x-reverse", - [SPACING.NONE]: "ld:safari:not-last:*:space-x-none", - [SPACING.FIFTY]: "ld:safari:not-last:*:space-x-50", - [SPACING.ONE_HUNDRED]: "ld:safari:not-last:*:space-x-100", - [SPACING.ONE_HUNDRED_FIFTY]: "ld:safari:not-last:*:space-x-150", - [SPACING.TWO_HUNDRED]: "ld:safari:not-last:*:space-x-200", - [SPACING.THREE_HUNDRED]: "ld:safari:not-last:*:space-x-300", - [SPACING.FOUR_HUNDRED]: "ld:safari:not-last:*:space-x-400", - [SPACING.FIVE_HUNDRED]: "ld:safari:not-last:*:space-x-500", - [SPACING.SIX_HUNDRED]: "ld:safari:not-last:*:space-x-600", - [SPACING.EIGHT_HUNDRED]: "ld:safari:not-last:*:space-x-800", - [SPACING.ONE_THOUSAND]: "ld:safari:not-last:*:space-x-1000", - [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "ld:safari:not-last:*:space-x-1200", - [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "ld:safari:not-last:*:space-x-1600", - [SPACING.XXXSMALL]: "ld:safari:not-last:*:space-x-50", // deprecated - [SPACING.XXSMALL]: "ld:safari:not-last:*:space-x-100", // deprecated - [SPACING.XSMALL]: "ld:safari:not-last:*:space-x-200", // deprecated - [SPACING.SMALL]: "ld:safari:not-last:*:space-x-300", // depcrecated - [SPACING.MEDIUM]: "ld:safari:not-last:*:space-x-400", // deprecated - [SPACING.LARGE]: "ld:safari:not-last:*:space-x-600", // deprecated - [SPACING.XLARGE]: "ld:safari:not-last:*:space-x-800", // deprecated - [SPACING.XXLARGE]: "ld:safari:not-last:*:space-x-1000", // deprecated - [SPACING.XXXLARGE]: "ld:safari:not-last:*:space-x-[52px]", // deprecated - }, -}; - const getSpacingClasses = ( spacing: `${SPACING}`, viewport?: QUERIES, direction: Direction = "row", - legacy = false, + useMargins = false, ): string => { - if (legacy) { + if (useMargins) { const horizontalRoot = viewport ? horizontalTokens[viewport] : horizontalTokens; const verticalRoot = viewport ? verticalTokens[viewport] : verticalTokens; @@ -795,18 +493,7 @@ const getSpacingClasses = ( return tokens; } - // TODO: refactor after iOS Safari 14.1 support drop - return viewport - ? cx( - gapTokens[viewport][spacing], - safariHorizontalTokens[viewport][spacing], - direction === "column" && safariVerticalTokens[viewport][spacing], - ) - : cx( - gapTokens[spacing], - safariHorizontalTokens[spacing], - direction === "column" && safariVerticalTokens[spacing], - ); + return viewport ? cx(gapTokens[viewport][spacing]) : cx(gapTokens[spacing]); }; export default getSpacingClasses; diff --git a/packages/orbit-components/src/hooks/useMediaQuery/index.ts b/packages/orbit-components/src/hooks/useMediaQuery/index.ts index 35a9f2cb37..2dede577fd 100644 --- a/packages/orbit-components/src/hooks/useMediaQuery/index.ts +++ b/packages/orbit-components/src/hooks/useMediaQuery/index.ts @@ -41,12 +41,7 @@ const useMediaQuery = () => { return next; }); }; - if (typeof mqList.addEventListener === "function") { - mqList.addEventListener("change", listenerMap[query]); - } else { - // for browsers like Safari 13 - mqList.addListener(listenerMap[query]); - } + mqList.addEventListener("change", listenerMap[query]); return mqList; }; @@ -75,12 +70,7 @@ const useMediaQuery = () => { return () => { if (mqListMap) { QUERIES.forEach(query => { - if (typeof mqListMap[query].removeEventListener === "function") { - mqListMap[query].removeEventListener("change", listenerMap[query]); - } else { - // for browsers like Safari 13 - mqListMap[query].removeListener(listenerMap[query]); - } + mqListMap[query].removeEventListener("change", listenerMap[query]); }); } };