From 99a573a27c04c2e9de77ba32091b3b8dcc11bc26 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 14 Jun 2019 17:22:59 -0400 Subject: [PATCH 01/10] Tweaks: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fixed Absolute tab selection - Using bottom border to indicate which time period is selected - Added a “title” as a tab - Added title to tab aria-labels --- .../super_date_picker/date_modes.js | 2 +- .../date_popover/_date_popover_button.scss | 27 +++++++++++++------ .../date_popover/_date_popover_content.scss | 6 +++++ .../date_popover/date_popover_button.js | 1 + .../date_popover/date_popover_content.js | 14 ++++++++++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/src/components/date_picker/super_date_picker/date_modes.js b/src/components/date_picker/super_date_picker/date_modes.js index 5f0733024b8..16f9924bf0a 100644 --- a/src/components/date_picker/super_date_picker/date_modes.js +++ b/src/components/date_picker/super_date_picker/date_modes.js @@ -19,7 +19,7 @@ export function getDateMode(value) { return DATE_MODES.RELATIVE; } - return DATE_MODES.absolute; + return DATE_MODES.ABSOLUTE; } export function toAbsoluteString(value, roundUp) { diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss index b779c68eccf..88046e593fb 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss @@ -4,26 +4,37 @@ .euiDatePopoverButton { @include euiSuperDatePickerText; + background-size: 100%; // For the bottom "border" via background-image - $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%); - $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor); - - &-isSelected, - &-needsUpdating, - &:hover, - &:focus { - background-color: $backgroundColor; + &:focus, + &-isSelected { + background-image: euiFormControlGradient(); } &-needsUpdating { + $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%); + $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor); + + background-color: $backgroundColor; color: $textColor; + + &:focus, + &.euiDatePopoverButton-isSelected { + background-image: euiFormControlGradient($euiColorSuccess); + } } &-isInvalid { $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%); $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor); + background-color: $backgroundColor; color: $textColor; + + &:focus, + &.euiDatePopoverButton-isSelected { + background-image: euiFormControlGradient($euiColorDanger); + } } } diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss index 3bc5a8dc391..f85b11a5cd8 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss @@ -10,3 +10,9 @@ .euiDatePopoverContent__padded--large { padding: $euiSize; } + +.euiDatePopoverContent__titleTab { + color: $euiTextColor !important; // Override :disabled + font-weight: $euiFontWeightBold; + text-transform: uppercase; +} diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js index 6b38af26a5e..7bd2165d653 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js @@ -67,6 +67,7 @@ export function EuiDatePopoverButton(props) { roundUp={roundUp} onChange={onChange} dateFormat={dateFormat} + position={position} /> ); diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js index a6ed6026fad..1288ece8eb9 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js @@ -20,6 +20,7 @@ export function EuiDatePopoverContent({ roundUp, onChange, dateFormat, + position, }) { const onTabClick = selectedTab => { switch (selectedTab.id) { @@ -32,8 +33,17 @@ export function EuiDatePopoverContent({ } }; + const popoverTitle = `${position === 'start' ? 'Start' : 'End'} date:`; + const renderTabs = () => { return [ + { + id: 'euiDatePopoverContentTitleTab', + name: popoverTitle, + className: 'euiDatePopoverContent__titleTab', + disabled: true, + tabIndex: 0, + }, { id: DATE_MODES.ABSOLUTE, name: 'Absolute', @@ -46,6 +56,7 @@ export function EuiDatePopoverContent({ /> ), 'data-test-subj': 'superDatePickerAbsoluteTab', + 'aria-label': `${popoverTitle} Absolute`, }, { id: DATE_MODES.RELATIVE, @@ -59,6 +70,7 @@ export function EuiDatePopoverContent({ /> ), 'data-test-subj': 'superDatePickerRelativeTab', + 'aria-label': `${popoverTitle} Relative`, }, { id: DATE_MODES.NOW, @@ -83,6 +95,7 @@ export function EuiDatePopoverContent({ ), 'data-test-subj': 'superDatePickerNowTab', + 'aria-label': `${popoverTitle} Now`, }, ]; }; @@ -104,6 +117,7 @@ EuiDatePopoverContent.propTypes = { onChange: PropTypes.func.isRequired, roundUp: PropTypes.bool, dateFormat: PropTypes.string.isRequired, + position: PropTypes.oneOf(['start', 'end']), }; EuiDatePopoverContent.defaultProps = { From a8e8470c53b273f0047ed75ef408127bcc1eeddd Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 14 Jun 2019 17:33:23 -0400 Subject: [PATCH 02/10] cl --- CHANGELOG.md | 1 + .../super_date_picker/date_popover/date_popover_button.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91264f0b3e3..06bdb93aa9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Changed `EuiNavDrawerFlyout` title from `h5` to `div` ([#2040](https://github.com/elastic/eui/pull/2040)) +- Tweaked `SuperDatePicker` to make the start/end date selection more obvious ([#2049](https://github.com/elastic/eui/pull/2049)) **Bug fixes** diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js index 7bd2165d653..5cd920d60a4 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js @@ -62,6 +62,9 @@ export function EuiDatePopoverButton(props) { panelPaddingSize="none" ownFocus {...rest}> + {/* + {position === 'start' ? 'Start' : 'End'} date + */} Date: Fri, 14 Jun 2019 17:33:53 -0400 Subject: [PATCH 03/10] Revert "cl" This reverts commit dac95c4b01b5ca0c5573382006cccd29bc893fb5. --- src-docs/src/views/horizontal_rule/horizontal_rule_example.js | 4 ++-- src-docs/src/views/spacer/spacer_example.js | 2 +- .../super_date_picker/date_popover/date_popover_button.js | 3 --- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js index 026873ced8e..6938db5d8e3 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js @@ -14,8 +14,8 @@ import HorizontalRuleMargin from './horizontal_rule_margin'; const horizontalRuleMarginSource = require('!!raw-loader!./horizontal_rule_margin'); const horizontalRuleMarginHtml = renderToHtml(HorizontalRuleMargin); -const horizontalRuleSnippet = ''; -const horizontalRuleMarginSnippet = ''; +const horizontalRuleSnippet = ``; +const horizontalRuleMarginSnippet = ``; export const HorizontalRuleExample = { title: 'Horizontal Rule', diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js index a3845f5210d..756ceaa8e5a 100644 --- a/src-docs/src/views/spacer/spacer_example.js +++ b/src-docs/src/views/spacer/spacer_example.js @@ -15,7 +15,7 @@ import Spacer from './spacer'; const spacerSource = require('!!raw-loader!./spacer'); const spacerHtml = renderToHtml(Spacer); -const spacerSnippet = ''; +const spacerSnippet = ``; export const SpacerExample = { title: 'Spacer', diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js index 5cd920d60a4..7bd2165d653 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js @@ -62,9 +62,6 @@ export function EuiDatePopoverButton(props) { panelPaddingSize="none" ownFocus {...rest}> - {/* - {position === 'start' ? 'Start' : 'End'} date - */} Date: Fri, 14 Jun 2019 17:38:11 -0400 Subject: [PATCH 04/10] tab content is required --- .../super_date_picker/date_popover/date_popover_content.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js index 1288ece8eb9..acdf8621301 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js @@ -43,6 +43,7 @@ export function EuiDatePopoverContent({ className: 'euiDatePopoverContent__titleTab', disabled: true, tabIndex: 0, + content: '', }, { id: DATE_MODES.ABSOLUTE, From df1a8329f19c5cb63ad5fefb28cefde85d2f7e50 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 17:50:35 -0400 Subject: [PATCH 05/10] Revert "tab content is required" This reverts commit 5610be6e82ea2af3ba35796c85371b5420f89fee. --- .../super_date_picker/date_popover/date_popover_content.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js index acdf8621301..1288ece8eb9 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js @@ -43,7 +43,6 @@ export function EuiDatePopoverContent({ className: 'euiDatePopoverContent__titleTab', disabled: true, tabIndex: 0, - content: '', }, { id: DATE_MODES.ABSOLUTE, From 7f163bfa4308a5d8da5e24bc56ee4cb3c729c7a1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 17:56:33 -0400 Subject: [PATCH 06/10] Revert 'Tweaks: Added a 'title' as a tab' --- .../date_popover/_date_popover_content.scss | 6 ------ .../super_date_picker/date_popover/date_popover_content.js | 7 ------- 2 files changed, 13 deletions(-) diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss index f85b11a5cd8..3bc5a8dc391 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss @@ -10,9 +10,3 @@ .euiDatePopoverContent__padded--large { padding: $euiSize; } - -.euiDatePopoverContent__titleTab { - color: $euiTextColor !important; // Override :disabled - font-weight: $euiFontWeightBold; - text-transform: uppercase; -} diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js index 1288ece8eb9..8d299846c97 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js @@ -37,13 +37,6 @@ export function EuiDatePopoverContent({ const renderTabs = () => { return [ - { - id: 'euiDatePopoverContentTitleTab', - name: popoverTitle, - className: 'euiDatePopoverContent__titleTab', - disabled: true, - tabIndex: 0, - }, { id: DATE_MODES.ABSOLUTE, name: 'Absolute', From 3c661c0336f0a5dcd1207a3f8e29057e80f31f46 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 18:29:58 -0400 Subject: [PATCH 07/10] Added prepend labels to inputs for start/end - Also added `toSentenceCase` string service --- .../super_date_picker/date_popover/absolute_tab.js | 12 +++++++++++- .../date_popover/date_popover_content.js | 12 +++++++----- .../super_date_picker/date_popover/relative_tab.js | 13 ++++++++++++- src/services/string/index.ts | 1 + src/services/string/to_case.ts | 9 +++++++++ 5 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 src/services/string/to_case.ts diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js index 542d59594b6..30269280f05 100644 --- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js +++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js @@ -6,7 +6,8 @@ import moment from 'moment'; import dateMath from '@elastic/datemath'; import { EuiDatePicker } from '../../date_picker'; -import { EuiFormRow, EuiFieldText } from '../../../form'; +import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form'; +import { toSentenceCase } from '../../../../services/string/to_case'; const INPUT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS'; @@ -17,10 +18,13 @@ export class EuiAbsoluteTab extends Component { const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp }); const valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment(); + const sentenceCasedPosition = toSentenceCase(props.position); + this.state = { valueAsMoment, textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT), isTextInvalid: false, + sentenceCasedPosition, }; } @@ -70,6 +74,11 @@ export class EuiAbsoluteTab extends Component { value={this.state.textInputValue} onChange={this.handleTextChange} data-test-subj={'superDatePickerAbsoluteDateInput'} + prepend={ + + {this.state.sentenceCasedPosition} date + + } /> @@ -82,4 +91,5 @@ EuiAbsoluteTab.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, roundUp: PropTypes.bool.isRequired, + position: PropTypes.oneOf(['start', 'end']), }; diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js index 8d299846c97..87fe5420685 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js @@ -33,7 +33,7 @@ export function EuiDatePopoverContent({ } }; - const popoverTitle = `${position === 'start' ? 'Start' : 'End'} date:`; + const ariaLabel = `${position === 'start' ? 'Start' : 'End'} date:`; const renderTabs = () => { return [ @@ -46,10 +46,11 @@ export function EuiDatePopoverContent({ value={value} onChange={onChange} roundUp={roundUp} + position={position} /> ), 'data-test-subj': 'superDatePickerAbsoluteTab', - 'aria-label': `${popoverTitle} Absolute`, + 'aria-label': `${ariaLabel} Absolute`, }, { id: DATE_MODES.RELATIVE, @@ -60,10 +61,11 @@ export function EuiDatePopoverContent({ value={value} onChange={onChange} roundUp={roundUp} + position={position} /> ), 'data-test-subj': 'superDatePickerRelativeTab', - 'aria-label': `${popoverTitle} Relative`, + 'aria-label': `${ariaLabel} Relative`, }, { id: DATE_MODES.NOW, @@ -83,12 +85,12 @@ export function EuiDatePopoverContent({ fullWidth size="s" fill> - Set date and time to now + Set {position} date and time to now ), 'data-test-subj': 'superDatePickerNowTab', - 'aria-label': `${popoverTitle} Now`, + 'aria-label': `${ariaLabel} Now`, }, ]; }; diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js index 4bc14e02c6e..008913739e1 100644 --- a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js +++ b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import dateMath from '@elastic/datemath'; +import { toSentenceCase } from '../../../../services/string/to_case'; import { EuiFlexGroup, EuiFlexItem } from '../../../flex'; import { @@ -10,6 +11,7 @@ import { EuiFieldNumber, EuiFieldText, EuiSwitch, + EuiFormLabel, } from '../../../form'; import { EuiSpacer } from '../../../spacer'; @@ -23,9 +25,11 @@ import { export class EuiRelativeTab extends Component { constructor(props) { super(props); + const sentenceCasedPosition = toSentenceCase(props.position); this.state = { ...parseRelativeParts(this.props.value), + sentenceCasedPosition, }; } @@ -108,7 +112,13 @@ export class EuiRelativeTab extends Component { onChange={this.onRoundChange} /> - + {this.state.sentenceCasedPosition} date + } + /> ); } @@ -119,4 +129,5 @@ EuiRelativeTab.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, roundUp: PropTypes.bool, + position: PropTypes.oneOf(['start', 'end']), }; diff --git a/src/services/string/index.ts b/src/services/string/index.ts index efb8d00af88..6ed792e589c 100644 --- a/src/services/string/index.ts +++ b/src/services/string/index.ts @@ -1 +1,2 @@ export { toInitials } from './to_initials'; +export { toSentenceCase } from './to_case'; diff --git a/src/services/string/to_case.ts b/src/services/string/to_case.ts new file mode 100644 index 00000000000..667fde283ca --- /dev/null +++ b/src/services/string/to_case.ts @@ -0,0 +1,9 @@ +/** + * This function returns the same string with the first letter of the first word capitalized. + * + * @param {string} strint The input string + */ + +export function toSentenceCase(string: string): string { + return string.charAt(0).toUpperCase() + string.slice(1); +} From 1f7e3c0590b4f44d7334ccec64d7f9bf2b10f675 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 19:13:28 -0400 Subject: [PATCH 08/10] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 06bdb93aa9e..8cd3caec8f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Changed `EuiNavDrawerFlyout` title from `h5` to `div` ([#2040](https://github.com/elastic/eui/pull/2040)) - Tweaked `SuperDatePicker` to make the start/end date selection more obvious ([#2049](https://github.com/elastic/eui/pull/2049)) +- Added `toSentenceCase` string service ([#2049](https://github.com/elastic/eui/pull/2049)) **Bug fixes** From f8bf1d42a65928d8e0a74c5853d248ff3dfb5f3a Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 19 Jun 2019 15:03:39 -0400 Subject: [PATCH 09/10] frickin linter --- src-docs/src/views/horizontal_rule/horizontal_rule_example.js | 4 ++-- src-docs/src/views/spacer/spacer_example.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js index 6938db5d8e3..026873ced8e 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js @@ -14,8 +14,8 @@ import HorizontalRuleMargin from './horizontal_rule_margin'; const horizontalRuleMarginSource = require('!!raw-loader!./horizontal_rule_margin'); const horizontalRuleMarginHtml = renderToHtml(HorizontalRuleMargin); -const horizontalRuleSnippet = ``; -const horizontalRuleMarginSnippet = ``; +const horizontalRuleSnippet = ''; +const horizontalRuleMarginSnippet = ''; export const HorizontalRuleExample = { title: 'Horizontal Rule', diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js index 756ceaa8e5a..a3845f5210d 100644 --- a/src-docs/src/views/spacer/spacer_example.js +++ b/src-docs/src/views/spacer/spacer_example.js @@ -15,7 +15,7 @@ import Spacer from './spacer'; const spacerSource = require('!!raw-loader!./spacer'); const spacerHtml = renderToHtml(Spacer); -const spacerSnippet = ``; +const spacerSnippet = ''; export const SpacerExample = { title: 'Spacer', From 11e6ced85073a5e7d5c451bfda341ab7c2f43a95 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 19 Jun 2019 15:28:49 -0400 Subject: [PATCH 10/10] Added tests for `toSentenceCase` --- src/services/string/to_case.test.ts | 17 +++++++++++++++++ src/services/string/to_case.ts | 6 +++++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/services/string/to_case.test.ts diff --git a/src/services/string/to_case.test.ts b/src/services/string/to_case.test.ts new file mode 100644 index 00000000000..58888c0d8ee --- /dev/null +++ b/src/services/string/to_case.test.ts @@ -0,0 +1,17 @@ +import { toSentenceCase } from './to_case'; + +describe('toSentenceCase', () => { + it("should return the same single word with the first letter capitalized for 'single'", () => { + expect(toSentenceCase('single')).toBe('Single'); + }); + + it("should return all the words with ony the first letter of the first word capitalized for 'two words'", () => { + expect(toSentenceCase('two words')).toBe('Two words'); + }); + + it("should return all the words with ony the first letter of the first word capitalized for 'opposite Of Sentence Case'", () => { + expect(toSentenceCase('opposite Of Sentence Case')).toBe( + 'Opposite of sentence case' + ); + }); +}); diff --git a/src/services/string/to_case.ts b/src/services/string/to_case.ts index 667fde283ca..dd49167ce16 100644 --- a/src/services/string/to_case.ts +++ b/src/services/string/to_case.ts @@ -5,5 +5,9 @@ */ export function toSentenceCase(string: string): string { - return string.charAt(0).toUpperCase() + string.slice(1); + // First lowercase all letters + const lowercase = string.toLowerCase(); + + // Then just uppercase the first letter; + return string.charAt(0).toUpperCase() + lowercase.slice(1); }