Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): fixed table threshold bug and added option to make thresholds populate text or background #16430

Merged
merged 4 commits into from
Jan 7, 2020

Conversation

asalem1
Copy link
Contributor

@asalem1 asalem1 commented Jan 7, 2020

Closes #16309
Closes #16359

Problem

Table thresholds were automatically populating the background color rather than giving users an option.

Solution

Added option to toggle between views for table threshold so user can set background or text color. Changed the default table threshold base color to white after speaking with @alexpaxton about design and the need for a default base color.

  • CHANGELOG.md updated with a link to the PR (not the Issue)

@asalem1 asalem1 requested a review from a team January 7, 2020 15:53
@ghost ghost requested review from 121watts and drdelambre and removed request for a team January 7, 2020 15:53
@@ -42,7 +42,7 @@ class TableCell extends PureComponent<Props> {
onClick={this.handleClick}
data-column-index={columnIndex}
data-row-index={rowIndex}
data-testID={`${data}-table-header`}
data-testid={`${data}-table-header`}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was to fix a lingering linter error

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤦‍♂

@@ -57,7 +57,7 @@ const ThresholdSetting: FunctionComponent<Props> = ({
} else if (type === COLOR_TYPE_MAX) {
label = 'Maximum'
} else {
label = 'Value is <='
label = 'Value is >='
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change more accurately reflects the functionality of setting the thresholds

@@ -119,3 +119,13 @@ export const DEFAULT_THRESHOLDS_LIST_COLORS = [
value: 0,
},
]

export const DEFAULT_THRESHOLDS_TABLE_COLORS = [
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated the base table color based on discussions with @alexpaxton on what would look best

@@ -88,10 +85,6 @@ export const generateThresholdsListHexs = ({
lastValueNumber
)

if (cellType === 'table') {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing these lines reverted the functionality to its original format, restoring it to what it was originally supposed to do

@@ -131,6 +132,9 @@ export class TableOptions extends Component<Props, {}> {
onSetThresholds={onSetColors}
/>
</Grid.Column>
<Grid.Column>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adds a toggle to allow users to switch between threshold colors being set to the background or text color

@drdelambre
Copy link
Contributor

lgtm

@asalem1 asalem1 merged commit e45de53 into master Jan 7, 2020
alexpaxton pushed a commit that referenced this pull request Jan 9, 2020
…s populate text or background (#16430)

fix(ui): fixed table threshold bug and added option to make thresholds populate text or background
@mark-rushakoff mark-rushakoff deleted the table-threshold-fix branch April 16, 2020 20:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants