From 3993cc5f0b22aed7fe23b6e345df1692e2a4ede4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 13 Jul 2021 14:12:24 +0200 Subject: [PATCH] Reduce the thickness of the Hr component --- .changeset/seven-radios-help.md | 5 +++++ packages/circuit-ui/components/Hr/Hr.docs.mdx | 10 +++++----- packages/circuit-ui/components/Hr/Hr.tsx | 5 +++-- .../components/Hr/__snapshots__/Hr.spec.tsx.snap | 3 ++- .../Separator/__snapshots__/Separator.spec.js.snap | 3 ++- 5 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 .changeset/seven-radios-help.md diff --git a/.changeset/seven-radios-help.md b/.changeset/seven-radios-help.md new file mode 100644 index 0000000000..d843fa923d --- /dev/null +++ b/.changeset/seven-radios-help.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Reduced the thickness of the Hr (horizontal rule) component. diff --git a/packages/circuit-ui/components/Hr/Hr.docs.mdx b/packages/circuit-ui/components/Hr/Hr.docs.mdx index 5d92e8a69e..026a43c9f8 100644 --- a/packages/circuit-ui/components/Hr/Hr.docs.mdx +++ b/packages/circuit-ui/components/Hr/Hr.docs.mdx @@ -1,19 +1,19 @@ import { Status, Props, Story } from '../../../../.storybook/components'; -# HR +# Hr -HR provides a visual line that separates content into sections +A horizontal rule visually and semantically separates content into sections. ## When to use it -Use it when you need to separate different sections of a certain content within a body text or a list of data within a card. +Use it when you need to separate different sections of content within body copy or a list of data within a card. ## Usage guidelines -- **Do** proper space the HR from the sections to make sure the division is clear -- **Do not** use HR to separate totally different content, it is used to break sections on a related content +- **Do** properly space the HR from the sections to make sure the division is clear +- **Do not** use HR to separate totally different content, it is used to break sections of related content diff --git a/packages/circuit-ui/components/Hr/Hr.tsx b/packages/circuit-ui/components/Hr/Hr.tsx index d3d832b69a..68008b944f 100644 --- a/packages/circuit-ui/components/Hr/Hr.tsx +++ b/packages/circuit-ui/components/Hr/Hr.tsx @@ -21,12 +21,13 @@ const baseStyles = ({ theme }: StyleProps) => css` label: hr; display: block; width: 100%; - border: 1px solid ${theme.colors.n300}; + border: 0; + border-top: 1px solid ${theme.colors.n300}; margin-top: ${theme.spacings.mega}; margin-bottom: ${theme.spacings.mega}; `; /** - * A horizontal rule to visually and semantically separate text. + * A horizontal rule to visually and semantically separate content. */ export const Hr = styled('hr')(baseStyles); diff --git a/packages/circuit-ui/components/Hr/__snapshots__/Hr.spec.tsx.snap b/packages/circuit-ui/components/Hr/__snapshots__/Hr.spec.tsx.snap index 49fac628a4..e518a15c13 100644 --- a/packages/circuit-ui/components/Hr/__snapshots__/Hr.spec.tsx.snap +++ b/packages/circuit-ui/components/Hr/__snapshots__/Hr.spec.tsx.snap @@ -4,7 +4,8 @@ exports[`Hr should render with default styles 1`] = ` .circuit-0 { display: block; width: 100%; - border: 1px solid #CCC; + border: 0; + border-top: 1px solid #CCC; margin-top: 16px; margin-bottom: 16px; } diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/__snapshots__/Separator.spec.js.snap b/packages/circuit-ui/components/Sidebar/components/Separator/__snapshots__/Separator.spec.js.snap index ed8ed01165..9bde3c0091 100644 --- a/packages/circuit-ui/components/Sidebar/components/Separator/__snapshots__/Separator.spec.js.snap +++ b/packages/circuit-ui/components/Sidebar/components/Separator/__snapshots__/Separator.spec.js.snap @@ -4,7 +4,8 @@ exports[`Separator should render with default styles 1`] = ` .circuit-0 { display: block; width: 100%; - border: 1px solid #CCC; + border: 0; + border-top: 1px solid #CCC; margin-top: 16px; margin-bottom: 16px; border: 1px solid #666;