feat: convert px to rem

* fix(Avatar): set max width for avatar to avoid ellipse shape When a min font size is set inside browser the proportion is not respected and the avatar results in extending its width to include the text content. By setting the max-width equal to the min-width the shape should be maintained. Change also the calculation for the dimensions of the icon to be supported by Safari refs: CDS-77 (#134)
zextras · Nov 9, 2022 · 67e898f · 67e898f
1 parent 7a43e73
commit 67e898f
Show file tree

Hide file tree

Showing 65 changed files with 643 additions and 629 deletions.
diff --git a/docs/components/Palette.jsx b/docs/components/Palette.jsx
@@ -4,23 +4,25 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
+
 import { map } from 'lodash';
-import { Container } from '../../src/components/layout/Container';
+import styled from 'styled-components';
+
 import { Text } from '../../src/components/basic/Text';
+import { Container } from '../../src/components/layout/Container';
 import { Padding } from '../../src/components/layout/Padding';
 
 const PaletteEl = styled.div`
-	width: 150px;
-	height: 100px;
+	width: 13.125rem;
+	height: 6.25rem;
 	background: ${(props) => props.color};
-	border-radius: 8px;
-	box-shadow: 6px 4px 10px 0px rgba(136, 136, 136, 0.5);
+	border-radius: 0.5rem;
+	box-shadow: 0.375rem 0.25rem 0.625rem 0 rgba(136, 136, 136, 0.5);
 `;
 const TextFrame = styled.div`
 	background: rgba(200, 200, 200, 0.8);
-	padding: 4px 8px;
-	border-radius: 8px 8px 0 0;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.5rem 0.5rem 0 0;
 `;
 const ScrollFrame = styled.div`
 	width: 100%;

diff --git a/docs/components/StatusTable.jsx b/docs/components/StatusTable.jsx
@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, {useMemo} from 'react';
+import React, { useMemo } from 'react';
 import { Table, Container, Icon } from '../../src';
 
 const icon = (status) => {
@@ -39,7 +39,7 @@ const headers = [
 	{
 		id: 'status',
 		label: 'Status',
-		width: '32px',
+		width: '2rem',
 		align: 'center',
 		bold: true
 	},

diff --git a/docs/icons.md b/docs/icons.md
@@ -12,16 +12,16 @@ import { Icon, Container, Padding, Text, Input, SnackbarManagerContext, Snackbar
 import styled from 'styled-components';
 const iconKeys = Object.keys(icons).sort();
 const CustomIcon = styled(Icon)`
-    width: 32px;
-    height: 32px;
+    width: 2rem;
+    height: 2rem;
 `;
 const CustomText = styled(Text)`
     font-family: monospace !important;
-    font-size: 10px;
+    font-size: 0.625rem;
 `;
 const CustomContainer = styled(Container)`
-    border: 1px solid #eee;
-    borderWidth: 1px 0 0 1px;
+    border: 0.0625rem solid #eee;
+    borderWidth: 0.0625rem 0 0 0.0625rem;
     min-width: 19.9%;
     max-width: 19.9%;
     cursor: pointer;
@@ -62,8 +62,8 @@ function App() {
                 style={{
                     userSelect: 'none',
                     flexWrap: 'wrap',
-                    border: '1px solid #eee',
-                    borderWidth: '0 1px 1px 0'
+                    border: '0.0625rem solid #eee',
+                    borderWidth: '0 0.0625rem 0.0625rem 0'
                 }}
             >
                 { map(

diff --git a/src/components/basic/Avatar.tsx b/src/components/basic/Avatar.tsx
@@ -31,7 +31,8 @@ const AvatarContainer = styled.div<AvatarContainerProps>`
 	justify-content: center;
 	align-items: center;
 	min-width: ${({ theme, size }): string => theme.sizes.avatar[size].diameter};
-	height: ${({ theme, size }): string => theme.sizes.avatar[size].diameter};
+	max-width: ${({ theme, size }): string => theme.sizes.avatar[size].diameter};
+	max-height: ${({ theme, size }): string => theme.sizes.avatar[size].diameter};
 	min-height: ${({ theme, size }): string => theme.sizes.avatar[size].diameter};
 	background: ${({ theme, background, color, picture, selecting, selected, disabled }): string =>
 		`${
@@ -46,7 +47,7 @@ const AvatarContainer = styled.div<AvatarContainerProps>`
 		} ${picture && !selecting ? `url(${picture}) no-repeat center center/cover` : ''}`};
 	border-radius: ${({ shape }): string => (shape === 'round' ? '50%' : '15%')};
 	border: ${({ theme, selecting }): string =>
-		selecting ? `2px solid ${getColor('primary', theme)}` : 'none'};
+		selecting ? `0.125rem solid ${getColor('primary', theme)}` : 'none'};
 `;
 
 type CapitalsPropsType = {
@@ -63,10 +64,10 @@ const Capitals = styled.p<CapitalsPropsType>`
 `;
 
 const AvatarIcon = styled(Icon)<CapitalsPropsType>`
-	width: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} - 25%);
-	min-width: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} - 25%);
-	height: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} - 25%);
-	min-height: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} - 25%);
+	width: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} * 0.75);
+	min-width: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} * 0.75);
+	height: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} * 0.75);
+	min-height: calc(${({ theme, $size }): string => theme.sizes.avatar[$size].diameter} * 0.75);
 `;
 
 const _SPECIAL_CHARS_REGEX = /[&/\\#,+()$~%.'":*?!<>{}@^_`=]/g;

