From 516538ea0a987ba88ace8b792020ff2e71e08bbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 9 Dec 2020 10:36:11 +0000 Subject: [PATCH] Remove all reccomendation to use `title` from documentation --- docs/content/components/avatars.md | 4 +- docs/content/components/labels.md | 69 ++++++++++-------------- docs/content/components/navigation.md | 6 +-- docs/content/components/select-menu.md | 6 +-- docs/content/components/truncate.md | 15 ++---- docs/content/principles/accessibility.md | 6 --- docs/content/stickersheet/labels.md | 10 ++-- 7 files changed, 46 insertions(+), 70 deletions(-) diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md index 6b832a74..f7d590bb 100644 --- a/docs/content/components/avatars.md +++ b/docs/content/components/avatars.md @@ -207,10 +207,10 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the ### Small ```html live - + - + diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 13a89076..a9ecbbaf 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -18,14 +18,7 @@ GitHub also programmatically generates and applies a background color for labels The base `Label` style does not apply a background color and only uses the default border: ```html live -design -``` - -**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label. - -```html live - -New select component design +design ``` ### Label contrast @@ -35,9 +28,9 @@ Use `Label--gray` to create a label with a lighter text color. This label is neu Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`. ```html live -Default -Gray -Dark gray +Default +Gray +Dark gray ``` ### Colored labels @@ -51,13 +44,13 @@ Labels come in a few different themes. Use a theme that helps communicate the co - `Label--blue` -> Info ```html live -Pending -Warning -Error -Success -Info -PRO -Sponsor +Pending +Warning +Error +Success +Info +PRO +Sponsor ``` Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference. @@ -67,8 +60,8 @@ Note: Avoid using `Label--orange` next to `Label--red` since most people will fi If space allows, add the `Label--large` modidfier to add a bit more padding to lables. ```html live -Default -Large +Default +Large ``` ### Inline labels @@ -77,33 +70,31 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele ```html live

- Lorem Ipsum is simply dummy text - of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text.

``` - ## Issue labels Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. ```html live -Primer -bug 🐛 -help wanted -🚂 deploy: train +Primer +bug 🐛 +help wanted +🚂 deploy: train ``` If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. ```html live -Primer -bug 🐛 -help wanted -🚂 deploy: train +Primer +bug 🐛 +help wanted +🚂 deploy: train ``` - ## States Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. @@ -117,37 +108,35 @@ Use state labels to inform users of an items status. States are large labels wit States come in a few variations that apply different colors. Use the state that best communicates the status or function. ```html live - + Open - + Closed - + Merged ``` -**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content. - ### Small states Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content. ```html live -Default - +Default + Open - + Closed diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md index ed825ce5..c1957c82 100644 --- a/docs/content/components/navigation.md +++ b/docs/content/components/navigation.md @@ -256,7 +256,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class - With a label label + With a label label With a counter 16 @@ -404,13 +404,13 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
  • First filter - 21 + 21
  • Second filter - 3 + 3
  • diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md index a9582ca7..5afafb66 100644 --- a/docs/content/components/select-menu.md +++ b/docs/content/components/select-menu.md @@ -210,9 +210,7 @@ The list of items is arguably the most important subcomponent within the menu. B - + @@ -583,7 +581,7 @@ When adding the `.SelectMenu` component on github.com, use the [`` ```erb
    - + Choose diff --git a/docs/content/components/truncate.md b/docs/content/components/truncate.md index c9b454ad..2e7ff5df 100644 --- a/docs/content/components/truncate.md +++ b/docs/content/components/truncate.md @@ -6,8 +6,7 @@ source: 'https://github.com/primer/css/tree/master/src/truncate' bundle: truncate --- - -The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible. +The `css-truncate` class will shorten text with an ellipsis. ## Truncate overflow @@ -15,8 +14,7 @@ Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text t ```html live
    -
    +
    branch-name-that-is-really-long
    @@ -31,8 +29,7 @@ Combine the `css-truncate` and `css-truncate-target` classes for inline (or inli ```html live Some text with a - + branch-name-that-is-really-long ``` @@ -41,8 +38,7 @@ You can override the maximum width of the truncated text with an inline `style` ```html live Some text with a - + branch-name-that-is-really-long ``` @@ -51,8 +47,7 @@ You can reveal the entire string on hover with the addition of `.expandable`. ```html live Some text with a -