Skip to content

Commit

Permalink
[Card] remove se23 logic (#9991)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Fixes #9925 

### WHAT is this pull request doing?

Removes se23 beta conditional logic for ActionList.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
  • Loading branch information
gwyneplaine authored Aug 16, 2023
1 parent 700a72f commit bf6c7a6
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 59 deletions.
48 changes: 10 additions & 38 deletions polaris-react/src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {useBreakpoints} from '../../utilities/breakpoints';
import type {ResponsiveProp} from '../../utilities/css';
import {Box} from '../Box';
import {ShadowBevel} from '../ShadowBevel';
import {useFeatures} from '../../utilities/features';
import {WithinContentContext} from '../../utilities/within-content-context';

type Spacing = ResponsiveProp<SpaceScale>;
Expand All @@ -35,25 +34,11 @@ export interface CardProps {
export const Card = ({
children,
background = 'bg',
padding = {xs: '4', sm: '5'},
padding = {xs: '4'},
roundedAbove,
}: CardProps) => {
const breakpoints = useBreakpoints();
const {polarisSummerEditions2023} = useFeatures();
const defaultBorderRadius: BorderRadiusScale = polarisSummerEditions2023
? '3'
: '2';

const isDefaultPadding =
typeof padding !== 'string' &&
padding?.xs === '4' &&
padding?.sm === '5' &&
padding.md === undefined &&
padding.lg === undefined &&
padding.xl === undefined;

const finalPadding: CardProps['padding'] =
isDefaultPadding && polarisSummerEditions2023 ? {xs: '4'} : padding;
const defaultBorderRadius: BorderRadiusScale = '3';

let hasBorderRadius = !roundedAbove;

Expand All @@ -63,34 +48,21 @@ export const Card = ({

return (
<WithinContentContext.Provider value>
{polarisSummerEditions2023 ? (
<ShadowBevel
boxShadow="xs"
borderRadius={hasBorderRadius ? '3' : '0-experimental'}
zIndex="32"
>
<Box
background={background}
padding={finalPadding}
overflowX="hidden"
overflowY="hidden"
minHeight="100%"
>
{children}
</Box>
</ShadowBevel>
) : (
<ShadowBevel
boxShadow="xs"
borderRadius={hasBorderRadius ? defaultBorderRadius : '0-experimental'}
zIndex="32"
>
<Box
background={background}
padding={finalPadding}
shadow="md"
borderRadius={hasBorderRadius ? defaultBorderRadius : undefined}
padding={padding}
overflowX="hidden"
overflowY="hidden"
minHeight="100%"
>
{children}
</Box>
)}
</ShadowBevel>
</WithinContentContext.Provider>
);
};
21 changes: 0 additions & 21 deletions polaris-react/src/components/Card/tests/Card.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,31 +58,10 @@ describe('Card', () => {
{heading}
{subheading}
</Card>,
{features: {polarisSummerEditions2023: true}},
);

expect(card).toContainReactComponent(ShadowBevel, {
borderRadius: '3',
});
});

// se23 -- default borderRadius changed from '2' to '3', border radius on ShadowBevel instead of Box
describe('polarisSummerEditions2023 false', () => {
it('sets default border radius when roundedAbove breakpoint passed in', () => {
setMediaWidth('breakpoints-sm');
const card = mountWithApp(
<Card roundedAbove="sm">
{heading}
{subheading}
</Card>,
{features: {polarisSummerEditions2023: false}},
);

expect(card).toContainReactComponent('div', {
style: expect.objectContaining({
'--pc-box-border-radius': 'var(--p-border-radius-2)',
}),
});
});
});
});

0 comments on commit bf6c7a6

Please sign in to comment.