# Changelog

The SendGrid Style Guide is a library for developing consistent UI/UX at SendGrid. It is made up of modular, reusable components based on OOCSS and SMACSS principles.

# Latest

## [1.2.26] - 2017-10-24

S3 style-guide.css version: j7YTvtMq6mCkk6KRqoNkZKyenwNF3i4M

### Added

- Size modifiers for HTML content tooltips

### Changed

- Category badge display (inline-block to inline-flex) to avoid spaces based on HTML markup
- S3 version number for style-guide.css

# Archive

## [1.2.25] - 2017-10-17

S3 style-guide.css version: kK5zgO2CUtTAnFqUq5.i_5IESuy8b_BJ

### Added

- Unsubscribe icon for MC module
- Storage svg icon

### Changed

- S3 version number for style-guide.css

## [1.2.24] - 2017-09-26

S3 style-guide.css version: YzhWtGhr.3nMxyeIuKY3NUVVEIfKjUq_

### Added

- Override for max-width on .table-wrap, fixes table display issue in MC
- Examples of large and small loaders

### Changed

- S3 version number for style-guide.css

## [1.2.23] - 2017-09-14

S3 style-guide.css version: NCHczv8hc1KtGASIKomv1K8Mn0cB8Znv

### Added

- New icon font icons for campaigns table (editor-code, editor-design, editor-old)
- Color and background color utility classes (.color-name and .bg-color-name)
- Card actions component

### Changed

- Campaigns table updates (statuses, badges, truncation, actions, etc.)
- Select2 components to use classes to clean up demo js
- Adjusted HTML Content tooltips js
- Reduced padding on filter component
- S3 version number for style-guide.css

## [1.2.22] - 2017-08-31

S3 style-guide.css version: _Rs1gt_GZrFQCJo.tSDI9G9BrZ2teT9_

### Added

- Feature comparison tables (thanks Alfred!)

### Changed

- S3 version number for style-guide.css

### Fixed