diff --git a/src/components/basic/Button.md b/src/components/basic/Button.md
diff --git a/src/components/basic/Button.tsx b/src/components/basic/Button.tsx
@@ -148,8 +148,8 @@ const StyledButton = styled.button.attrs<
 		outerPadding: string;
 	}
 >(({ buttonType, padding, disabled }) => ({
-	border: buttonType === 'outlined' ? '1px solid' : 'none',
-	outerPadding: buttonType === 'outlined' ? `calc(${padding} - 1px)` : padding,
+	border: buttonType === 'outlined' ? '0.0625rem solid' : 'none',
+	outerPadding: buttonType === 'outlined' ? `calc(${padding} - 0.0625rem)` : padding,
 	tabIndex: disabled ? -1 : 0
 }))<StyledButtonProps>`
 	line-height: 1;
@@ -178,7 +178,7 @@ const StyledButton = styled.button.attrs<
 	/* border */
 	border: ${({ border }): string => border};
 	border-radius: ${({ shape }): SimpleInterpolation =>
-		(shape === 'regular' && '4px') || (shape === 'round' && '50px')};
+		(shape === 'regular' && '0.25rem') || (shape === 'round' && '3.125rem')};
 	/* colors */
 	${({ color, backgroundColor, theme, forceActive }): SimpleInterpolation =>
 		forceActive
@@ -245,45 +245,45 @@ const SIZES: Record<ButtonSize, { label: string; icon: string; padding: string;
 		{ secondaryButton: { icon: string; padding: string } }
 	> = {
 	extrasmall: {
-		label: '8px',
-		icon: '8px',
-		padding: '4px',
-		gap: '4px'
+		label: '0.5rem',
+		icon: '0.5rem',
+		padding: '0.25rem',
+		gap: '0.25rem'
 	},
 	small: {
-		label: '12px',
-		icon: '12px',
-		padding: '4px',
-		gap: '4px'
+		label: '0.75rem',
+		icon: '0.75rem',
+		padding: '0.25rem',
+		gap: '0.25rem'
 	},
 	medium: {
-		label: '16px',
-		icon: '16px',
-		padding: '8px',
-		gap: '8px',
+		label: '1rem',
+		icon: '1rem',
+		padding: '0.5rem',
+		gap: '0.5rem',
 		secondaryButton: {
-			icon: '16px',
-			padding: '0px'
+			icon: '1rem',
+			padding: '0rem'
 		}
 	},
 	large: {
-		label: '20px',
-		icon: '20px',
-		padding: '8px',
-		gap: '8px',
+		label: '1.25rem',
+		icon: '1.25rem',
+		padding: '0.5rem',
+		gap: '0.5rem',
 		secondaryButton: {
-			icon: '20px',
-			padding: '0px'
+			icon: '1.25rem',
+			padding: '0rem'
 		}
 	},
 	extralarge: {
-		label: '20px',
-		icon: '20px',
-		padding: '12px',
-		gap: '8px',
+		label: '1.25rem',
+		icon: '1.25rem',
+		padding: '0.75rem',
+		gap: '0.5rem',
 		secondaryButton: {
-			icon: '20px',
-			padding: '0px'
+			icon: '1.25rem',
+			padding: '0rem'
 		}
 	}
 } as const;

diff --git a/src/components/basic/LoadMore.tsx b/src/components/basic/LoadMore.tsx
@@ -26,7 +26,7 @@ const LoadMore = React.forwardRef<HTMLDivElement, LoadMoreProps>(function LoadMo
 	ref
 ) {
 	return (
-		<Container ref={ref} orientation="horizontal" width="fill" height="40px" {...rest}>
+		<Container ref={ref} orientation="horizontal" width="fill" height="2.5rem" {...rest}>
 			<Icon icon="Sync" />
 			{label && (
 				<Padding left="small">

diff --git a/src/components/basic/TextWithTooltip.md b/src/components/basic/TextWithTooltip.md
@@ -13,7 +13,7 @@ import { Container } from '@zextras/carbonio-design-system';
 		size="large"
 		color="primary"
 		weight="regular"
-		style={{ maxWidth: '100px' }}
+		style={{ maxWidth: '6.25rem' }}
 	>
 		Hellooooooooooooooooooooooo world!
 	</TextWithTooltip>
@@ -35,7 +35,7 @@ import { Container } from '@zextras/carbonio-design-system';
 	<TextWithTooltip
         label="3 seconds before tooltip trigger Lorem ipsum dolor sit amet"
         triggerDelay={3000}
-        style={{ maxWidth: '100px' }}
+        style={{ maxWidth: '6.25rem' }}
 		overflowTooltip
 	>
 		3 seconds before tooltip trigger Lorem ipsum dolor sit amet

diff --git a/src/components/display/Chip.md b/src/components/display/Chip.md
@@ -38,7 +38,7 @@ The chip has two special statuses: disabled and error.
 ```jsx
 import { Container } from '@zextras/carbonio-design-system';
 
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
   <Chip label="Walter White" onClose={() => console.log('closed')} />
   <Chip label="Jessy Pinkman" error onClose={() => console.log('closed')} />
   <Chip label="Tuco" color="primary" />
