module NfgUi::Components::Traits::SlatItem

Step traits

Constants

TRAITS

Public Instance Methods

truncate_trait() click to toggle source

truncated_trait is added to a slat_item when a slat_item typeface child needs to have truncated text with ellipses.

This is necessary because of the flex child containing the other text elements won't narrow past the “implied width” of those text elements. when a min-width value is set.

The flexbox child typeface component is then given the text-truncate class

Example in HAML:

ui.nfg :slat_item, :truncated do

= ui.nfg :typeface, heading: guest.email, class: 'text-truncate'

Read more: css-tricks.com/flexbox-truncated-text/

# File lib/nfg_ui/components/traits/slat_item.rb, line 22
def truncate_trait
  options[:style] = [options.try(:[], :style), 'min-width: 0;'].join(' ').squish
end