- Edge case for table actions to fit 6 icons (GitHub issue #119)

## [1.2.21] - 2017-08-16

S3 style-guide.css version: 9gmTtVrkdpGKCTOri4YgSKDUTYhtlcDp

### Added

- Advanced filter component to Activity page example

### Changed

- Cards and table state to be more consistent
- Adjusted date pickers to use classes for demos
- S3 version number for style-guide.css

### Fixed

- Vertical progress stage number alignment (GitHub issue #117)

## [1.2.20] - 2017-08-10

S3 style-guide.css version: kqt.UxVfaTjNtFfbTkaWClG57QZQpEry

### Added

- Advanced filter component

### Changed

- Button background colors (rgba to hex to avoid background transparency)
- Adjusted table component to better support edge cases for MC
- S3 version number for style-guide.css

### Fixed

- Property sort order for modals
- Gulp task was deleting the compiled S3 version of style-guide.css on clean

### Removed

- Read only fields (team agreed to utilize disabled fields for simplicity)
- Pointer events on search field icon

## [1.2.19] - 2017-07-26

S3 style-guide.css version: 7mstSZs74utscUsVyEx2i8EKBTa9nHzn

### Added

- Read only support for select fields

### Changed

- S3 version number for style-guide.css

## [1.2.18] - 2017-07-26

S3 style-guide.css version: EIX0DOMZbZeAW2kUoIgBnl._oSEw_h_F

### Added

- Read only support for text inputs

### Changed

- Updated Activity page demo (set up for re-work of filters)
- S3 version number for style-guide.css

## [1.2.17] - 2017-07-14

S3 style-guide.css version: HSxTfipvro_.hKzgIwD7S51daJo0YQPt

### Added

- Help icon

### Changed

- Table empty state layout and spacing
- Table empty state help text
- Gulp workflow, improve efficiency
- S3 version number for style-guide.css

### Fixed

- Additional icon font icons that had SVG path issues

## [1.2.16] - 2017-07-03

S3 style-guide.css version: PAa3cx5xxMWnqPAL3wA4ICgyGJJFCqz2

### Added

- Dropzone alerts (thanks Krish!)
- Visible containers for page examples

### Changed

- Layout section with pages for grid and containers
- S3 version number for style-guide.css

## [1.2.15] - 2017-06-29

S3 style-guide.css version: rDldDiewyIFQV6R5zPzKx2hFbds2sfMe

### Changed

- S3 version number for style-guide.css

### Fixed

- Icon font SVG path issues

## [1.2.14] - 2017-06-21

S3 style-guide.css version: wZJOUYJuKMchHJDB48Ck2ym_SraeCqxY

### Added

- Libraries installed via npm (jquery, select2, moment, bootstrap-daterangepicker)
- Disabled states for table rows
- Page examples (wizard, custom fields, and senders)
- Helper classes for badges on senders page example
- Styles for dot labels in Select2

### Changed

- Adjustments to content containers for page examples
- Adjustments to grid (align-right, fix linter errors)
- Adjustments to vertical progress stages (width to allow longer step names)
- Break-word settings on tooltips to avoid breaking words
- Updated dropzone placeholder images
- S3 version number for style-guide.css

### Fixed

- Loader issues in Firefox (set width & height as attributes not css properties)
- Prev/next arrows on date range picker

### Removed

- Antialiasing on typography and button elements (to increase readability)
- Local js libraries (jquery, select2, moment, bootstrap-daterangepicker)
- Pointer events on date range icon

## [1.2.13] - 2017-06-01

S3 style-guide.css version: KXFxrvupjp4LyYhdMMKrKlLswy_MOwFR

### Added

- Additional font icons (export, status-positive, status-negative, status-caution)

### Changed

- Text alignment for tooltips
- Grid spacing and gutters
- Swap check-circle icon for status-positive (too similar)
- S3 version number for style-guide.css

## [1.2.12] - 2017-05-16

S3 style-guide.css version: 5ycKnxMZd9mL0IgxXRgCGLAsf_A3Ls2I

### Added

- Page examples (campaigns, contacts, email activity)
- Content containers to help with page layouts (content-main, content-header)

### Changed

- Icons and loaders layout in Buttons
- Minor table adjustments based on page examples
- Moved Tiara icons to their own section in Icons
- Moved GitHub templates to .github folder
- S3 version number for style-guide.css

## [1.2.11] - 2017-05-05

S3 style-guide.css version: RPq9k4Qzp3Q.JanSs4b6C5l8TUzNxZS_

### Added

- Additional font icons (contacts-alt, csv, list)

### Changed

- S3 version number for style-guide.css

## [1.2.10] - 2017-04-13

S3 style-guide.css version: M0UFkkVNvVQb.ojxoNBRZLj2hUXqMrlG

### Added

- Buttons with badges
- Dividers with labels
- Usage instructions to introduction

### Changed

- Tooltip underlines to be element agnostic
- S3 version number for style-guide.css

### Fixed

- Demo site table tooltip width issue
- Consistent quotes in components js
- Table with search input spacing

## [1.2.9] - 2017-04-11

S3 style-guide.css version: XHzd9zmnNKIOLfyA.bA9GMf.oP_QoptM

### Changed

- Gitignore to ignore compiled app/css assets
- S3 version number for style-guide.css

### Fixed

- Selectable button radio margins

### Removed

- Generated stylesheets from app/css

## [1.2.8] - 2017-04-03

S3 style-guide.css version: sQSlSlhFNWPCvP8BMAN0x0YMnT9ShfcO

### Added

- Textarea example with info icon and tooltip
- Select example with info icon and tooltip
- Support for checkboxes and radios to have input-info text (validation errors or helpful notes)
- PNG version of favicon

### Changed

- Contributing info to use npm commands
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Card flexbox issue with larger displays (children fitting on one line)
- Dropzone hovered/editor state, adjusted mantis rgba value to hex
- Adjusted vertical-alignment for headlines with info icons
- Select example label name
- Syntax error on changleog
- Demo site class tables, added min-width for tooltip labels

## [1.2.7] - 2017-03-15

S3 style-guide.css version: bA.aw7WrwxPAbV9wMhWB6cN.TShSBDfw

### Added

- A/B testing tabs with badges and modal support
- Badge line-height
- Legacy editor icons (to be updated)
- Underline tooltips
- Loading buttons
- Various table edge case updates (word-break, widths, etc.)

### Changed

- Updated class documentation for editor tabs
- Updated loaders with various fixes and improvements
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Modal display issue with browser resizing

### Removed

- Demo site specific style for underline tooltips

## [1.2.6] - 2017-03-08

S3 style-guide.css version: YPCqbJz1arsSyHNMO6BfBGLZC8jPBsM7

### Added

- Dropzone component
- Max-width for images sitting in grid columns

### Changed

- Minor changes to tables to allow them to sit on any background color
- Removed white background on disabled secondary buttons that site on dark backgrounds
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Prevent scrolling on body when modals are open
- Indented text for checkboxes and radios if the line wraps

## [1.2.5] - 2017-02-23

S3 style-guide.css version: cTJh31Ht5XM.kZipC0R3UeZFj1ioi_Ok

### Added

- Typography classes to switch families, weights and styles
- Icon font-size classes to adjust size
- Guidelines styles and structure (see guidelines.html)

### Changed

- Compiled /app/css
- S3 version number for style-guide.css

### Removed

- Proxima Nova Thin font files and font-face declaration

## [1.2.4] - 2017-02-20

S3 style-guide.css version: YHyleYx6vhuByasOD.dlpOKi5qGjy8UE

### Added

- SVG icon for teammate billing
- Directional arrows for text inputs with units
- Fixed width tabs for editor panel
- Module cards for editor panel
- Accordion with module cards for editor panel
- Hovered class support for tooltips (is-hovered)

### Changed

- Footer copyright year (2016 to 2017)
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Positioned info icon to bottom of textarea border
- Updated icon font to fix minor display issues

## [1.2.3] - 2017-02-10

S3 style-guide.css version: yfnhmVIlALny6oXvPMUpqOVprbSsopYk

### Added

- Icons font icons (button, code, columns, divider, drag, image, images, image-text, locked, reload, social, spacer, text, unlocked)
- Units for text inputs
- Nested accordions
- Large center modal for code editing
- Large tabbed modal for image library
- Loaders section w/ fragment loader example

### Changed

- Adjusted contrast on info icon for tooltips
- Increased padding on tabs
- Modal close class (modal-close) for demo site example
- Refactored demo site JS for modals
- Minor adjustments to demo site styles
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Text input border color on error focus

## [1.2.2] - 2017-02-06

S3 style-guide.css version: J37TKe7FbvEEubvCMEpiKk6Z_GHIBHBA

### Added

- Icon font icon (key)

### Changed

- Compiled /app/css
- S3 version number for style-guide.css

## [1.2.1] - 2017-01-31

S3 style-guide.css version: X9GGGZb7MO7JdYHMUZf.RYp1caE9jyHd

### Added

- Textarea component to text fields
- Side modal spacing example with multiple components
- Vendor specific style to hide scrollbars by default in Edge
- Select2 example for side modals

### Changed

- Increased margin bottom for checkboxes and radios
- Gitignore /dist folder
- Compiled /app/css
- S3 version number for style-guide.css

### Fixed

- Padding and height issue with badges in tables

### Removed

- MyFonts typography import (no longer needed)
- Max width on select fields
- Old breadcrumbs partial

## [1.2.0] - 2016-12-30

S3 style-guide.css version: RLfnOjMvTc0eKeTModlnNPbAPm3F4ST0

### Added

- Class and element documentation for components
- Button classes to support has-icon and is-disabled (legacy classes backwards compatible)
- Progress classes to support is-selected and is-done (legacy classes backwards compatible)
- Switch classes to support is-disabled (legacy classes backwards compatible)
- Gist examples with async js library
- SendGrid complete logo (svg)
- Pointer cursor for sortable table headers
- Link to favicon in <head>
- Misc. section for badges, meters, and dividers
- Statistics tables section for advanced tables

### Changed

- Updated demo site page layout
- Updated demo site header and footer navigation
- Overhaul demo site with component pages and improved organization
- Improved contributing documentation
- Typography font-size and line-height for <ol> and <ul> elements
- Increased line-height on tabs from 18px to 20px
- Favicon.ico path
- Compiled /app/css and /dist folders
- S3 version number for style-guide.css

### Fixed

- Accordion padding issue where content was getting covered by carets
- Alerts demo styles to display offset message
- Pickers display issue (conflict w/ dropdown class in menus)
- Progress stages line-height issue
- Select2 groups max-height issue (avoid multiple scrollbars)

### Removed

- Unnecessary top level pages (Style, Layout, Components)
- Unnecessary demo site .scss files
- Webkit font smoothing for <ol> and <ul> elements
- Previous demo site nav partials

## [1.1.1] - 2016-12-07

S3 style-guide.css version: RY.ZWjsXjG5sYOkovmytO3qMuw2pKkFb

### Changed

- Compiled /app/css and /dist folders
- S3 version number for style-guide.css

### Removed

- Max width on text input fields (MAKO-5811)

## [1.1.0] - 2016-12-03

S3 style-guide.css version: XVUDuxmiTh91P5280Wk6Myv6vdr0brUY

### Added

- Modifier classes for tabs (is-centered and zero-border)
- Flexbox support for tabs to remove floats
- Bottom border to tab-wrapper
- Gulp s3 task to minify style-guide.css for S3
- S3 version number for style-guide.css

### Changed

- Active state class name from tab-active to is-active
- Minor adjustments to tabs CSS (padding, height, line-height, etc.)
- Minor adjustments to tabs example JS
- Minor adjustments to change log notes for consistency
- Compiled /app/css and /dist folders

### Fixed

- CSS maps path issues

## [1.0.7] - 2016-12-02

### Added

- Date range component
- Icon font icon (calendar)
- Font smoothing for typography and buttons

### Changed

- Cleaned up CSS comments
- Moved meter mixin to global mixins
- Compiled /app/css and /dist folders

### Fixed

- CSS maps path issues

## [1.0.6] - 2016-11-29

### Added

- Icon font icons (analytics, builder, and clean ui)

### Changed

- Compiled /app/css and /dist folders

## [1.0.5] - 2016-11-22

### Added

- Vertical progress stages component
- Card components (standard, large, inline)
- Breadcrumb component
- JS version of tooltips
- Email server svg icon

### Changed

- Border radius values updated to global variable
- Compiled /app/css and /dist folders

## [1.0.4] - 2016-11-21

### Added

- CSS Nano dev dependency

### Changed

- Style Guide installation instructions (npm install)
- Package title and version
- Compiled /app/css and /dist folders

### Removed

- Node modules folder

## [1.0.3] - 2016-11-18

### Added

- Loader examples

### Changed

- Compiled /app/css and /dist folders

### Fixed

- Horizontal rule gist url

## [1.0.2] - 2016-11-16

### Added

- Horizontal rule styles
- Table states and empty states
- Basic footer for demo site
- Smooth scrolling between demo site sections
- Contacts icon to icon font, variables, and typography
- View source links to gist example markup

### Changed

- Increased contrast by 20% on disabled checkboxes and radios
- Renamed style-guide demo site partial for 'nav' to 'header'
- Reorganized style-guide component examples
- Compiled /app/css and /dist folders

### Removed

- Gist examples on demo site to reduce page load times

## [1.0.1] - 2016-11-04

### Changed

- Compiled /app/css and /dist folders

### Fixed

- SVG icon paths in demo site

## [1.0.0] - 2016-11-04

### Added

- Tables (standard, sort-asc, sort-desc, search, composite, stats, a/b stats, hierarchy, and simple)
- Bootstrap grid recommendations
- SVG icons displayed that were in the images folder
- Gist link button to example containers
- SendGrid favicon
- Font icons airplane-fill & save-draft

### Changed

- Style Guide demo grid classes for demo site
- Updated primary button left/right padding
- Compiled /app/css and /dist folders

### Removed

- Row containers that were wrapping typography examples