Release Notes

Version 3.0.3

Preview

The following items are available in this release as a preview and will be made generally available in a future release. The code and styles for these components may not be final and may not be fully tested.

Markup Changes

  • Needed to fix places where ARIA role="listitem" was on a link element, which has the unintended result of negating the link functionality. Affected components:
    • Filters (added an inline list wrapper for the filters)
    • Our "Tags:" lists example inside inline lists of meta information
  • Added aria-sort to grid and sort components.
  • Updated the like component alternate text from "Likes" to "Likes:".
  • Replaced the lotusChooser structure with lotusView in the paging component. This filtering is now an inline list with the lotusView structure.
  • Removed the "put class='lotusSelected' on the li element of the selected tab" comment from the condensed tab markup samples because the comment was breaking the first-child pseudo-selector in IE7.
  • On the menu component that is marked up as an ARIA tree, moved role="tree" to the lotusInner div so there are not duplicate roles on lotusMenu (which retains role="navigation"). Also added some presentation roles to some of the semantic HTML items within the menu structure.
  • Added ARIA attributes to the callout boxes (about and welcome).
  • Removed "Please try again." sentence from the login example pages.
  • Added the lotusBackToTop styling for the icon that follows a back to top link.
  • Fixed the Paging component samples to have a unique aria-label (Primary Paging vs Secondary Paging).
  • Updated the like control "Undo" text to "Unlike".
  • Added alt text for error page icons. Split the combined error page example into two pages to better reflect an actual error page and added role="main" to the second error example - now on Error Page, Extended.
  • In the file post sample component, moved the image classed with lotusPostObject to the lotusPostDetails div.

Header

  • Updated ARIA markup for banner (made application links a toolbar).
  • Removed role="banner" from the banner component and moved it to the header element wrapping the banner and title bar.
  • Updated the aria-label for the navigation roles on the product links and the application links to just say "Product" or "Application".
  • Added a lotusBadgeIcon to go on the lotusUnreadBadge node when the banner link is an icon.
  • New lotusBannerBtn class to style the share link in the banner as a button.

Activity Stream and Embedded Experience

  • Updated ARIA markup for activity stream posts.
  • Marked up the comma-delimited list of readers in the flyout component (share tab) as an ARIA list and added a separator bar between the readers and the "Add" link.
  • Fixed placeholder text on comment (add a comment) textareas to say "Add a comment" instead of "Write something...".
  • Updated flyout text to say "Add a comment" and "Show previous comments".
  • Update Status link changed from "Attach file" to "Share a file".
  • Updated the activity stream and flyout examples to expand the "Add a comment" textarea height on focus instead of starting with an "Add a comment" link that was styled like a text input. The textarea uses a new lotusTextCollapsed class. The Update Status textarea also uses the lotusTextCollapsed class.

Deprecated Components

Deprecated Example Pages

  • The Metrics page has been deprecated because it is no longer a design standard.

CSS Changes

  • Added support for closable tabs, the tab slider, and the tab menu in the tabbed dialog.
  • Updated the text color of tab components to make the variations more consistent.
  • Updated message styles to make them more noticeable.
  • Updated the customize palette to lighter colors.
  • Updated the person card hover link to blue.
  • Updated the tips box and welcome box colors and padding.
  • Updated the display control to look like the newer button visuals.
  • Updated the condensed tab bottom border.
  • Added primary indicator to the menu. This requires an additional class on the selected menu item to make it primary.
  • Adjustments to CSS to meet WCAG AA Contrast Requirements:
    • Tag cloud link colors/sizes
    • Updated link color and changed meta text color from #666 to #222
    • Footer visited links for Gen2 theme, only
    • Icons (also required an update to the sprite) and image opacity:
      • Close/delete/search/add icons across components
      • Twisty triangles (sections, menu trees, more indicators)
      • Section action menu icon in header
      • Show/Hide double chevrons
      • Sort direction indicators (ascending/descending)
  • Shortened the banner and title bar heights.
  • Added support for title links in the title bar.
  • Removed the orange text color on status updates in the flyout.
  • Reduced mega menu item top and bottom padding.
  • Removed all use of outline in the banner so the focus indicator is more distinct. Also added IE gradients to the selected and hovered banner items.
  • Changed lotusOffScreen helper class from top off screen positioning to left / right positioning.

Activity Stream and Embedded Experience

  • Updated the activity stream post delete icons to show on lotusPostHover and lotusPostSelected.
  • New activity stream post indicator icon that shows on lotusPostHover and lotusPostSelected.

