Skip to content

Commit

Permalink
remove box className usages
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoskolodny
marcoskolodny committed Oct 8, 2024
1 parent b469184 commit 4456a4f
Show file tree
Hide file tree
Showing 14 changed files with 137 additions and 99 deletions.
7 changes: 3 additions & 4 deletions src/__stories__/custom-field-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,8 @@ const Options = ({
}
`}</style>
{options.map((option) => (
<Box
paddingX={16}
paddingY={8}
<div
style={{paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8}}
key={option.value}
className={classNames('option', {
selected: option.value === tentativeValueState,
Expand Down Expand Up @@ -188,7 +187,7 @@ const Options = ({
{option.value}
</Text1>
</Touchable>
</Box>
</div>
))}
{options.length === 0 ? (
<Box paddingX={16} paddingY={8}>
Expand Down
21 changes: 19 additions & 2 deletions src/card.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,10 @@ export const mediaCardContent = style([
]);

export const mediaCardAsset = style([
sprinkles({
paddingLeft: {mobile: 16, desktop: 24},
paddingTop: {mobile: 16, desktop: 24},
}),
{
position: 'absolute',
zIndex: 1,
Expand Down Expand Up @@ -352,6 +356,9 @@ export const displayCardContent = style({
zIndex: 2,
});

export const displayCardContentWithTopContent = sprinkles({paddingTop: 24});
export const displayCardContentWithAsset = sprinkles({paddingTop: {mobile: 16, desktop: 24}});

export const displayCardBackground = style({
position: 'absolute',
objectFit: 'cover',
Expand All @@ -360,8 +367,18 @@ export const displayCardBackground = style({
zIndex: 0,
});

export const displayCardGradient = style({
background: skinVars.colors.cardContentOverlay,
export const displayCardContentWrapper = sprinkles({paddingX: 24, paddingBottom: 24});

export const displayCardGradient = style([
sprinkles({paddingTop: 40}),
{
background: skinVars.colors.cardContentOverlay,
},
]);

export const posterCardContentWrapper = sprinkles({
paddingX: {mobile: 16, desktop: 24},
paddingBottom: 24,
});

const aspectRatio = createVar();
Expand Down
54 changes: 23 additions & 31 deletions src/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -596,19 +596,15 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
/>
</div>
{asset && (
<Box
className={styles.mediaCardAsset}
paddingLeft={{mobile: 16, desktop: 24}}
paddingTop={{mobile: 16, desktop: 24}}
>
<div className={styles.mediaCardAsset}>
<div
style={applyCssVars({
[mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
})}
>
{asset}
</div>
</Box>
</div>
)}
</div>
</BaseTouchable>
Expand Down Expand Up @@ -704,19 +700,15 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
/>
</div>
{asset && (
<Box
className={styles.mediaCardAsset}
paddingLeft={{mobile: 16, desktop: 24}}
paddingTop={{mobile: 16, desktop: 24}}
>
<div className={styles.mediaCardAsset}>
<div
style={applyCssVars({
[mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
})}
>
{asset}
</div>
</Box>
</div>
)}
</div>
</BaseTouchable>
Expand Down Expand Up @@ -1342,11 +1334,10 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
}
/>
)}
<Box
paddingX={24}
paddingTop={withGradient ? 40 : 0}
paddingBottom={24}
className={withGradient ? styles.displayCardGradient : undefined}
<div
className={classNames(styles.displayCardContentWrapper, {
[styles.displayCardGradient]: withGradient,
})}
>
<Stack space={24}>
<DisplayCardContent
Expand Down Expand Up @@ -1409,7 +1400,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
/>
)}
</Stack>
</Box>
</div>
</div>
</div>
</BaseTouchable>
Expand Down Expand Up @@ -1614,13 +1605,15 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
</div>
</ThemeVariant>
)}
<Box
className={styles.displayCardContent}
paddingTop={
<div
className={classNames(
styles.displayCardContent,
withGradient && !asset && !hasTopActions && !hasVideo
? 0
: {mobile: asset ? 16 : 24, desktop: 24}
}
? undefined
: asset
? styles.displayCardContentWithAsset
: styles.displayCardContentWithTopContent
)}
>
{asset ? (
<div
Expand All @@ -1642,11 +1635,10 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
}
/>
)}
<Box
paddingX={{mobile: 16, desktop: 24}}
paddingTop={withGradient ? 40 : 0}
paddingBottom={24}
className={withGradient ? styles.displayCardGradient : undefined}
<div
className={classNames(styles.posterCardContentWrapper, {
[styles.displayCardGradient]: withGradient,
})}
>
<DisplayCardContent
title={
Expand Down Expand Up @@ -1710,8 +1702,8 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
extra={extra}
extraRef={extraRef}
/>
</Box>
</Box>
</div>
</div>
</div>
</BaseTouchable>
</InternalBoxed>
Expand Down
21 changes: 19 additions & 2 deletions src/chip.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,25 @@ export const chipInteractiveVariants = styleVariants({
],
});

export const icon = style({color: vars.colors.neutralMedium});
export const iconActive = style({color: vars.colors.controlActivated});
export const icon = style([
sprinkles({paddingRight: 4}),
{color: vars.colors.neutralMedium, paddingRight: 4},
]);

export const iconActive = style([
sprinkles({paddingRight: 4}),
{color: vars.colors.controlActivated, paddingRight: 4},
]);

export const leftPadding = styleVariants({
default: [sprinkles({paddingLeft: {mobile: 20, desktop: 12}})],
withIcon: [sprinkles({paddingLeft: {mobile: 16, desktop: 8}})],
});

export const rightPadding = styleVariants({
default: [sprinkles({paddingRight: {mobile: 20, desktop: 12}})],
withIcon: [sprinkles({paddingRight: {mobile: 16, desktop: 8}})],
});

globalStyle(`${interactive}:hover:not(${chipActive}) > ${icon}`, {
'@media': {
Expand Down
33 changes: 15 additions & 18 deletions src/chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {vars} from './skins/skin-contract.css';
import {useThemeVariant} from './theme-variant-context';
import Touchable, {BaseTouchable} from './touchable';
import * as tokens from './text-tokens';
import {getPrefixedDataAttributes} from './utils/dom';

import type {TouchableComponentProps} from './touchable';
import type {ExclusifyUnion} from './utils/utility-types';
Expand Down Expand Up @@ -44,16 +45,12 @@ const Chip = (props: ChipProps): JSX.Element => {

const overAlternative = useThemeVariant() === 'alternative';

const paddingLeft = Icon ? ({mobile: 16, desktop: 8} as const) : ({mobile: 20, desktop: 12} as const);
const paddingRight = {mobile: 20, desktop: 12} as const;
const paddingIcon = {mobile: 16, desktop: 8} as const;

const body = (
<>
{Icon && (
<Box paddingRight={4} className={active ? styles.iconActive : styles.icon}>
<div className={active ? styles.iconActive : styles.icon}>
<Icon color="currentColor" size={pxToRem(16)} />
</Box>
</div>
)}
<Box paddingRight={badge ? 8 : 0 || onClose ? 4 : 0}>
<Text2 id={id} weight={textPresets.indicator.weight} truncate={1} color="currentColor">
Expand All @@ -67,14 +64,14 @@ const Chip = (props: ChipProps): JSX.Element => {

if (onClose) {
return (
<Box
<div
className={classnames(
overAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
styles.chipWrapper
styles.chipWrapper,
Icon ? styles.leftPadding.withIcon : styles.leftPadding.default,
styles.rightPadding.withIcon
)}
paddingLeft={paddingLeft}
paddingRight={paddingIcon}
dataAttributes={chipDataAttributes}
{...getPrefixedDataAttributes(chipDataAttributes)}
>
{body}
<Touchable
Expand All @@ -90,7 +87,7 @@ const Chip = (props: ChipProps): JSX.Element => {
>
<IconCloseRegular size={pxToRem(16)} color={vars.colors.neutralMedium} />
</Touchable>
</Box>
</div>
);
}
const isTouchable = props.href || props.onPress || props.to;
Expand All @@ -104,22 +101,22 @@ const Chip = (props: ChipProps): JSX.Element => {
};

const renderContent = (dataAttributes?: DataAttributes) => (
<Box
<div
className={classnames(
styles.chipVariants[active ? 'active' : overAlternative ? 'overAlternative' : 'default'],
// If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
isTouchable ? styles.wrappedContent : styles.chipWrapper,
{
[styles.chipInteractiveVariants[isDarkMode ? 'dark' : 'light']]: isInteractive,
}
},
Icon ? styles.leftPadding.withIcon : styles.leftPadding.default,
badge ? styles.rightPadding.withIcon : styles.rightPadding.default
)}
paddingLeft={paddingLeft}
paddingRight={badge ? paddingIcon : paddingRight}
dataAttributes={dataAttributes}
{...getPrefixedDataAttributes(dataAttributes)}
>
{body}
{renderBadge()}
</Box>
</div>
);

if (isTouchable) {
Expand Down
4 changes: 2 additions & 2 deletions src/community/advanced-data-card.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const cardContentStyle = style([
},
]);

export const zindex = style({zIndex: -1});
export const extra = style([sprinkles({paddingTop: 16, paddingBottom: 24}), {zIndex: -1}]);

export const MIN_HEIGHT = 216;
export const minHeight = style({minHeight: MIN_HEIGHT});
Expand Down Expand Up @@ -227,7 +227,7 @@ export const buttonMobile = style([
},
]);

export const footerImage = sprinkles({alignItems: 'center', display: 'flex'});
export const footerImage = sprinkles({alignItems: 'center', display: 'flex', paddingRight: 16});

export const footerDirection = style([
sprinkles({
Expand Down
8 changes: 4 additions & 4 deletions src/community/advanced-data-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,15 +166,15 @@ const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, button
)}
>
{hasFooterImage && (
<Box paddingRight={16} className={styles.footerImage}>
<div className={styles.footerImage}>
<div
style={applyCssVars({
[mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
})}
>
{footerImage}
</div>
</Box>
</div>
)}

{hasFooterText && (
Expand Down Expand Up @@ -333,7 +333,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
</div>
<div style={{flexGrow: 1}} />
{hasExtras && (
<Box paddingTop={16} paddingBottom={24} width="100%" className={styles.zindex}>
<div className={styles.extra}>
{extra.map((item, index) => {
return (
<div key={index}>
Expand All @@ -347,7 +347,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
</div>
);
})}
</Box>
</div>
)}
</Touchable>
{hasFooter && <CardFooter {...footerProps} />}
Expand Down
Loading

0 comments on commit 4456a4f

Please sign in to comment.