@@ -86,7 +86,7 @@ const actions = [
           }
         ];
 
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
   <Chip label="Frodo Baggins" onClose={() => console.log('closed')} avatarIcon="Eye" disabled actions={actions} />
   <Chip label="Samwise (Sam) Gamgee" onClose={() => console.log('closed')} error actions={actions} />
   <Chip label="Gandalf the Grey" disabled="Message to tell user why this chip is disabled" />
@@ -101,11 +101,11 @@ Tooltip for label is shown only on overflow
 ```jsx
 import { Container } from '@zextras/carbonio-design-system';
 
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
-  <Chip label="Harry James Potter" maxWidth="150px" onClose={console.log} tooltipPlacement="top" />
-  <Chip label="Hermione Jean Granger" maxWidth="150px" onClose={console.log} tooltipPlacement="bottom" />
-  <Chip label="Ronald Bilius Weasley" maxWidth="150px" onClose={console.log} tooltipPlacement="right" />
-  <Chip label="Albus Percival Wulfric Brian Dumbledore" onClose={console.log} maxWidth="150px" tooltipPlacement="left" />
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
+  <Chip label="Harry James Potter" maxWidth="13.125rem" onClose={console.log} tooltipPlacement="top" />
+  <Chip label="Hermione Jean Granger" maxWidth="13.125rem" onClose={console.log} tooltipPlacement="bottom" />
+  <Chip label="Ronald Bilius Weasley" maxWidth="13.125rem" onClose={console.log} tooltipPlacement="right" />
+  <Chip label="Albus Percival Wulfric Brian Dumbledore" onClose={console.log} maxWidth="13.125rem" tooltipPlacement="left" />
 </Container>
 ```
 