Documentation Changes

  • Removed the Lotus Common Controls (media viewer and like control) but kept the static examples.

Bug Fixes

  • Fixed abnormal separator bars in the lotusPaging component.
  • Hid the message icon (and thus the alternate text) when images are turned off.
  • Removed textarea scrollbars in IE unless they are needed.
  • Fixed disabled button styles that got lost, and some miscellaneous button styling issues (mostly high contrast and deprecated styles).
  • Added a width to the help text on forms with left-aligned labels.
  • Adjusted the vertical-align of the help icon in forms for IE8 and 9.
  • Fixed incorrect border radius declarations in the search tab.
  • Prevented left form labels from breaking in the middle of a word.
  • The dialog had a too generic li declaration. list-style:none got scoped to lotusTagCloud.
  • Fixed wrapping of long customize palette widget names to keep to a single row with ellipsis and full name in title attribute.

Testing

The general test plan is documented in the Developer Guide. For the 3.0.3 release, the specific browser versions tested are:

  • Internet Explorer 7, 8, 9
  • Firefox 3.6, 13.0
  • Safari 5.1 (some testing)
  • Chrome 19 (some testing)
  • Internet Explorer 6 (some testing)

Version 3.0.2

Preview

The following items are available in this release as a preview and will be made generally available in a future release. The code and styles for these components may not be final and may not be fully tested.

Markup Changes

  • New layout classes to support fluid and fixed-width layouts.
  • New condensed tab component (an extension of the normal tabs).
  • Added aria-label attributes for the banner share and help icons.
  • New title bar tabs with support for tab icons and tab close icons.
  • New structure for the number of likes and comments in the 3 columns, summary view example side column.
  • Some updating of ARIA attributes as a result of Rational Policy Tester results.

Activity Stream and Embedded Experience

  • New flyout component.
  • Added new lotusStream unordered list as a container for posts in an activity stream.
  • Added new markup for a stream update field/controls.
  • Added new elements for inline actions in a post (lotusPostInlineActions, lotusActionBox, lotusActionMessage).
  • New condensed comment list and embedded comment list components (an extension of the normal comments).

CSS Changes

  • lotusFormError had display:none set on it erroneously. Removed that style. This gives developers more flexibility of how they want to handle the display of form errors.
  • Brought all menu hover colors into alignment (action menu, mega menu, like control, person card menu).

Activity Stream and Embedded Experience

  • Additional classes for posts to accomodate new activity stream design (lotusPostHover, lotusPostAction, lotusPostMore, lotusPostObject, lotusStream).
  • Additional class for a condensed comment list (lotusCommentsCondensed).
  • Additional classes to accomodate inline actions in a post (lotusPostInlineActions, lotusActionBox).

New Helper Classes

  • lotusStyledScroll was added to style scroll bars in WebKit browsers.

Documentation Changes

  • Updated the prototyping templates to have the new fluid-width and fixed-width templates.
  • Created a new post category in the components menu that contains all the variations of our post/comment components.
  • Added an activity stream page to our example pages.
  • Added a flyout component page.
  • Added a styled scroll bar component page.

Bug Fixes

  • CSS work on buttons to get them looking correct (and comparable sizes) in all browsers.
  • Adjusted margins around buttons to prevent the edges from being clipped. Buttons can now wrap in lotusBtnContainer.
  • Some lotusLoading selectors in mediaViewer.css are now scoped to the lotusGallery class.
  • Fixed the tab component to allow tab wrapping when the container does not fit all tabs in one row.
  • Added a missing lotusCommentList around forum posts (see the forum example page).
  • Fixed footer CSS so that links in table headers get the proper color.
  • Fixes to forms/form errors in dialogs so they display properly in all browsers.
  • Fixed CSS specificity to remove drop shadow from deprecated lotusActionMenu icon. Also removed border and shadow from deprecated widget components.

Browser bug fixes

  • Added a global override for the strong tag so IE9 and some newer Firefox versions do not render bolder font-weight.
  • Added a fix for IE8 scoped to lotusTable for colspans that were rendering improperly (an IE8 bug).

Testing

The general test plan is documented in the Developer Guide. For the 3.0.2 release, the specific browser versions tested are:

  • Internet Explorer 7, 8, 9
  • Firefox 3.6, 8.0
  • Safari 5.1 (some testing)
  • Chrome 16 (some testing)
  • Internet Explorer 6 (some testing)

