Skip to content

Commit

Permalink
Merge pull request #3904 from Sage/FE-3572-margin-settings-row
Browse files Browse the repository at this point in the history
feat(settings-row): add support for styled system margin props FE-3572
edleeks87 authored Apr 15, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 522bf1d + 88276d6 commit 0a0cfc0
Showing 4 changed files with 25 additions and 3 deletions.
9 changes: 9 additions & 0 deletions src/components/settings-row/settings-row.component.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import React from "react";
import PropTypes from "prop-types";
import styledSystemPropTypes from "@styled-system/prop-types";
import Heading from "../heading";
import tagComponent from "../../utils/helpers/tags";
import { filterStyledSystemMarginProps } from "../../style/utils";

import {
StyledSettingsRow,
StyledSettingsRowHeader,
StyledSettingsRowInput,
} from "./settings-row.style";

const marginPropTypes = filterStyledSystemMarginProps(
styledSystemPropTypes.space
);

const SettingsRow = ({
title,
description,
@@ -35,6 +41,8 @@ const SettingsRow = ({
className={className}
hasDivider={divider}
{...tagComponent("settings-row", rest)}
m={0}
{...filterStyledSystemMarginProps(rest)}
>
<StyledSettingsRowHeader>{heading()}</StyledSettingsRowHeader>
<StyledSettingsRowInput>{children}</StyledSettingsRowInput>
@@ -43,6 +51,7 @@ const SettingsRow = ({
};

SettingsRow.propTypes = {
...marginPropTypes,
/** This component supports children. */
children: PropTypes.node,
/** The CSS classes to apply to the component. */
7 changes: 6 additions & 1 deletion src/components/settings-row/settings-row.spec.js
Original file line number Diff line number Diff line change
@@ -9,10 +9,15 @@ import {
} from "./settings-row.style";
import Heading from "../heading";
import { rootTagTest } from "../../utils/helpers/tags/tags-specs";
import { assertStyleMatch } from "../../__spec_helper__/test-utils";
import {
assertStyleMatch,
testStyledSystemMargin,
} from "../../__spec_helper__/test-utils";
import baseTheme from "../../style/themes/base";

describe("SettingsRow", () => {
testStyledSystemMargin((props) => <SettingsRow {...props} />, { m: "0" });

describe("render", () => {
const name = "foobar-row";
const title = "Some Title";
8 changes: 7 additions & 1 deletion src/components/settings-row/settings-row.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState } from "react";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import StyledSystemProps from '../../../.storybook/utils/styled-system-props';

import SettingsRow from ".";

@@ -45,4 +46,9 @@ All `children` are rendered in the input column to the right of the header colum
## Props

### Settings Row
<Props of={SettingsRow} />

<StyledSystemProps
of={SettingsRow}
margin
noHeader
/>
4 changes: 3 additions & 1 deletion src/components/settings-row/settings-row.style.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled, { css } from "styled-components";
import { margin } from "styled-system";
import baseTheme from "../../style/themes/base";
import {
StyledHeader,
@@ -7,12 +8,13 @@ import {
} from "../heading/heading.style";

export const StyledSettingsRow = styled.div`
${margin}
clear: both;
color: ${({ theme }) => theme.palette.slateTint(20)};
display: flex;
font-size: 14px;
justify-content: space-between;
margin: 0;
padding: 0;
position: relative;

0 comments on commit 0a0cfc0

Please sign in to comment.