From 82e5191084316b85bc994eb05eb50709ad962b57 Mon Sep 17 00:00:00 2001 From: amontalvof Date: Fri, 12 Aug 2022 14:11:35 -0500 Subject: [PATCH 1/3] fix: cell bug in firefox --- src/components/Table/body/styled/cell.js | 7 +- src/components/Table/body/styled/row.js | 3 + src/components/Table/readme.md | 213 +++++++++++++++++++++++ 3 files changed, 222 insertions(+), 1 deletion(-) diff --git a/src/components/Table/body/styled/cell.js b/src/components/Table/body/styled/cell.js index a4ff2e52a..7c19a0130 100644 --- a/src/components/Table/body/styled/cell.js +++ b/src/components/Table/body/styled/cell.js @@ -5,7 +5,12 @@ const StyledCell = attachThemeAttrs(styled.th)` padding: 0; text-align: ${props => props.cellAlignment || 'left'}; box-sizing: border-box; - height: 1px; + height: 1px; // This fixes expanding cell height in all other browsers + + @-moz-document url-prefix() { + height: 100%; // This fixes expanding cell height in Firefox + } + :first-child > div { padding-left: 18px; diff --git a/src/components/Table/body/styled/row.js b/src/components/Table/body/styled/row.js index e667eaf81..71ea2a3f4 100644 --- a/src/components/Table/body/styled/row.js +++ b/src/components/Table/body/styled/row.js @@ -38,6 +38,9 @@ const StyledRow = attachThemeAttrs(styled.tr)` ` background-color: ${replaceAlpha(props.palette.action.active, 0.4)}; `}; + + height: 1px; // This fixes expanding cell height in Firefox + `; export default StyledRow; diff --git a/src/components/Table/readme.md b/src/components/Table/readme.md index 6124631c0..7f9a13e45 100644 --- a/src/components/Table/readme.md +++ b/src/components/Table/readme.md @@ -764,6 +764,219 @@ function TableListView() { ; ``` +# Table with expanded cell height +##### In this example you can see how the data is displayed in the two variants of the table when one of the columns has the height of the cell expanded. + +```js +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { Table, Column, ButtonGroup, ButtonIcon, Avatar, RadioButtonGroup } from 'react-rainbow-components'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; + +const options = [ + { value: 'default', label: 'Default' }, + { value: 'listview', label: 'Listview' }, +]; + + +const Container = styled.div` + padding: 0 2rem; +`; + +const StyledTaskHeader = styled.span` + text-transform: uppercase; +`; + +const StyledPriority = styled.div` + height: 100%; + position: relative; + display: flex; + justify-content: center; + align-items: center; + min-width: 0; + text-transform: capitalize; + color: #ffffff; + + ${props => + props.priority === 'high' && + ` + background-color: #fc5e5f; + `}; + ${props => + props.priority === 'medium' && + ` + background-color: #fc9c44; + `}; + ${props => + props.priority === 'low' && + ` + background-color: #ffd86a; + `}; +`; + +const StyledValue = styled.span` + margin-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const StyledConstributor = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 40px; +`; + +const StyledRadioContainer = styled.div` + display: flex; + justify-content: flex-end; + margin-bottom: 20px; +`; + +const StyledTask = styled.div` + text-align: left; + margin-left: 0.5rem; + margin-right: 0.5rem; +`; + +const StyleCoin = styled(Coin)` + margin-right: 10px; + width: 20px; + height: 20px; +`; + +const Task = ({ value }) => {value}; + +const Description = () => ( + <> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +); + +const Coins = ({ value }) => ( + <> + + {value} coins + +); + +const Constributor = () => ( + + + +); + +const priorityMap = ['low', 'medium', 'high']; +const Priority = ({ value }) => { + const priority = priorityMap[value]; + return ( + + {priority} + + ); +}; + +function TableListView() { + const [data, setData] = useState(ListviewDataTable); + const [sortedBy, setSortedBy] = useState(); + const [sortDirection, setSortDirection] = useState('asc'); + const [variant, setVariant] = useState('default'); + + const handleSort = (event, field, nextSortDirection) => { + const newData = [...data]; + const key = value => value[field]; + const reverse = nextSortDirection === 'asc' ? 1 : -1; + + const sortedData = newData.sort((aItem, bItem) => { + const aValue = key(aItem); + const bValue = key(bItem); + return reverse * ((aValue > bValue) - (bValue > aValue)); + }); + + setData(sortedData); + setSortedBy(field); + setSortDirection(nextSortDirection); + } + + const handleOnChange = event => { + setVariant(event.target.value); + } + + return ( +
+ + + } + /> + } + /> + + + + + + + + Task} + field="task" + component={Task} + cellAlignment="left" + /> + + + Description} + field="task" + component={Description} + cellAlignment="left" + /> + +
+ +
+ ); +} + + ; +``` + # Table "listview" variant, selectable and enumerated rows ##### The following example shows a version of the `listview` variant, where rows can be selectable and enumerated. From d9dd3f2bd3a997a610eb2e3c781730a143d28d36 Mon Sep 17 00:00:00 2001 From: Jose Leandro Torres Date: Fri, 12 Aug 2022 15:10:17 -0700 Subject: [PATCH 2/3] fix: [ci skip] update comment --- src/components/Table/body/styled/cell.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Table/body/styled/cell.js b/src/components/Table/body/styled/cell.js index 7c19a0130..4baf57866 100644 --- a/src/components/Table/body/styled/cell.js +++ b/src/components/Table/body/styled/cell.js @@ -5,10 +5,10 @@ const StyledCell = attachThemeAttrs(styled.th)` padding: 0; text-align: ${props => props.cellAlignment || 'left'}; box-sizing: border-box; - height: 1px; // This fixes expanding cell height in all other browsers + height: 1px; // This is needed for expanding the cell height in all browsers but doesn't work in Firefox @-moz-document url-prefix() { - height: 100%; // This fixes expanding cell height in Firefox + height: 100%; // This is needed for expanding the cell height in Firefox } From d5ed56cb4cbfcf8d8f84a58676b37c5335afa663 Mon Sep 17 00:00:00 2001 From: Jose Leandro Torres Date: Fri, 12 Aug 2022 15:11:07 -0700 Subject: [PATCH 3/3] fix: [ci skip] comment --- src/components/Table/body/styled/row.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/body/styled/row.js b/src/components/Table/body/styled/row.js index 71ea2a3f4..3c30db7c9 100644 --- a/src/components/Table/body/styled/row.js +++ b/src/components/Table/body/styled/row.js @@ -39,7 +39,7 @@ const StyledRow = attachThemeAttrs(styled.tr)` background-color: ${replaceAlpha(props.palette.action.active, 0.4)}; `}; - height: 1px; // This fixes expanding cell height in Firefox + height: 1px; // This is needed for expanding the cell height in Firefox `;