Known Issues

  • This release has not undergone a complete accessibility review or test.
  • The apps mega menu from the 2.1 release is not supported.

Version 3.0.1

Preview

The following items are available in this release as a preview and will be made generally available in a future release. The code and styles for these components may not be final and may not be fully tested.

Markup Changes

Banner

  • Added lotusRightCorner and lotusInner nodes to the login page banners. They didn't have the full banner markup and the new visuals require those extra nodes.
  • Removed Share something (3.0.0 code) and added the utility icons and IBM logo on the right side of the banner.
  • Added a new lotusBannerExt structure to hold the breadcrumb, when it exists.

Message

  • Changed success message icon class name from lotusIconMsgConfirm to lotusIconMsgSuccess.
  • Changed role="status" on info and confirm messages to role="alert."

Popup

  • Added a content area node.
  • Changed header to be accessible following our component header pattern.
  • Changed popup connector to use an img node.

Title Bar

  • Reverted the search code back to 2.1 markup. In the process removed the span that wrapped the search scope text (there is just an icon now) and updated accessibility attributes to account for that removed text.
  • Changed lotusRightCorner to lotusWrapper because we are not going to use lotusRightCorner moving forward (the naming convention is tied to an antiquated styling technique).
  • Added the new lotusTitleBarExt structure that contains the page action links.

Miscellaneous

  • Added lotusui_ie9 marker class to the IE conditional comments code.
  • Added unread badge to Menu component.
  • Added lotusPagingTop class to paging component to allow for alternate visuals on the top set of paging controls.
  • Updated Like component to the phase 2 design.
  • Changed two-column Mega Menu to use new lotusFloat/lotusFloatContent classes.
  • Updated sort component aria attributes
  • Removed role="presentation" from the table in the footer with table elements.
  • Marker classes for special pages (lotusAbout, lotusLogin2, lotusHome, lotusMetrics, lotusError, and lotusStream) must go only on the <body> tag.
  • lotusui30_layout marker must only go on the top level <div> surrounding the page content... either on the same <div> as the lotusFrame class... or in a new top-level <div> where a lotusFrame would have been used if such a <div> were used on the page.

Deprecated Components

  • The "Confirm" message has been replaced by a "Success" message. So lotusIconMsgConfirm has been deprecated. Please use lotusIconMsgSuccess instead. See the Messages page for more information.
  • The Dialog was properly deprecated using 2.1 code (we had deprecated an interim version in the 3.0.0 beta that had some code updates for accessibility).
  • Welcome Box (new box uses a cancel button instead of a cancel link).

CSS Changes

Upgraded to new visuals

  • Page Layout
  • Action Menu
  • Banner
  • Buttons
  • Dialog
  • Like
  • Mega Menus
  • Menus (left navigation)
  • Paging Controls
  • Popup
  • Sections
  • Title Bar
  • Welcome and About Boxes

New Helper Classes

The following two classes can be used for the common structure of floating something left (typically an image) with content on the right.

  • LotusFloat
  • LotusFloatContent

Miscellaneous

  • Made sure deprecated and version 2.1 code works with the new visuals (making them match as closely as possible using CSS only).
  • Added MS filter CSS for banner gradients (to give the banner a gradient in IE 7 - 9).
  • Added resize:none to CSS for textarea elements.
  • Created lotusFieldEmphasis class for forms, which allows for a visually-differentiated field (like a status field at the top of an activity stream).

Image Updates

  • Loading images for people
  • CKeditor sprites
  • Action icons
  • Message icons
  • Section action menu icon

Dojo Changes

  • The Dojo namespace and theme name have been changed from oneui30 to lotusui30dojo.
    • Teams using the Dojo theme shipped with version 3.0.0 will need to change "oneui30" to "lotusui30dojo" on their <body> tag, install the new Dojo theme in their Dojo build, and change links loading oneui30.css to loading lotusui30dojo.css.

Documentation Changes

  • Removed most themes - until we get new ones for the new visual direction.

Bug Fixes

  • lotusAlignRight table class wasn't working properly. Fixed CSS so that advanced selectors are on their own line (IE ignores the whole line if one selector isn't understood).
  • Updated tag lists/clouds css to wordwrap properly in IE9.

Testing

The general test plan is documented in the Developer Guide. For the 3.0.1 release, the specific browser versions tested are:

  • Internet Explorer 7, 8, 9
  • Firefox 3.6, 6.0
  • Safari 5.1 (some testing)
  • Chrome 14 (some testing)
  • Internet Explorer 6 (some testing)

