fix: shape of progressbar and avatar (#939)

There are some issues with borders set as % vs px.
d2iq · Mar 7, 2023 · 11e1f2d · 11e1f2d
1 parent 1867c52
commit 11e1f2d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/packages/avatar/style.ts b/packages/avatar/style.ts
@@ -1,13 +1,10 @@
 import * as React from "react";
 import { css } from "@emotion/css";
-import {
- borderRadiusLarge,
- themeBgSecondary
-} from "../design-tokens/build/js/designTokens";
+import { themeBgSecondary } from "../design-tokens/build/js/designTokens";
 
 export const avatarContainer = css`
  background-color: ${themeBgSecondary};
- border-radius: ${borderRadiusLarge};
+ border-radius: 25%;
  overflow: hidden;
  position: relative;
 

diff --git a/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap b/packages/avatar/tests/__snapshots__/avatar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Avatar renders default 1`] = `
 <DocumentFragment>
  .emotion-0 {
  background-color: var(--themeBgSecondary, #F7F8F9);
- border-radius: 8px;
+ border-radius: 25%;
  overflow: hidden;
  position: relative;
  height: 32px;
@@ -49,7 +49,7 @@ exports[`Avatar renders with a src, size, and label 1`] = `
 <DocumentFragment>
  .emotion-0 {
  background-color: var(--themeBgSecondary, #F7F8F9);
- border-radius: 8px;
+ border-radius: 25%;
  overflow: hidden;
  position: relative;
  height: 64px;

diff --git a/packages/progressbar/components/ProgressBar.tsx b/packages/progressbar/components/ProgressBar.tsx
@@ -41,6 +41,10 @@ export interface ProgressBarProps {
  * Which size variant to use
  */
  size?: ProgressBarSizes;
+ /**
+ * Human-readable selector used for writing tests
+ */
+ "data-cy"?: string;
 }
 
 const ProgressBar = ({
@@ -49,14 +53,15 @@ const ProgressBar = ({
  value,
  size,
  isProcessing,
- isCondensedLayout
+ isCondensedLayout,
+ "data-cy": dataCy = "progressBar-chart"
 }: ProgressBarProps) => {
  const renderProgressBar = () => (
  <svg
  className={cx(progressBar(size), {
  [progressBarStaged]: isProcessing
  })}
- data-cy="progressBar-chart"
+ data-cy={dataCy}
  role="presentation"
  >
  {data.map((datum, i) => {
@@ -93,7 +98,7 @@ const ProgressBar = ({
  ) : null}
  </Flex>
  ) : (
- <React.Fragment>
+ <>
  <SpacingBox side="bottom" spacingSize="xxs">
  <Flex align="center" justify="flex-end" gutterSize="s">
  {caption ? (
@@ -113,7 +118,7 @@ const ProgressBar = ({
  </Flex>
  </SpacingBox>
  {renderProgressBar()}
- </React.Fragment>
+ </>
  );
 };
 

diff --git a/packages/progressbar/style.ts b/packages/progressbar/style.ts
@@ -23,7 +23,7 @@ const stripeMotion = keyframes`
 
 export const progressBar = size => css`
  background-color: ${hexToRgbA(getCSSVarValue(themeBorder), 0.65)};
- border-radius: ${borderRadiusCircle};
+ border-radius: 999px;
  display: block;
  height: ${size === ProgressBarSizes.LARGE ? "12px" : "6px"};
  width: 100%;

diff --git a/packages/progressbar/tests/__snapshots__/ProgressBar.test.tsx.snap b/packages/progressbar/tests/__snapshots__/ProgressBar.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`ProgressBar renders all sizes 1`] = `
 
 .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 12px;
  width: 100%;
@@ -181,7 +181,7 @@ exports[`ProgressBar renders all sizes 2`] = `
 
 .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;
@@ -291,7 +291,7 @@ exports[`ProgressBar renders isProcessing 1`] = `
 
 .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;
@@ -463,7 +463,7 @@ exports[`ProgressBar renders with caption text and value text 1`] = `
  </div>
  .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;
@@ -547,7 +547,7 @@ exports[`ProgressBar renders with multiple segments of data 1`] = `
  </div>
  .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;
@@ -641,7 +641,7 @@ exports[`ProgressBar renders with one segment of data 1`] = `
  </div>
  .emotion-0 {
  background-color: rgba(218,221,226,0.65);
- border-radius: 50%;
+ border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;