@@ -114,9 +114,9 @@ import { Container } from '@zextras/carbonio-design-system';
 ```jsx
 import { Container, Row, Text } from '@zextras/carbonio-design-system';
 
-<Container wrap="wrap" mainAlignment="flex-start" crossAlignment="flex-start" maxWidth="700px" style={{ gap: '8px' }}>
+<Container wrap="wrap" mainAlignment="flex-start" crossAlignment="flex-start" maxWidth="44rem" style={{ gap: '0.5rem' }}>
   <Text size="large" weight="bold">Small</Text>
-  <Row style={{ gap: '8px' }}>
+  <Row style={{ gap: '0.5rem' }}>
     <Chip
       label="SpongeBob SquarePants"
       shape="regular"
@@ -131,7 +131,7 @@ import { Container, Row, Text } from '@zextras/carbonio-design-system';
     />
   </Row>
   <Text size="large" weight="bold">Medium</Text>
-  <Row style={{ gap: '8px' }}>
+  <Row style={{ gap: '0.5rem' }}>
     <Chip
       label="Squidward Tentacles"
       shape="regular"
@@ -146,7 +146,7 @@ import { Container, Row, Text } from '@zextras/carbonio-design-system';
     />
   </Row>
   <Text size="large" weight="bold">Large</Text>
-  <Row style={{ gap: '8px' }}>
+  <Row style={{ gap: '0.5rem' }}>
     <Chip
       label="Plankton and Karen"
       shape="regular"
@@ -167,7 +167,7 @@ import { Container, Row, Text } from '@zextras/carbonio-design-system';
 
 ```jsx
 import { Container } from '@zextras/carbonio-design-system';
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
   <Chip
     label="Anakin Skywalker"
     avatarPicture="https://pbs.twimg.com/profile_images/726995002660810752/38zzuVUY_400x400.jpg"
@@ -203,19 +203,19 @@ import { Container } from '@zextras/carbonio-design-system';
 
 ```jsx
 import { Button, Container, Row, Text, Tooltip } from '@zextras/carbonio-design-system';
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
   <Chip
     keyLabel="The Mandalorian:"
     label="Kuiil"
     shape="regular"
-    maxWidth="250px"
+    maxWidth="23.125rem"
   />
   <Chip
     keyLabel="The Mandalorian:"
     label="Greef Karga (Leader of the Bounty Hunters' Guild)"
     shape="regular"
     icon="PersonOutline"
-    maxWidth="250px"
+    maxWidth="23.125rem"
   />
   <Chip
     keyLabel="The Mandalorian:"
@@ -228,13 +228,13 @@ import { Button, Container, Row, Text, Tooltip } from '@zextras/carbonio-design-
       </Tooltip>
     )}
     icon="PersonOutline"
-    maxWidth="250px"
+    maxWidth="23.125rem"
     onClose={() => console.log('This is the way')}
   />
   <Chip
     keyLabel="The Mandalorian:"
     label={'Carasynthia "Cara" Dune'}
-    maxWidth="250px"
+    maxWidth="23.125rem"
     disabled="Disabled tooltip"
   />
   <Chip
@@ -256,7 +256,7 @@ import { Button, Container, Row, Text, Tooltip } from '@zextras/carbonio-design-
 
 ```jsx
 import { Button, Container, Row, Text, Tooltip } from '@zextras/carbonio-design-system';
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{gap: '8px'}}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{gap: '0.5rem'}}>
   <Chip
     label="Daenerys Targaryen"
     shape="round"
@@ -431,7 +431,7 @@ For now, double click handler does not prevent the click event.
 It's up to the dev to eventually avoid the click callback to be called when double click is fired.
 ```jsx
 import { Container } from '@zextras/carbonio-design-system';
-<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="700px" style={{ gap: '8px' }}>
+<Container orientation="horizontal" wrap="wrap" mainAlignment="flex-start" maxWidth="44rem" style={{ gap: '0.5rem' }}>
   <Chip
     label="Buffy Summers"
     shape="round"

diff --git a/src/components/display/Chip.tsx b/src/components/display/Chip.tsx
@@ -157,19 +157,19 @@ const SIZES: Record<
 		avatar: 'small',
 		font: 'extrasmall',
 		icon: 'small',
-		spacing: '4px'
+		spacing: '0.25rem'
 	},
 	medium: {
 		avatar: 'medium',
 		font: 'small',
 		icon: 'medium',
-		spacing: '8px'
+		spacing: '0.5rem'
 	},
 	large: {
 		avatar: 'large',
 		font: 'medium',
 		icon: 'large',
-		spacing: '12px'
+		spacing: '0.75rem'
 	}
 };