Known Issues

  • This release has not undergone a complete accessibility review or test.
  • The apps mega menu from the 2.1 release is not supported.

Version 3.0.0

Preview

The following items are available in this release as a preview and will be made generally available in a future release. The code and styles for these components may not be final and may not be fully tested.

Markup Changes

  • The dialog has new markup for the close icon.
  • Updated the error text for login forms.
  • Added "Share Something" to the banner and reinstated the help link.
  • Moved the search box in the title bar so it's consistent with better worst case button or tab wrapping.

CSS Changes

  • The classes: lotusRating0, lotusRating1, lotusRating2, lotusRating3, lotusRating4, lotusRating5 have been removed and are no longer supported.
  • Added classes for common message icons.
  • Added additional classes to our lotusPost component (comments) to support more post content for a board (activity streams). This is preliminary work that will be documented in the next release of the Toolkit.
  • Additional work on forms - wrapping labels and hanging required field asterisk.
  • Updated the Toolkit stylesheets to remove the :hover pseudo class on all non-links, where able, and to make sure the link element is part of the definition (i.e. a:hover). This is to deal with IE7 and 8 performance issues. In some cases onmouseover/onmouseout event handlers were added to the code to add/remove a lotus[Component]Hover class which is then use for styling rather than :hover. NOTE: button/input elements still make use of the :hover pseudo class.
  • Updated dialog sizing. Dialogs shrinkwrap by default with the exception of Internet Explorer, which is set to a default width of 500px. Developers can set an explicit width on a dialog when the default size isn't ideal or when they have content that needs to stretch the width of the dialog.

Documentation Changes

  • Removed jQuery from the toolkit doc leaving it only in the prototyping environment.
  • Added documentation explaining how to properly create meta data in the summary/details component.
  • Added a disabled image button to the button component page and made some CSS adjustments to make these show up more clearly as disabled.
  • Added the older formDiv component to the deprecated examples pages to make sure updated form styles don't break existing forms.
  • Added documentation explaining how to specify the correct icon and add alternate text to the Messages component.

Deprecated Components

  • Person Card (vCard) - a new implementation of the person card is being developed for Project Vulcan
  • Place Bar - use the title bar instead
  • Tree - use a component from your widget library such as the Dojo Tree instead
  • Widget

Known Issues

  • Internet Explorer 9 and Firefox 4 are not tested yet.
  • Dojo entry fields appear differently than ICS UI entryfields due to limitations in Dojo

Version 3.0.0 Release Candidate 1

Markup Changes

  • The banner now has a clickable product logo (either text or an image). The "New" and "Welcome back User" markup is new.
  • The title bar component has lots of changes. The global search, breadbrumb, action buttons, tabs, tab icons, tab bar and the link bar are all new.
  • New docked footer component.
  • New version of lotusMessage component and the confirm message is updated to a success message (see migration guide).
  • Updated forms to new design guidelines (see migration guide) and enabled them to work better inside of sections.
  • Added proper ARIA attributes to pages and components.
  • Moved menuitem and listitem roles to link elements rather than li elements.
  • Altered the use of top-level classes such as lotusui30. NOTE: lotusui30 is no longer supported on the <body> tag. See Namespace and Markers for more information.
  • Deprecated dialog variations.
  • Deprecated the person card.
  • Deprecated the tree component. Use whatever tree is provided by your widget library such as the Dojo tree.
  • Deprecated the place bar component. Use the new titlebar component.
  • Removed blank image from skip to main content links.
  • Added title attributes for each tag in the tag cloud to meet accessibility requirements.
  • Created a variation of the layout table for a multi-column layout (like on the home page).
  • Comment avatars now have alt="" alt text instead of the name (it was redundant).
  • Updated places where we used lotusDivider to use inline lists instead.
  • Updated code to use alt text on images that will be hidden when images are turned off, otherwise used aria-label.

CSS Changes

  • New vulcan (gen3) styles for banner, title bar, sections, menus.
  • Removed gen1 theme styles.
  • Removed the use of !important in the CSS wherever possible.
  • Popup components (action menus, help, dialogs) are no longer "hidden" by default using top:-9999px.
  • Any override css for a specific component has been moved to the component/container that requires the overrides (for example, list style overrides needed for when they are inside sections are in section2.css instead of lists.css).
  • Removed WSRP ("portlet-" prefixed) styles.
  • Added new lotusIndicator general class (Example).
  • Adjust layout based on new HTML5 strict doctype and unitless line-height.

