Bits & Pieces
The term "Blueprint" comes from the Salesforce Lightning Design System.
For example, in the interactive components below, the
<input> element found within is typically the first child of the element's container. This allows the CSS sibling selectors (
~) to help determine what elements exist in the container and make visual changes based on those elements.
In a simple case, the "Checkbox Hack" is used to open/close the select-summary component by targeting the
input[type="checkbox"]:checked selector and affecting the visibility of the sibling content container. You should also be aware that in some browsers, you can affect the input using the keyboard and tabbing to this element will normally put the element into the viewport within a scrollable container.
The colorfield component is highly specific to the needs of the design system pages. It is used to allow a user to choose a color and compute an output from it.
- The input area always displays the selected color as a background, the text color will always contrast the selected color. The styles should otherwise mimic button styles except for font, which will inherit from the body and not change case.
- The final value can either be a color (which should be colored in a similar way to the input) or a single value with no color applied. The styles should balance with the input in terms of spacing and alignment.
- While only the input area may look interactive, the entire component can be tapped to change the value of the input.
- When the component is focused, a dashed line should surround the entire component.
- The delta between the input and value is never a color but instead a represented difference between the input and the final value.
- Labels should be all uppercase, medium weight, and .9rem from the root font size to counteract the change in case.
- All other text should match body font properties.
- When the horizontal layout will not fit inside of its container, each part will stack vertically. Label first then the display below.
To achieve the layout shifting when the component is too wide for its container, the Fab Four technique is used. This snaps the width at container breakpoints by forcing negative widths to refer to a minimum width. More information can be found in the article Responsive CSS without Media Queries.
The select-summary component is a hybrid of a few components found in design systems which show and hide content.
- The content area does not flyout and appear on top of other content; it will push outside content down.
- There is no default maximum height, a maximum height can be applied based on the content provided if it is believed to help the user experience. It should noted that this may include an additional scrollbar which could be challenging to navigate for some users. One scrollbar (for the page) is much easier to manage typically.
- Each version allows for control via the spacebar to open and close the content drawer.
- The summary will typically display as a label unless it is meant to display one of the values within the content area (ie, type:select). Label styles are all uppercase, medium weight, a font-size of .9rem to balance the previous styles.
- The content drawer can be styled however is appropriate to match the rest of the system in color, typography, spacing, et cetera.
- The menu type does not have a visible container itself but is expected to exist along side siblings in a larger group.
- The select type is designed to provide affordance to other dropdowns found across the web. It can be enhanced to provide a typeahead experience using a textfield.
- The summary type is designed to be unique from the other types to suggest the content inside is prepared differently. This also allows for icon variations to help with clarifying content and visibility. The icon should reflect what will happen once interaction occurs. For example when a summary is collapsed, the icon should display an visual indicating that it can be shown. Similarly, when expanded it should show a visual indicating it can be hidden.
- The icon in the label that displays state or helps clarify content should be focusable; indicated by a dashed outline.
When in the "select" configuration, the component acts like a stylized
When in the "summary" configuration, the component acts similarly to native HTML5
I’m still working on it.
The textfield is composed of a single input and label with an optional button to accompany the component.
- To provide a differentiation between other components in the system, the textfield is displayed as a box with a low contrast background to its container and a single line beneath.
- The label follows the same pattern as other labels; all uppercase, medium weight and .9rem font size for balance. It is found within the same box as the input to show the relationship. All textfields must have a label; the placeholder is not a substitute.
- The text entered into the input should match body text styles.
- When focused, a dashed outline should appear around the input area. It should not include the label.
- Any additional elements included with the input should not be visually within the input. For example, a button attached to the input can coexist in the same horizontal space but must be visually separated from the input itself.
This hybrid component was designed to share styles between toggle switches and ranges merely by changing the type of input you are using within the component.
- The knob feature of the component is invisibily larger than the design to provide a large target area for both cursor targetting and various sizes of tapping instruments.
- Text for the label is set as all uppercase and medium weight (500), font-size is decreased slightly (.9em) to counter this emphasis. Line-height at 1.5.
- Labels are aligned left to the page in which the component exists. This is unique to other interactive inputs as most have 1rem (16px) of space between the label and container edge. This is because other interactive elements contain other visual motifs that span to the edge of the page while the toggle-range does not.
- There is 1rem (16px) of space between the control and the surrounding elements.
- When focused, a dashed outline appears around the visual control. It will not include the label.
When using the component like a checkbox, the spacebar will toggle the switch.
- When in use as a toggle, the background color of the track should change to the accent color, indicating an "on" state.
Checkbox vs. range
The component was originally engineered to keep the
input[type="range"] element for both toggles and ranges and only shortening the component (with a few other specific state attributes) since they were crafted to look similar. Using
input[type="checkbox"] differs by requiring the label to be present, however this shouldn't be a concern as the label should always be present for any interactive element.
The range component allows the user to choose a value between a minimum and maximum value. It is composed of a native HTML
input[type="range"] element and is interactive as such.
- The output value for the range could include an icon to better indicate how this value is affecting the system, ie.: a speaker icon to denote volume changes. Otherwise, the text is set to the inherited paragraph style.