Skip to content

Commit

Permalink
feat: make spacing property as optional
Browse files Browse the repository at this point in the history
  • Loading branch information
mlecoq committed May 24, 2023
1 parent 9610aac commit 9ac7f27
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 4 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## next

- Added: defining spacing in theme is now optional [#257](https://github.com/Shopify/restyle/pull/257) by [mlecoq](https://github.com/mlecoq)

## 2.4.2 - 2023-03-30

- Fixed: Variant with breakpoints memoizing separate values into the same hash key by deconstructing breakpoint objects into strings [#241](https://github.com/Shopify/restyle/pull/241) by [mattfrances](https://github.com/mattfrances)
Expand Down
1 change: 0 additions & 1 deletion src/context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {BaseTheme} from 'types';

export const ThemeContext = React.createContext({
colors: {},
spacing: {},
});

export const ThemeProvider = ({
Expand Down
4 changes: 2 additions & 2 deletions src/restyleFunctions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -310,14 +310,14 @@ export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {

export type SpacingProps<Theme extends BaseTheme> = {
[Key in keyof typeof spacingProperties]?: ResponsiveValue<
keyof Theme['spacing'],
Theme['spacing'] extends object ? keyof Theme['spacing'] : number,
Theme['breakpoints']
>;
};

export type SpacingShorthandProps<Theme extends BaseTheme> = {
[Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
keyof Theme['spacing'],
Theme['spacing'] extends object ? keyof Theme['spacing'] : number,
Theme['breakpoints']
>;
};
Expand Down
33 changes: 33 additions & 0 deletions src/test/createRestyleComponent.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,16 @@ const themeWithVariant = {
},
};

const themeWithoutSpacing = {
...theme,
spacing: undefined,
};

const {breakpoints, ...themeWithoutBreakpoints} = theme;

type Theme = typeof theme;
type ThemeWithVariant = typeof themeWithVariant;
type ThemeWithoutSpacing = typeof themeWithoutSpacing;

const mockUseWindowDimensions = jest.fn();

Expand All @@ -67,6 +73,14 @@ const Component = createRestyleComponent<
ViewProps,
Theme
>([backgroundColor, spacing, spacingShorthand, opacity]);
const ComponentWithoutSpacing = createRestyleComponent<
BackgroundColorProps<ThemeWithoutSpacing> &
SpacingProps<ThemeWithoutSpacing> &
SpacingShorthandProps<ThemeWithoutSpacing> &
OpacityProps<ThemeWithoutSpacing> &
ViewProps,
ThemeWithoutSpacing
>([backgroundColor, spacing, spacingShorthand, opacity]);
const cardVariant = createVariant<ThemeWithVariant, 'cardVariants'>({
themeKey: 'cardVariants',
});
Expand Down Expand Up @@ -230,5 +244,24 @@ describe('createRestyleComponent', () => {
style: [{gap: 8, columnGap: 8, rowGap: 8}],
});
});

it('passes gap values from the theme when no spacing prop is defined', () => {
const {root} = render(
<ThemeProvider theme={themeWithoutSpacing}>
<ComponentWithoutSpacing
gap={10}
columnGap={20}
rowGap={22}
marginTop={2}
paddingBottom={3}
/>
</ThemeProvider>,
);
expect(root.findByType(View).props).toStrictEqual({
style: [
{gap: 10, columnGap: 20, rowGap: 22, marginTop: 2, paddingBottom: 3},
],
});
});
});
});
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export interface KnownBaseTheme {
colors: {
[key: string]: string;
};
spacing: {
spacing?: {
[key: string]: number | string;
};
breakpoints?: {
Expand Down

0 comments on commit 9ac7f27

Please sign in to comment.