Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(layout): remove truncate* props from Layout and ItemLayout #1127

Merged
kuzhelov merged 6 commits into from
Apr 2, 2019
Merged

fix(layout): remove truncate* props from Layout and ItemLayout #1127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a62993d
fix(layout): remove truncate* props from Layout and ItemLayout
bmdalex Mar 28, 2019
d57465d
changelog
bmdalex Mar 28, 2019
45e470d
removed overflow
bmdalex Mar 29, 2019
14825f7
changelog again
bmdalex Apr 2, 2019
1a2ac8a
deprecating Layout and ItemLayout
bmdalex Apr 2, 2019
168fe70
fixed changelog
bmdalex Apr 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
## [Unreleased]

### BREAKING CHANGES
- Remove `Indicator` component, the usages should be replaced with the `Icon` component @mnajdova ([#1120](https://github.com/stardust-ui/react/pull/1120))
- Remove `Indicator` component, the usages should be replaced with the `Icon` component @mnajdova ([#1120](https://github.com/stardust-ui/react/pull/1120))
- Add shorthand support for `header` and `content` in `Dropdown`,` DropdownSelectedItem.slotClassNames.removeIcon` usages should be replaced with `DropdownSelectedItem.slotClassNames.icon` @silviuavram ([#1054](https://github.com/stardust-ui/react/pull/1054))
- `react@16.8` and `react-dom@16.8` are now required @layershifter ([#1147](https://github.com/stardust-ui/react/pull/1147))
- Remove `truncateStart`, `truncateMain` and `truncateEnd` props from `Layout` component and `truncateContent` and `truncateHeader` props from `ItemLayout` component @Bugaa92 ([#1127](https://github.com/stardust-ui/react/pull/1127))

### Fixes
- Update vertical && pointing `Menu` styles @jaanus03 ([#1116](https://github.com/stardust-ui/react/pull/1116))
Expand Down
33 changes: 0 additions & 33 deletions docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions docs/src/examples/components/ItemLayout/Variations/index.tsx
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions docs/src/examples/components/ItemLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import * as React from 'react'
import { Alert } from '@stardust-ui/react/'

import Types from './Types'
import Content from './Content'
import Variations from './Variations'
import Rtl from './Rtl'

const ItemLayoutExamples = () => (
<div>
<Alert warning>This component is deprecated</Alert>
Copy link
Contributor

@hughreeling hughreeling Apr 2, 2019

Choose a reason for hiding this comment

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

Let's try and be as helpful as we can. Perhaps add link to Layout guide and suggest flex as alternative?

Copy link
Collaborator Author

@bmdalex bmdalex Apr 2, 2019

Choose a reason for hiding this comment

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

done in #1154

<Types />
<Content />
<Variations />
<Rtl />
</div>
)
Expand Down
3 changes: 3 additions & 0 deletions docs/src/examples/components/Layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import * as React from 'react'
import { Alert } from '@stardust-ui/react/'

import Types from './Types'
import Variations from './Variations'

const LayoutExamples = () => (
<div>
<Alert warning>This component is deprecated</Alert>
<Types />
<Variations />
</div>
Expand Down
12 changes: 3 additions & 9 deletions packages/react/src/components/ItemLayout/ItemLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,10 @@ export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps
contentMediaCSS?: ICSSInJSStyle
/** Styled applied to the end media element of the rendered component. */
endMediaCSS?: ICSSInJSStyle
truncateContent?: boolean
truncateHeader?: boolean
}

/**
* The Item Layout handles layout styles for menu items, list items and other similar item templates.
* (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates.
Copy link
Contributor

@hughreeling hughreeling Apr 2, 2019

Choose a reason for hiding this comment

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

Can we suggest alternative approach here? Or point to Layout guide?

Copy link
Contributor

@kuzhelov kuzhelov Apr 2, 2019

Choose a reason for hiding this comment

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

it should be enough to reference alternative components to use - may suggest not to include any links to the descriptions, as those are subject to potential changes

Copy link
Collaborator Author

@bmdalex bmdalex Apr 2, 2019

Choose a reason for hiding this comment

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

done in #1154

*/
class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
static create: Function
Expand Down Expand Up @@ -101,8 +99,6 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
contentCSS: PropTypes.object,
contentMediaCSS: PropTypes.object,
endMediaCSS: PropTypes.object,
truncateContent: PropTypes.bool,
Copy link
Contributor

@hughreeling hughreeling Apr 2, 2019

Choose a reason for hiding this comment

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

If we just take these out, won't they just get passed through to html and not do anything. Should we leave as warning / compile error or something for a few releases before we actually remove?

Copy link
Collaborator Author

@bmdalex bmdalex Apr 2, 2019

Choose a reason for hiding this comment

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

This is already marked as a BREAKING CHANGE in CHANGELOG.md and it points to the description of the PR where we have a mitigation path. This should be enough for our clients to update without too much friction

truncateHeader: PropTypes.bool,
}

static defaultProps = {
Expand All @@ -128,7 +124,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
},

renderHeaderArea: (props, state, classes) => {
const { debug, header, headerMedia, truncateHeader, headerCSS, headerMediaCSS } = props
const { debug, header, headerMedia, headerCSS, headerMediaCSS } = props

const mergedClasses = cx(ItemLayout.slotClassNames.header, classes.header)
const mediaClasses = cx(ItemLayout.slotClassNames.headerMedia, classes.headerMedia)
Expand All @@ -139,7 +135,6 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
alignItems="end"
gap={pxToRem(8)}
debug={debug}
truncateMain={truncateHeader}
main={rtlTextContainer.createFor({ element: header })}
rootCSS={headerCSS}
end={
Expand All @@ -154,7 +149,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
},

renderContentArea: (props, state, classes) => {
const { debug, content, contentMedia, truncateContent, contentCSS, contentMediaCSS } = props
const { debug, content, contentMedia, contentCSS, contentMediaCSS } = props

const mergedClasses = cx(ItemLayout.slotClassNames.content, classes.content)
const mediaClasses = cx(ItemLayout.slotClassNames.contentMedia, classes.contentMedia)
Expand All @@ -165,7 +160,6 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
alignItems="start"
gap={pxToRem(8)}
debug={debug}
truncateMain={truncateContent}
rootCSS={contentCSS}
main={rtlTextContainer.createFor({ element: content })}
end={
Expand Down
9 changes: 1 addition & 8 deletions packages/react/src/components/Layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,11 @@ export interface LayoutProps extends UIComponentProps {
reducing?: boolean
/** A layout can render its content directly if only one piece of content exists. */
disappearing?: boolean
truncateStart?: boolean
truncateMain?: boolean
truncateEnd?: boolean
vertical?: boolean
}

/**
* A layout is a utility for arranging the content of a component.
* (DEPRECATED) A layout is a utility for arranging the content of a component.
*/
class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
static className = 'ui-layout'
Expand Down Expand Up @@ -94,10 +91,6 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
reducing: PropTypes.bool,
disappearing: PropTypes.bool,

truncateStart: PropTypes.bool,
truncateMain: PropTypes.bool,
truncateEnd: PropTypes.bool,

vertical: PropTypes.bool,
}

Expand Down
33 changes: 12 additions & 21 deletions packages/react/src/themes/teams/components/Layout/layoutStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import { debugRoot, debugArea, debugGap } from '../../../../styles/debugStyles'
import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'

const truncateStyle = {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}

const layoutStyles: ComponentSlotStylesInput = {
root: ({ props }): ICSSInJSStyle => {
const {
Expand Down Expand Up @@ -51,28 +45,25 @@ const layoutStyles: ComponentSlotStylesInput = {
...(props.debug && debugGap({ vertical: props.vertical })),
}),

start: ({ props }): ICSSInJSStyle => ({
...(props.debug && debugArea()),
display: 'inline-flex',
start: ({ props: p }): ICSSInJSStyle => ({
...(p.debug && debugArea()),
alignItems: 'center',
...(props.truncateStart && truncateStyle),
...props.startCSS,
display: 'inline-flex',
...p.startCSS,
}),

main: ({ props }): ICSSInJSStyle => ({
...(props.debug && debugArea()),
display: 'grid',
main: ({ props: p }): ICSSInJSStyle => ({
...(p.debug && debugArea()),
alignItems: 'center',
...(props.truncateMain && truncateStyle),
...props.mainCSS,
display: 'grid',
...p.mainCSS,
}),

end: ({ props }): ICSSInJSStyle => ({
...(props.debug && debugArea()),
display: 'inline-flex',
end: ({ props: p }): ICSSInJSStyle => ({
...(p.debug && debugArea()),
alignItems: 'center',
...(props.truncateEnd && truncateStyle),
...props.endCSS,
display: 'inline-flex',
...p.endCSS,
}),
}

Expand Down