diff --git a/CHANGELOG.md b/CHANGELOG.md index 1004418d..06022648 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Add `closeable` property for `Notification` component - Add `disableMobileFullWidth` property for `Button` component +- Fix TextField line breaking and text scrolling ## 1.4.2 diff --git a/integration/__image_snapshots__/AccordionTable_13-snap.png b/integration/__image_snapshots__/AccordionTable_13-snap.png index 7ae768ae..108de176 100644 Binary files a/integration/__image_snapshots__/AccordionTable_13-snap.png and b/integration/__image_snapshots__/AccordionTable_13-snap.png differ diff --git a/integration/__image_snapshots__/Anchor_3-snap.png b/integration/__image_snapshots__/Anchor_3-snap.png index 4b54a12f..797b2a21 100644 Binary files a/integration/__image_snapshots__/Anchor_3-snap.png and b/integration/__image_snapshots__/Anchor_3-snap.png differ diff --git a/integration/__image_snapshots__/AutocompleteTagBuilder_5-snap.png b/integration/__image_snapshots__/AutocompleteTagBuilder_5-snap.png index 70789e99..69d4a353 100644 Binary files a/integration/__image_snapshots__/AutocompleteTagBuilder_5-snap.png and b/integration/__image_snapshots__/AutocompleteTagBuilder_5-snap.png differ diff --git a/integration/__image_snapshots__/Autocomplete_3-snap.png b/integration/__image_snapshots__/Autocomplete_3-snap.png index 6bbd0ac0..8ef3a0a3 100644 Binary files a/integration/__image_snapshots__/Autocomplete_3-snap.png and b/integration/__image_snapshots__/Autocomplete_3-snap.png differ diff --git a/integration/__image_snapshots__/Breadcrumbs_3-snap.png b/integration/__image_snapshots__/Breadcrumbs_3-snap.png index 1c8e0ae0..c02b393e 100644 Binary files a/integration/__image_snapshots__/Breadcrumbs_3-snap.png and b/integration/__image_snapshots__/Breadcrumbs_3-snap.png differ diff --git a/integration/__image_snapshots__/DropdownField_3-snap.png b/integration/__image_snapshots__/DropdownField_3-snap.png index 6df29844..c0136f51 100644 Binary files a/integration/__image_snapshots__/DropdownField_3-snap.png and b/integration/__image_snapshots__/DropdownField_3-snap.png differ diff --git a/integration/__image_snapshots__/DropdownField_7-snap.png b/integration/__image_snapshots__/DropdownField_7-snap.png index f3f4be09..4ee04cb7 100644 Binary files a/integration/__image_snapshots__/DropdownField_7-snap.png and b/integration/__image_snapshots__/DropdownField_7-snap.png differ diff --git a/integration/__image_snapshots__/DropdownField_9-snap.png b/integration/__image_snapshots__/DropdownField_9-snap.png index 31a18fae..c10dd652 100644 Binary files a/integration/__image_snapshots__/DropdownField_9-snap.png and b/integration/__image_snapshots__/DropdownField_9-snap.png differ diff --git a/integration/__image_snapshots__/DropdownSelect_3-snap.png b/integration/__image_snapshots__/DropdownSelect_3-snap.png index 6df29844..c0136f51 100644 Binary files a/integration/__image_snapshots__/DropdownSelect_3-snap.png and b/integration/__image_snapshots__/DropdownSelect_3-snap.png differ diff --git a/integration/__image_snapshots__/DropdownSelect_7-snap.png b/integration/__image_snapshots__/DropdownSelect_7-snap.png index f3f4be09..4ee04cb7 100644 Binary files a/integration/__image_snapshots__/DropdownSelect_7-snap.png and b/integration/__image_snapshots__/DropdownSelect_7-snap.png differ diff --git a/integration/__image_snapshots__/DropdownSelect_9-snap.png b/integration/__image_snapshots__/DropdownSelect_9-snap.png index 31a18fae..c10dd652 100644 Binary files a/integration/__image_snapshots__/DropdownSelect_9-snap.png and b/integration/__image_snapshots__/DropdownSelect_9-snap.png differ diff --git a/integration/__image_snapshots__/Flyout_11-snap.png b/integration/__image_snapshots__/Flyout_11-snap.png index f17d9aa1..a3b38ba3 100644 Binary files a/integration/__image_snapshots__/Flyout_11-snap.png and b/integration/__image_snapshots__/Flyout_11-snap.png differ diff --git a/integration/__image_snapshots__/Form_5-snap.png b/integration/__image_snapshots__/Form_5-snap.png index d76aa901..9438e8a5 100644 Binary files a/integration/__image_snapshots__/Form_5-snap.png and b/integration/__image_snapshots__/Form_5-snap.png differ diff --git a/integration/__image_snapshots__/Highlight_3-snap.png b/integration/__image_snapshots__/Highlight_3-snap.png index 88255839..a45683e6 100644 Binary files a/integration/__image_snapshots__/Highlight_3-snap.png and b/integration/__image_snapshots__/Highlight_3-snap.png differ diff --git a/integration/__image_snapshots__/Highlight_6-snap.png b/integration/__image_snapshots__/Highlight_6-snap.png index 44505397..0be4f717 100644 Binary files a/integration/__image_snapshots__/Highlight_6-snap.png and b/integration/__image_snapshots__/Highlight_6-snap.png differ diff --git a/integration/__image_snapshots__/PasswordField_1-snap.png b/integration/__image_snapshots__/PasswordField_1-snap.png index 71599892..7152e6f8 100644 Binary files a/integration/__image_snapshots__/PasswordField_1-snap.png and b/integration/__image_snapshots__/PasswordField_1-snap.png differ diff --git a/integration/__image_snapshots__/RadioButtonGroup_1-snap.png b/integration/__image_snapshots__/RadioButtonGroup_1-snap.png index edae1a4c..a944b1e2 100644 Binary files a/integration/__image_snapshots__/RadioButtonGroup_1-snap.png and b/integration/__image_snapshots__/RadioButtonGroup_1-snap.png differ diff --git a/integration/__image_snapshots__/RadioButtonGroup_11-snap.png b/integration/__image_snapshots__/RadioButtonGroup_11-snap.png index b63031f5..56e9ba37 100644 Binary files a/integration/__image_snapshots__/RadioButtonGroup_11-snap.png and b/integration/__image_snapshots__/RadioButtonGroup_11-snap.png differ diff --git a/integration/__image_snapshots__/RadioButtonGroup_5-snap.png b/integration/__image_snapshots__/RadioButtonGroup_5-snap.png index 55b17f09..82857572 100644 Binary files a/integration/__image_snapshots__/RadioButtonGroup_5-snap.png and b/integration/__image_snapshots__/RadioButtonGroup_5-snap.png differ diff --git a/integration/__image_snapshots__/RadioButtonGroup_7-snap.png b/integration/__image_snapshots__/RadioButtonGroup_7-snap.png index ce094ca6..f31a1cdd 100644 Binary files a/integration/__image_snapshots__/RadioButtonGroup_7-snap.png and b/integration/__image_snapshots__/RadioButtonGroup_7-snap.png differ diff --git a/integration/__image_snapshots__/RadioButtonGroup_9-snap.png b/integration/__image_snapshots__/RadioButtonGroup_9-snap.png index b63031f5..56e9ba37 100644 Binary files a/integration/__image_snapshots__/RadioButtonGroup_9-snap.png and b/integration/__image_snapshots__/RadioButtonGroup_9-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_1-snap.png b/integration/__image_snapshots__/RadioButton_1-snap.png index 1f868a0a..780df2bf 100644 Binary files a/integration/__image_snapshots__/RadioButton_1-snap.png and b/integration/__image_snapshots__/RadioButton_1-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_11-snap.png b/integration/__image_snapshots__/RadioButton_11-snap.png index 239bd883..de919ec4 100644 Binary files a/integration/__image_snapshots__/RadioButton_11-snap.png and b/integration/__image_snapshots__/RadioButton_11-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_13-snap.png b/integration/__image_snapshots__/RadioButton_13-snap.png index 4c7ade1a..c1d47134 100644 Binary files a/integration/__image_snapshots__/RadioButton_13-snap.png and b/integration/__image_snapshots__/RadioButton_13-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_3-snap.png b/integration/__image_snapshots__/RadioButton_3-snap.png index c75de9dd..025897b9 100644 Binary files a/integration/__image_snapshots__/RadioButton_3-snap.png and b/integration/__image_snapshots__/RadioButton_3-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_7-snap.png b/integration/__image_snapshots__/RadioButton_7-snap.png index bdc88ae7..af544b92 100644 Binary files a/integration/__image_snapshots__/RadioButton_7-snap.png and b/integration/__image_snapshots__/RadioButton_7-snap.png differ diff --git a/integration/__image_snapshots__/RadioButton_9-snap.png b/integration/__image_snapshots__/RadioButton_9-snap.png index 394252c9..bccb7fb6 100644 Binary files a/integration/__image_snapshots__/RadioButton_9-snap.png and b/integration/__image_snapshots__/RadioButton_9-snap.png differ diff --git a/integration/__image_snapshots__/SearchField_1-snap.png b/integration/__image_snapshots__/SearchField_1-snap.png index 9ec6cade..c541b012 100644 Binary files a/integration/__image_snapshots__/SearchField_1-snap.png and b/integration/__image_snapshots__/SearchField_1-snap.png differ diff --git a/integration/__image_snapshots__/SearchField_3-snap.png b/integration/__image_snapshots__/SearchField_3-snap.png index 7182004c..1b0da96a 100644 Binary files a/integration/__image_snapshots__/SearchField_3-snap.png and b/integration/__image_snapshots__/SearchField_3-snap.png differ diff --git a/integration/__image_snapshots__/SearchField_5-snap.png b/integration/__image_snapshots__/SearchField_5-snap.png index 7182004c..1b0da96a 100644 Binary files a/integration/__image_snapshots__/SearchField_5-snap.png and b/integration/__image_snapshots__/SearchField_5-snap.png differ diff --git a/integration/__image_snapshots__/Tag_3-snap.png b/integration/__image_snapshots__/Tag_3-snap.png index ad070276..dbb95113 100644 Binary files a/integration/__image_snapshots__/Tag_3-snap.png and b/integration/__image_snapshots__/Tag_3-snap.png differ diff --git a/integration/__image_snapshots__/TextField_19-snap.png b/integration/__image_snapshots__/TextField_19-snap.png index 28bcf1b3..8cd5f016 100644 Binary files a/integration/__image_snapshots__/TextField_19-snap.png and b/integration/__image_snapshots__/TextField_19-snap.png differ diff --git a/integration/__image_snapshots__/TextField_25-snap.png b/integration/__image_snapshots__/TextField_25-snap.png index 5fda7a1c..209516cf 100644 Binary files a/integration/__image_snapshots__/TextField_25-snap.png and b/integration/__image_snapshots__/TextField_25-snap.png differ diff --git a/integration/__image_snapshots__/TextField_27-snap.png b/integration/__image_snapshots__/TextField_27-snap.png index d9234611..de7b3109 100644 Binary files a/integration/__image_snapshots__/TextField_27-snap.png and b/integration/__image_snapshots__/TextField_27-snap.png differ diff --git a/integration/__image_snapshots__/TextField_3-snap.png b/integration/__image_snapshots__/TextField_3-snap.png index e10773c6..115b0401 100644 Binary files a/integration/__image_snapshots__/TextField_3-snap.png and b/integration/__image_snapshots__/TextField_3-snap.png differ diff --git a/integration/__image_snapshots__/TextField_5-snap.png b/integration/__image_snapshots__/TextField_5-snap.png index 36077ff5..150cfbe5 100644 Binary files a/integration/__image_snapshots__/TextField_5-snap.png and b/integration/__image_snapshots__/TextField_5-snap.png differ diff --git a/package-lock.json b/package-lock.json index 85e1c2fe..54914205 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "precise-ui", - "version": "1.4.2", + "version": "1.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/TextField/index.tsx b/src/components/TextField/index.tsx index c6e41634..28d7a8b8 100644 --- a/src/components/TextField/index.tsx +++ b/src/components/TextField/index.tsx @@ -75,9 +75,9 @@ const TextFieldWrapper = styled(StackPanel)` const TextFieldArea = styled.textarea` ::-ms-clear { display: none; } - + white-space: pre-wrap; - word-break: break-all; + word-wrap: break-word; ${getFontSize('medium')} color: ${themed(({ theme, disabled }) => (disabled ? theme.text3 : theme.text2))}; diff --git a/src/quarks/StyledInputRow.tsx b/src/quarks/StyledInputRow.tsx index 2720e6d2..33077d03 100644 --- a/src/quarks/StyledInputRow.tsx +++ b/src/quarks/StyledInputRow.tsx @@ -29,14 +29,13 @@ const TextFieldLabelText = styled('span')` display: block; font-size: ${remCalc('12px')}; line-height: ${remCalc('16px')}; - max-width: 66.66%; + max-width: 100%; box-sizing: border-box; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left bottom; - transform: ${props => (props.active || props.filled ? 'none' : 'translate(0, 0.85rem) scale(1.33)')}; color: ${themed(({ theme, active, filled, error }) => error ? purpleRed : active || filled ? theme.ui0 : theme.text2, )}; @@ -46,7 +45,16 @@ const TextFieldLabelText = styled('span')` left: ${distance.medium}; right: 0; padding-top: ${distance.small}; - background: ${themed(({ multiline, theme }) => (multiline ? theme.ui2 : 'transparent'))}; + background: rgba(0, 0, 0, 0); + + ${props => + !(props.active || props.filled) && + ` + transform: translate(0, 0.85rem); + font-size: ${remCalc('16px')} + line-height: 1.75rem; + padding-top: 0; + `}; > span { display: ${props => (props.active || props.filled ? 'none' : '')}; @@ -63,7 +71,7 @@ export interface StyledInputRowProps extends React.HTMLAttributes = ({ +export const StyledInputRow: React.FC = ({ children, label, focused = false,