Documentation Changes

  • Added accessibility sections to all component pages.
  • Added more simulated languages.
  • Updated "data island" terminology to "island" and added an Islands example page.
  • Added documentation for layout tables and links.
  • Updated the framework component.
  • Added text descriptions to the image library.
  • Removed the fake slider from the forum example page.
  • Added jQuery into the prototyping environment and toolkit doc.
  • Greeked the license text on the about example page.
  • Removed deprecated login page and home page with palette.

Dojo Changes

  • Updated form controls to use an x icon instead of an exclamation point to blend better with regular form controls and error handling.
  • Added menu tree and button dijits to component pages.
  • Removed custom dojo styles and examples. The only custom dojo control in the Toolkit is a dojo version of the menu.
  • Added dojo prototyping template.
  • The ICS UI dojo theme is ready to be used in products.

Version 3.0.0 Beta 2

CSS Changes

Namespace Split

The main lotusui30 namespace is now split into multiple namespaces to support different integration scenarios. This beta uses lotusui30, lotusui30_body, lotusui30_fonts, and lotusui30_layout. Most all pages will need to be upgraded to these new namespaces. Additional information is in the Namespacing area of the developer guide.

Style Guide Alignment

Documentation Changes

Style Guide Alignment

  • Updated components and example pages to follow Style Guide Capitalization
  • Removed the sorting javascript on the Variation Grid Component
  • Updated Forms to better follow Style Guide forms
  • Moved message / info table before the page title in the Interactive and 3 Column Summary example pages to follow Style Guide recommendations

Version 3.0.0 Beta 1

Markup Changes

This version of the toolkit contains required accessibility markup changes, optional HTML5 markup changes, and a couple of component refactorings (older versions of these components will be supported in deprecated.css for one release).

Component Refactorings

  • New lotusSection2 component, of which lotusPortlet is a variation (lotusWidget2 is deprecated). This new version of the section component contains the required accessibility changes needed for sections and widgets.
  • Separated lotusTips and lotusHelp component from lotusInfoBox class. lotusTips is a new class name. lotusHelp was the additional class used along with lotusInfoBox and is still used for the new version of the component. The new version of the tips component contains the required accessibility changes.

Other

  • Added the lotusIcon class to the unclassed image in lotusErrorBox.
  • Changed the lotusActionMenu class assigned to the action menu icon in sections to lotusActionIcon so it doesn't conflict with our lotusActionMenu component class.
  • Changed the lotusSelected class to lotusHeaderSelected for lotusMenu.
  • Removed lotusSprite as additional class because it is no longer needed.

Required Accessibility Changes

HTML heading tags (h1 through h6) are no longer styled directly in the CSS. This allows product teams the flexibility of using different heading tags than the markup examples when their particular version of the component/page will cause skipped heading levels (e.g. there would be h2 and h4 tags but no h3 tags). To enable this, the toolkit now contains the following generic classes: lotusHeading, lotusHeading2, lotusHeading3, and lotusTitle. See the migration guide for specifics.

HTML heading elements now only contain text. Any images that are part of the a header sit outside of the heading element. This requires an extra html wrapper div (or HTML5 header) tag in most instances. See the migration guide for affected components.

Optional HTML5 changes

Replaced divs with new HTML5 tags. The new tags aren't used in the CSS for styling. All styling is done using classes. This allows you to convert over to HTML5 at your own pace.

HTML5 uses a strict doctype at the beginning of the page.

See the HTML5 section of the developer documentation for more information on HTML5 and see the migration guide for code changes made to convert the toolkit to HTML5.

CSS Changes

  • Changed line heights to unitless line heights.
  • Added a declaration to display new HTML5 elements as block.
  • Modified the layout of some images to work better in both strict and transitional doctypes. These changes are commented in the CSS.

Documentation Changes

  • Classified the section and menu components as layout components.
  • Created a new HTML5 page in the developer documentation.
  • Created a new migration guide for migrating from version 2.1 to version 3.0.

Dojo Changes

  • Upgraded from Dojo 1.4 to 1.5 and made a Dojo theme that replaces styling for the ICS UI 2.1 Dojo widgets. A new Dojo Alternate Styles page has been made for widget styling not in the theme.
  • The theme only styles dijit (not dojox).
  • Not production quality (still needs proper icons and sprites) among other changes.
  • There are no dependencies between the Dojo theme and the rest of toolkit styles.