v11: add and update size images

[aagonzales]

Task

Create size images on the following V11 style tab pages.

• Accordion
• Button Skip for now
• Content switcher
• Data table Skip for now
• Date picker
• Dropdown (exists but has outdated names)
• File uploader
• Link (keep the current one)
• Modal Skip for now
• Number input
• Overflow menu
• Text input
• Search
• Select
• Structured list Skip for now
• Tabs Skip for now
• Tags
• Toggle

How to create images:

This image will use the fixed image component on the website (we'll worry about this later) and needs an art board width of 736px.

Image sizes
Image size should follow one of these ratios:

• 2:1 = 736 x 368
• 16:9 = 736 x 414
• 3:2 = 736 x 490
• 4:3 = 736 x 552
• 1:1 = 736 x 736

Image layout
The fixed image component keeps the size of the image true to pixel size and just adds white space to either side of the image as it grows. For this reason we do not recommend using horizontal rules to divide the components up like we do in a lot of our usage images. The size variants should just be evenly spaced (not too tight at least 32px is not more between variants) and centered in the image. The width of the component itself is up for interoperation but should be at least 32px (48px is better)from the edges of the image. Don't over stretch the component, it should look natural.

Image spec

• The image should include a variant of all the sizes.
• Each variant should be labeled with its size name. We include this in the component symbol itself, normally as the label name.
• Each size should have use the spec brackets to identify the heights and include the px/rem value of the heights. Both the text and brackets use Magenta 60. You can either draw the brackets with the line feature in Sketch or use the symbol from Jeannie's production guidelines.

Example from: https://v11.carbondesignsystem.com/components/dropdown/style#sizes

• If a component contains multiple parts or sections and there is room to include them add them in to help with context.
  

Exporting images

• Name the images: component-style-size
• Export them out at 2x and save them all together in a local folder.
• Be sure they have been added to the master file on box

Existing assets

Either open these assets through Box Drive to edit them and the images will be automatically added OR you can download the files and work locally then add them into the master file on Box Drive later.

• Current usage and style image file: https://ibm.box.com/s/jaer3akhe2ytpwlwsxma5ykoxm58q7xu
• Old usage image file: https://ibm.box.com/s/dk5bx73vmag6xyo7fta3zpveraojdcat
• Old style image file: https://ibm.box.com/s/jn05ykv35t9bmqvkgdb7z21n6s1dqpf8

If needed, pull in components from the Carbon libraries. If size variants don't exist yet in the library then draw them for the image (detach existing size and edit to correct size).

[aagonzales]

Examples of components that have size images already:

• Button: https://carbondesignsystem.com/components/button/style#sizes
• Dropdown: https://carbondesignsystem.com/components/dropdown/style#sizes

Button and data table both have stylized size images. We're going to ignore those guys for now and leave them as is.

[aagonzales]

How to draw a bracket line:

[thyhmdo]

Updated images
https://ibm.ent.box.com/folder/139467512584

Need the final review @aagonzales

[aagonzales]

They look good, just two things.

1. I forgot to tell you but the images should be exported out with the background included. I lot of them have transparent backgrounds
   

2. The context menu is actually using the old style. Its been updated recently so let's use the updated style. (Ideally this would be the time to updated all the context switcher images to have the new style as well)

[aagonzales]

NEXT STEPS

Create a local branch

Open a new branch on the v11 repo. One of us can walk you through this if you don't remember how. You can't add images from the GitHub UI.

Adding the file images:

1. Locate the image folder in file structure. Src > Pages > Components > Accordion > Images
   
2. Right click the images folder to "Reveal in Finder"
   
3. Add (drag and drop) size image for specific component to the folder. Make sure it is inside the image folder
   

Adding image to the markdown file

1. In the same section for the component where you found the image folder, find the "Style" mark down file and open it by clicking on it.
   
2. Add the below code snippet under the size section.

<div className="image--fixed">

![Alt text](images/type-file-name-here.png)

</div>

3. Add the correct file name where it says "type-file-name-here". It needs to be exactly how it appears in the images folder where you added it.
   

4. Update the alt text inside the [ ] to say "Sizes for accordion". Alt text in the text that appears in a browser tooltip when you hover over the image. It is also the text that gets read out with a screen reader.
   

Repeat

Repeat "Adding the file images" and "Adding image to the markdown file" for each component that has a size image.

Create a pull request

Once you've added all the images you'll need to create a Pull Request for review. Again someone on the team or I can walk you through this if you don't remember.

[thyhmdo]

Github request
#2418