From f4debd431dadc77248271a6c5733f85bf5dc0ea8 Mon Sep 17 00:00:00 2001 From: Mark Florian Date: Mon, 30 Mar 2020 17:32:55 +0100 Subject: [PATCH 1/5] feat(badge): Update styling of text badges BREAKING CHANGE: This implements the [text-only][1] versions of the latest badge designs. Support for icons will be added in a future version. - This removes the `primary`, `secondary`, `light` and `dark` variants of GlBadge, and adds the `muted` and `neutral` variants. - The `pill` prop is now ignored, and all GlBadges are of the `pill` type. It's recommended to replace usage of the removed variants with the new variants: primary -> info secondary -> neutral light -> muted dark -> neutral [1]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481 --- .../component_documentation_generator.vue | 7 +- .../base/badge/badge.documentation.js | 13 +- src/components/base/badge/badge.md | 28 ++++ src/components/base/badge/badge.scss | 140 +++++++++++++----- src/components/base/badge/badge.stories.js | 55 ++++++- src/components/base/badge/badge.vue | 21 ++- .../badge/examples/badge.action.example.vue | 8 +- .../badge/examples/badge.basic.example.vue | 2 +- .../badge/examples/badge.button.example.vue | 7 +- .../badge/examples/badge.scaling.example.vue | 9 -- .../badge/examples/badge.sizes.example.vue | 7 + .../badge/examples/badge.variants.example.vue | 8 +- src/components/base/badge/examples/index.js | 10 +- src/scss/components.scss | 1 + src/utils/constants.js | 15 ++ ...s-base-badge-actionable-warning-1-snap.png | Bin 0 -> 5182 bytes ...e-storyshots-base-badge-default-1-snap.png | Bin 4524 -> 5062 bytes ...ryshots-base-badge-large-danger-1-snap.png | Bin 0 -> 5494 bytes 18 files changed, 258 insertions(+), 73 deletions(-) create mode 100644 src/components/base/badge/badge.md delete mode 100644 src/components/base/badge/examples/badge.scaling.example.vue create mode 100644 src/components/base/badge/examples/badge.sizes.example.vue create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-actionable-warning-1-snap.png create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-large-danger-1-snap.png diff --git a/documentation/components/component_documentation_generator.vue b/documentation/components/component_documentation_generator.vue index 443fb39a9d..9c90699445 100644 --- a/documentation/components/component_documentation_generator.vue +++ b/documentation/components/component_documentation_generator.vue @@ -232,7 +232,7 @@ export default { {{ field.value }} v-model @@ -269,10 +269,7 @@ export default { diff --git a/src/components/base/badge/badge.documentation.js b/src/components/base/badge/badge.documentation.js index 5c263cd7e0..7e2afade91 100644 --- a/src/components/base/badge/badge.documentation.js +++ b/src/components/base/badge/badge.documentation.js @@ -4,8 +4,19 @@ export default { examples, bootstrapComponent: 'b-badge', bootstrapPropsInfo: { + href: { + additionalInfo: + 'Denotes the target URL of the link for standard a links. Providing this makes the badge actionable (clickable).', + }, + }, + propsInfo: { variant: { - enum: 'variantOptions', + additionalInfo: 'The variant of the badge.', + enum: 'badgeVariantOptions', + }, + size: { + additionalInfo: 'The size of the badge.', + enum: 'badgeSizeOptions', }, }, }; diff --git a/src/components/base/badge/badge.md b/src/components/base/badge/badge.md new file mode 100644 index 0000000000..cab3374e7a --- /dev/null +++ b/src/components/base/badge/badge.md @@ -0,0 +1,28 @@ +# GlBadge + + + +Badges highlight metadata of objects, the kind of information that always needs +some context and isn’t useful on its own. For example, they can be used to +indicate an issue’s status, a member’s role, or if a branch is protected. + +## Usage + +```html +Hello, world! +``` + +> Note: Native support for icons in badges will be added in a future version. + +## Edge cases + +While this component is based on +[`BBadge`](https://bootstrap-vue.js.org/docs/components/badge) from +`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component: + + - Has a different set of valid `variant`s. See the examples or props + documentation for those values. + - Always sets the `pill` prop of the underlying `BBadge` to `true`. Any passed + in `pill` prop value is ignored. + - Does _not_ scale itself to match the size of its immediate parent, like + `BBadge` does. diff --git a/src/components/base/badge/badge.scss b/src/components/base/badge/badge.scss index a8df0960cc..f8d78be9ef 100644 --- a/src/components/base/badge/badge.scss +++ b/src/components/base/badge/badge.scss @@ -1,51 +1,125 @@ -@import './badge-neutral'; -@import './badge-info'; -@import './badge-success'; -@import './badge-warning'; -@import './badge-danger'; +@mixin gl-badge-variant( + $variant, + $color, + $bg, + $hover-color, + $border-color, + $active-color, + $active-bg +) { + .gl-badge.badge-#{$variant} { + background-color: $bg; + color: $color; + } + + a.gl-badge.badge-#{$variant} { + &:hover { + color: $hover-color; + // Needed to override bootstrap's badge variant background + background-color: $bg; + box-shadow: inset 0 0 0 $gl-border-size-1 $border-color; + } + + &:focus { + color: $hover-color; + // Needed to override bootstrap's badge variant background + background-color: $bg; + @include gl-focus($gl-border-size-1, $white-transparent); + } + + &.active, + &:active { + color: $active-color; + background-color: $active-bg; + @include gl-focus($gl-border-size-1, $white-transparent); + } + } +} + +/* Basic badge styles */ .gl-badge { @include gl-display-inline-flex; @include gl-align-items-center; - @include gl-h-6; - @include gl-font-weight-bold; @include gl-font-sm; + @include gl-font-weight-normal; @include gl-line-height-normal; - @include gl-px-b6; + @include gl-py-2; + @include gl-px-3; @include gl-outline-none; - @include gl-border-solid; - @include gl-border-2; - // Sizes &.sm { - @include gl-h-5; + @include gl-py-0; } - &.lg { - @include gl-h-7; - @include gl-font-base; + &.md { + @include gl-py-2; } - &.normal { - @include gl-font-weight-normal; + &.lg { + @include gl-py-3; + @include gl-font-base; } } -a, -button { - &.gl-badge { - &:focus { - @include gl-focus-glow; - @include gl-outline-none; - } +/* Variants */ - &:hover { - @include gl-drop-shadow; - } +@include gl-badge-variant( + $variant: muted, + $color: $gray-500, + $bg: $gray-50, + $hover-color: $gray-600, + $border-color: $gray-200, + $active-color: $gray-800, + $active-bg: $gray-100 +); - &.active, - &:active { - @include gl-inset-shadow; - } - } -} +@include gl-badge-variant( + $variant: neutral, + $color: $gray-700, + $bg: $gray-100, + $hover-color: $gray-800, + $border-color: $gray-200, + $active-color: $gray-900, + $active-bg: $gray-200 +); + +@include gl-badge-variant( + $variant: info, + $color: $blue-700, + $bg: $blue-100, + $hover-color: $blue-800, + $border-color: $blue-200, + $active-color: $blue-900, + $active-bg: $blue-200 +); + +@include gl-badge-variant( + $variant: success, + $color: $green-700, + $bg: $green-100, + $hover-color: $green-800, + $border-color: $green-200, + $active-color: $green-900, + $active-bg: $green-200 +); + +@include gl-badge-variant( + $variant: warning, + $color: $orange-700, + $bg: $orange-100, + $hover-color: $orange-800, + $border-color: $orange-200, + $active-color: $orange-900, + $active-bg: $orange-200 +); + +@include gl-badge-variant( + $variant: danger, + $color: $red-700, + $bg: $red-100, + $hover-color: $red-800, + $border-color: $red-200, + $active-color: $red-900, + $active-bg: $red-200 +); diff --git a/src/components/base/badge/badge.stories.js b/src/components/base/badge/badge.stories.js index bb5b7bf16d..8ddadac705 100644 --- a/src/components/base/badge/badge.stories.js +++ b/src/components/base/badge/badge.stories.js @@ -1,14 +1,59 @@ -import { withKnobs } from '@storybook/addon-knobs'; +import { withKnobs, text, select } from '@storybook/addon-knobs'; import { documentedStoriesOf } from '../../../../documentation/documented_stories'; +import readme from './badge.md'; +import GlBadge from './badge.vue'; +import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants'; + +const components = { + GlBadge, +}; const template = ` -
- Testbadge -
+ {{ content }} `; -documentedStoriesOf('base|badge', '') +const generateProps = ({ + variant = GlBadge.props.variant.default, + size = GlBadge.props.size.default, + href = '', + content = 'TestBadge', +} = {}) => ({ + variant: { + type: String, + default: select('variant', Object.values(badgeVariantOptions), variant), + }, + size: { + type: String, + default: select('size', Object.values(badgeSizeOptions), size), + }, + href: { + type: String, + default: text('href', href), + }, + content: { + type: String, + default: text('content', content), + }, +}); + +documentedStoriesOf('base|badge', readme) .addDecorator(withKnobs) .add('default', () => ({ + components, + props: generateProps(), + template, + })) + .add('actionable warning', () => ({ + components, + props: generateProps({ href: '#foo', variant: badgeVariantOptions.warning }), + template, + })) + .add('large danger', () => ({ + components, + props: generateProps({ size: badgeSizeOptions.lg, variant: badgeVariantOptions.danger }), template, })); diff --git a/src/components/base/badge/badge.vue b/src/components/base/badge/badge.vue index dc52202d48..913e3493b9 100644 --- a/src/components/base/badge/badge.vue +++ b/src/components/base/badge/badge.vue @@ -1,16 +1,35 @@ diff --git a/src/components/base/badge/examples/badge.action.example.vue b/src/components/base/badge/examples/badge.action.example.vue index 505ae95bd1..e6350168dd 100644 --- a/src/components/base/badge/examples/badge.action.example.vue +++ b/src/components/base/badge/examples/badge.action.example.vue @@ -1,12 +1,10 @@ diff --git a/src/components/base/badge/examples/badge.basic.example.vue b/src/components/base/badge/examples/badge.basic.example.vue index e45da4c80a..51e26ff06b 100644 --- a/src/components/base/badge/examples/badge.basic.example.vue +++ b/src/components/base/badge/examples/badge.basic.example.vue @@ -1,3 +1,3 @@ diff --git a/src/components/base/badge/examples/badge.button.example.vue b/src/components/base/badge/examples/badge.button.example.vue index f56fb6ba32..9d0db29f43 100644 --- a/src/components/base/badge/examples/badge.button.example.vue +++ b/src/components/base/badge/examples/badge.button.example.vue @@ -1,7 +1,8 @@ diff --git a/src/components/base/badge/examples/badge.scaling.example.vue b/src/components/base/badge/examples/badge.scaling.example.vue deleted file mode 100644 index 9cc9dedf81..0000000000 --- a/src/components/base/badge/examples/badge.scaling.example.vue +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/src/components/base/badge/examples/badge.sizes.example.vue b/src/components/base/badge/examples/badge.sizes.example.vue new file mode 100644 index 0000000000..c83b479ec7 --- /dev/null +++ b/src/components/base/badge/examples/badge.sizes.example.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/base/badge/examples/badge.variants.example.vue b/src/components/base/badge/examples/badge.variants.example.vue index bf154923f2..2709fc8018 100644 --- a/src/components/base/badge/examples/badge.variants.example.vue +++ b/src/components/base/badge/examples/badge.variants.example.vue @@ -1,12 +1,10 @@ diff --git a/src/components/base/badge/examples/index.js b/src/components/base/badge/examples/index.js index 87baa0bc53..08484a0311 100644 --- a/src/components/base/badge/examples/index.js +++ b/src/components/base/badge/examples/index.js @@ -1,6 +1,6 @@ import BadgeBasicExample from './badge.basic.example.vue'; +import BadgeSizesExample from './badge.sizes.example.vue'; import BadgeVariantsExample from './badge.variants.example.vue'; -import BadgeScalingExample from './badge.scaling.example.vue'; import BadgeActionableExample from './badge.action.example.vue'; import BadgeButtonExample from './badge.button.example.vue'; @@ -21,10 +21,10 @@ export default [ component: BadgeVariantsExample, }, { - id: 'badge-scaling', - name: 'Scaling', - description: 'Automatic Scaling of Badges', - component: BadgeScalingExample, + id: 'badge-sizes', + name: 'Sizes', + description: 'Different Badge Sizes', + component: BadgeSizesExample, }, { id: 'badge-actions', diff --git a/src/scss/components.scss b/src/scss/components.scss index c2d08b54c2..c85b6f3acd 100644 --- a/src/scss/components.scss +++ b/src/scss/components.scss @@ -9,6 +9,7 @@ @import '../components/base/avatar_labeled/avatar_labeled'; @import '../components/base/avatar_link/avatar_link'; @import '../components/base/avatars_inline/avatars_inline'; +@import '../components/base/badge/badge'; @import '../components/base/breadcrumb/breadcrumb'; @import '../components/base/datepicker/datepicker'; @import '../components/base/banner/banner'; diff --git a/src/utils/constants.js b/src/utils/constants.js index c5b1309916..8155ba1ee5 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -20,6 +20,21 @@ export const variantOptions = { dark: 'dark', }; +export const badgeSizeOptions = { + sm: 'sm', + md: 'md', + lg: 'lg', +}; + +export const badgeVariantOptions = { + muted: 'muted', + neutral: 'neutral', + info: 'info', + success: 'success', + warning: 'warning', + danger: 'danger', +}; + export const variantCssColorMap = { info: 'gl-text-blue-500', success: 'gl-text-green-500', diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-actionable-warning-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-actionable-warning-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..179a4aba0ca48a4b5e44eed76d58e4d234ea687f GIT binary patch literal 5182 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 De68s3 literal 0 HcmV?d00001 diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-default-1-snap.png index dbc81925bc03a2c08c535b7b74e37be3c737fa27..5543c3801ab65c6b6a4fcab1537fd4227ec0d559 100644 GIT binary patch literal 5062 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 P3=9mOu6{1-oD!M<*0zlE diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-large-danger-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-large-danger-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fd8d5f001c46e0377045f893d440587e4242c1f6 GIT binary patch literal 5494 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu-TT6JYRh7`<(yxisu#A`QF}^`*!`owO8}*#=O1Iw<>RY){^K_hIsoY zroN%egRkCRxorLZS((PGmib7(U&+Ampm6cc^oE|Ekll&7TW6bx^!BwKvugSBCB!(n z%ye`A+E;I7-)Ax~JlL@9IYZ{{EcrVDZ-1GFE>?cHkGl`LK}O-#;tPlw`~{T086UypZ1AiVO?|2kLYkZY`X9bzM~8*6fTuX;xo+ z->iPtsUCXSJadmaBSXVsuk-r?{92&%YO!z3=l`+dTXK&huBy^shdaY;@+5`JP2}|29|Ge+&;6 zUhcm>dETxKetW;@XT6&2R~7Pm&wFq4Yj@3K;>BxUeeOTm)4w8j^-a47)6`%2?<5!) zK3H7HWM}{OtFicA_0=2u!)r@Db@!JA#(rvD+JExk{_p?Fum9nWi#R^-_nnRZt^Z!y zey!<#y>IC4Yv+2UUwvD>epU4S&*$#vIM}e=I@p-S!ok4sCe(j-@$Vh7H3d)aR^Pi} zVw(AFj@7?K-dVR_{pSCf9&+rn6%)gOhl_&mzH@w=@Zg?k>G7@IS(jz)SFKuA`F#I^ zb36XTUcG%kJ~Xtv?pJc@{psS@&z+sUs{Y!Ws!ylmL)G^_;(z_@bbNU9yI+~QyC1DJ z{l8QEs`355|JvX0$jv_fYisHK>3M4&>+jmJD*gNCPtx^2?(Ta0Sbk;WRP9yikB-dx z+mn86X8!I)YCbcALPN8s*Y2Jc|9Ro9eR;lTV=B_lT0MT#{tnK%mrQe^gTQ440{IRTW`Bwe(&S6SM#m+$Nf3) z{pwJE{kF1o@!|GAK1>Y_{rW(5`}NrQKTB+XzqgOtzxPRW={M2vYq9^!VtLo>*{%2E zMd?+`S1+or{T8#;v71(36R2DFFmme;*YxYY>+3Rkb8p5h-}i3QU1@js*T3Z}^3Pg6 z-&1u`eA>0o>-X(rd$)7-zwhz(p`oFNo105-|NghCZ~uo!yPkZGUw!%Ck55shmnUtk z<>%+Sw)TB(xNQBy{HsUJ|Af!|QN4cEZoAL^SN|yGeJi!A-Y*e%l$(L!_odD6``_Gb zdw)M_H{14Whfd!M6JF-G_Mc_(>nYdw@09!T%-7V)CZ_iC@^EXbpzM8rdv9$kD?MwG zniyMiI6V7RC-=7<=P&EmX77EIz5VLxePz+HpIX;nFFaozSo?TW`1NmFSFf(BdgXe( zexqOI+xcPs@$tTPWp!ume&5{swlOp`bZh2M{;Vz5G3x&hzFvLVe&@3JMNwz>KUlP} zHh<6G>Z@VV{*_O&K@!jAd|fl^`yBB%-+wYNFt9HVp350}c(>fu>Fw<7t7KnZtKaj* za{sp6=f}R5UiqVb<){3gh`XDAwC#HOHhE6A+@BBZq@^aQe z?fBsD^?$XuzFHl>COEDa;^G8*9IupY{2|p6Kl%_piL5w(ErB!&ogb_@37^+J#)kJTm}Y*(9qIVmn*L@ zUb3&w`}*zcb?@nSY`*mzTR*Gt)#X=fg6D^YhR&`ps@DDedjFb}#m}w^>;Iek*Z#tb zj9wnztGiOSUwIo|zv0}^+x%C~w4Psa?#aooi~INNZcu2Wk1>?dDS|z$kg`i zyXJB$(=CP0TdRLm2ABWd7Pa%oX44H>sj}bqh=-Ry?|b!jc1W;)On`5`|Jr?(nV=+I zmJ<`6yFJ?2zq%?kbnTBn`>&knlim9B+|#Ykrsem%eLv&!{J6!+cQ?L$ogW>Rz5nk8 zDfQo0^Y>cLc+J7U;NG=N_QsvQb-U8{+x_u)-N18i`=)8}pAS}jP`6*VYFpa8GB@2n zpUbZV9=BcS*53B&_;tNiSMUF-dMkA!2;{%V`g?ZxRX=`u^~<+wZ~s?>uKn|f*Yx?C z^s77TzdwwR?AWlX{L+(I-=46Rev*%kDn4(y-mSg;^)~JGD@sr2t@Nv}xBdBa{VL1n zbHeXeKA(T}%VfWGpZ`6a6;=EB(yqso<=4teU%Ptd^1Qg?^SW^OGy`TW>5$(y%-zVSWJ$-Sy?UR6T4JOe|Y!P$)Mx3`u5 zTal%|dZGQiyOn>{vksU4-+eCr%SreBlb5Z0HpTeZy=ANn3^tqQE!)0*)=T5#)qNdh zDNCm9dno$#^6PagW0|9~AKVk&`bxVy``XO(_rFh9U-X%;X~)2jU~iIpd)wO&1zXGi z{^;1jz3F57{k2c8*Q{WB7ab|wKQHL`y#Gy6KbCC|dB3Dq$7F}PZ}8cZ+^au|=`b+d zSiUT`JluWvw|`mYYvtcp@>!oc zRn;oXv@+Ap&wpl0F)+w1sbxQ*FMTKK?X|O4`QF~B4PSD*wq~vDC6my-b65E-pSAB_ z*0QrJW*Oz~S9S UeqOA@z`(%Z>FVdQ&MBb@0MGEA$^ZZW literal 0 HcmV?d00001 -- GitLab From a23a2ae01d159699d76d3c742650ccf539cbf6f1 Mon Sep 17 00:00:00 2001 From: Mark Florian Date: Mon, 11 May 2020 15:46:34 +0100 Subject: [PATCH 2/5] chore(badge): Recover old badge component This re-adds the old `GlBadge` component code, and renames it `GlDeprecatedBadge`, so consumers of GitLab UI can incrementally upgrade to the new `GlBadge`. That is, consuming applications can write: import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui'; --- documentation/components_documentation.js | 1 + index.js | 1 + .../deprecated_badge/badge.documentation.js | 11 +++++ .../base/deprecated_badge/badge.stories.js | 14 ++++++ .../base/deprecated_badge/badge.vue | 16 +++++++ .../examples/badge.action.example.vue | 12 ++++++ .../examples/badge.basic.example.vue | 3 ++ .../examples/badge.button.example.vue | 7 +++ .../examples/badge.scaling.example.vue | 9 ++++ .../examples/badge.variants.example.vue | 12 ++++++ .../base/deprecated_badge/examples/index.js | 43 +++++++++++++++++++ 11 files changed, 129 insertions(+) create mode 100644 src/components/base/deprecated_badge/badge.documentation.js create mode 100644 src/components/base/deprecated_badge/badge.stories.js create mode 100644 src/components/base/deprecated_badge/badge.vue create mode 100644 src/components/base/deprecated_badge/examples/badge.action.example.vue create mode 100644 src/components/base/deprecated_badge/examples/badge.basic.example.vue create mode 100644 src/components/base/deprecated_badge/examples/badge.button.example.vue create mode 100644 src/components/base/deprecated_badge/examples/badge.scaling.example.vue create mode 100644 src/components/base/deprecated_badge/examples/badge.variants.example.vue create mode 100644 src/components/base/deprecated_badge/examples/index.js diff --git a/documentation/components_documentation.js b/documentation/components_documentation.js index 475b2fb6af..8a1f80e564 100644 --- a/documentation/components_documentation.js +++ b/documentation/components_documentation.js @@ -26,6 +26,7 @@ export { default as GlColumnChartDocumentation } from '../src/components/charts/ export { default as GlDiscreteScatterChartDocumentation } from '../src/components/charts/discrete_scatter/discrete_scatter.documentation'; export { default as GlSkeletonLoadingDocumentation } from '../src/components/base/skeleton_loading/skeleton_loading.documentation'; export { default as GlBadgeDocumentation } from '../src/components/base/badge/badge.documentation'; +export { default as GlDeprecatedBadgeDocumentation } from '../src/components/base/deprecated_badge/badge.documentation'; export { default as GlDeprecatedButtonDocumentation } from '../src/components/base/deprecated_button/deprecated_button.documentation'; export { default as GlButtonDocumentation } from '../src/components/base/button/button.documentation'; export { default as GlLinkDocumentation } from '../src/components/base/link/link.documentation'; diff --git a/index.js b/index.js index 0cdb10454a..5305f446bc 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,7 @@ export { default as GlProgressBar } from './src/components/base/progress_bar/pro export { default as GlToken } from './src/components/base/token/token.vue'; export { default as GlSkeletonLoading } from './src/components/base/skeleton_loading/skeleton_loading.vue'; export { default as GlBadge } from './src/components/base/badge/badge.vue'; +export { default as GlDeprecatedBadge } from './src/components/base/deprecated_badge/badge.vue'; export { default as GlBanner } from './src/components/base/banner/banner.vue'; export { default as GlDeprecatedButton } from './src/components/base/deprecated_button/deprecated_button.vue'; export { default as GlButton } from './src/components/base/button/button.vue'; diff --git a/src/components/base/deprecated_badge/badge.documentation.js b/src/components/base/deprecated_badge/badge.documentation.js new file mode 100644 index 0000000000..5c263cd7e0 --- /dev/null +++ b/src/components/base/deprecated_badge/badge.documentation.js @@ -0,0 +1,11 @@ +import examples from './examples'; + +export default { + examples, + bootstrapComponent: 'b-badge', + bootstrapPropsInfo: { + variant: { + enum: 'variantOptions', + }, + }, +}; diff --git a/src/components/base/deprecated_badge/badge.stories.js b/src/components/base/deprecated_badge/badge.stories.js new file mode 100644 index 0000000000..fe5527af7c --- /dev/null +++ b/src/components/base/deprecated_badge/badge.stories.js @@ -0,0 +1,14 @@ +import { withKnobs } from '@storybook/addon-knobs'; +import { documentedStoriesOf } from '../../../../documentation/documented_stories'; + +const template = ` +
+ Testbadge +
+ `; + +documentedStoriesOf('base|deprecated-badge', '') + .addDecorator(withKnobs) + .add('default', () => ({ + template, + })); diff --git a/src/components/base/deprecated_badge/badge.vue b/src/components/base/deprecated_badge/badge.vue new file mode 100644 index 0000000000..dc52202d48 --- /dev/null +++ b/src/components/base/deprecated_badge/badge.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/base/deprecated_badge/examples/badge.action.example.vue b/src/components/base/deprecated_badge/examples/badge.action.example.vue new file mode 100644 index 0000000000..7249e663f8 --- /dev/null +++ b/src/components/base/deprecated_badge/examples/badge.action.example.vue @@ -0,0 +1,12 @@ + diff --git a/src/components/base/deprecated_badge/examples/badge.basic.example.vue b/src/components/base/deprecated_badge/examples/badge.basic.example.vue new file mode 100644 index 0000000000..4102233053 --- /dev/null +++ b/src/components/base/deprecated_badge/examples/badge.basic.example.vue @@ -0,0 +1,3 @@ + diff --git a/src/components/base/deprecated_badge/examples/badge.button.example.vue b/src/components/base/deprecated_badge/examples/badge.button.example.vue new file mode 100644 index 0000000000..8d1552637c --- /dev/null +++ b/src/components/base/deprecated_badge/examples/badge.button.example.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/base/deprecated_badge/examples/badge.scaling.example.vue b/src/components/base/deprecated_badge/examples/badge.scaling.example.vue new file mode 100644 index 0000000000..09fe27dada --- /dev/null +++ b/src/components/base/deprecated_badge/examples/badge.scaling.example.vue @@ -0,0 +1,9 @@ + diff --git a/src/components/base/deprecated_badge/examples/badge.variants.example.vue b/src/components/base/deprecated_badge/examples/badge.variants.example.vue new file mode 100644 index 0000000000..b6c0fe08bc --- /dev/null +++ b/src/components/base/deprecated_badge/examples/badge.variants.example.vue @@ -0,0 +1,12 @@ + diff --git a/src/components/base/deprecated_badge/examples/index.js b/src/components/base/deprecated_badge/examples/index.js new file mode 100644 index 0000000000..ec17e6c491 --- /dev/null +++ b/src/components/base/deprecated_badge/examples/index.js @@ -0,0 +1,43 @@ +import BadgeBasicExample from './badge.basic.example.vue'; +import BadgeVariantsExample from './badge.variants.example.vue'; +import BadgeScalingExample from './badge.scaling.example.vue'; +import BadgeActionableExample from './badge.action.example.vue'; +import BadgeButtonExample from './badge.button.example.vue'; + +export default [ + { + name: 'Basic', + items: [ + { + id: 'deprecated-badge-basic', + name: 'Basic', + description: 'Basic Badge', + component: BadgeBasicExample, + }, + { + id: 'deprecated-badge-variants', + name: 'Variants', + description: 'Different Badge Variants', + component: BadgeVariantsExample, + }, + { + id: 'deprecated-badge-scaling', + name: 'Scaling', + description: 'Automatic Scaling of Badges', + component: BadgeScalingExample, + }, + { + id: 'deprecated-badge-actions', + name: 'Actionable', + description: 'Badges with Actions', + component: BadgeActionableExample, + }, + { + id: 'deprecated-badge-button', + name: 'Inside Button', + description: 'Show Badge inside Button', + component: BadgeButtonExample, + }, + ], + }, +]; -- GitLab From c10564c5b562130f75d64805eddb3705ebed59aa Mon Sep 17 00:00:00 2001 From: Mark Florian Date: Mon, 11 May 2020 18:37:22 +0100 Subject: [PATCH 3/5] chore(badge): Change default to muted As discussed in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356#note_337466265 --- src/components/base/badge/badge.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/base/badge/badge.vue b/src/components/base/badge/badge.vue index 913e3493b9..69d1b5debc 100644 --- a/src/components/base/badge/badge.vue +++ b/src/components/base/badge/badge.vue @@ -18,7 +18,7 @@ export default { }, variant: { type: String, - default: badgeVariantOptions.neutral, + default: badgeVariantOptions.muted, validator(value) { return badgeVariantOptions[value] !== undefined; }, -- GitLab From fac6d424c17f7ff6d45b79c313f55818073b6d8c Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Mon, 11 May 2020 18:09:11 +0000 Subject: [PATCH 4/5] chore: update snapshots --- ...e-storyshots-base-badge-default-1-snap.png | Bin 5062 -> 4962 bytes ...s-base-deprecated-badge-default-1-snap.png | Bin 0 -> 4524 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-deprecated-badge-default-1-snap.png diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-default-1-snap.png index 5543c3801ab65c6b6a4fcab1537fd4227ec0d559..adaf63fd1bd1ba9746b8cd3e196737d12c7bca9e 100644 GIT binary patch delta 1862 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 diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-deprecated-badge-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-deprecated-badge-default-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dbc81925bc03a2c08c535b7b74e37be3c737fa27 GIT binary patch literal 4524 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu@cWder40dUYZn*=D;!g5THw*sw5Z7`AaIpRLP)?IjwDf0 z1Bs~;I|Nvkw=6iQ85G!};VckxOe2ZQLx5euXqqDHsU3SGa{W5C76tv97d1~kGi=i} zyZ?Vn@BZC%-M~z$*Nu^ZL1Tu|O=boLhV!yaEDQ`Q1Qi$<9L`=*vHX7QiS~50&+on7 z#hctz{<_v&_h#bbly`C`?KZ1bOEEA+l=hyTZ7=n<{#r`^#!oZK12*0NHrbYyfnm+8 zWi?+nos>&_`lyD1;Xs%1)3)7e)h$!IKQl5gXrH^nF8BBRTyy!EIXnMd`k(Op@}%s% z_vG=7 zowT<%mD&C5!xK||$#3^-Qa(M)oz(wkR?NqRAJ3nUQU7_DeX{Fu)%_Luo36b&{Lg=% z)z9OBC!LS0iOYQY^4=n6`jdU~`T4RRdMDqytC!cQ{rr)4@YoR@Qo7gkzMi+^`-h)r z(^c-@FyHy$S<3Cnlh>L{#Akn&Jh}3>TKK(bXRIoJd{y(DC#74R$H1^4-HCD2`86qD zuTC=lZ?Q-J$?xlGyZ4*ieDd?~KNZV__9wp4>g{tU?|Jnlb$$7_uP5)nmrr`U@c1O# z?OyBlD$lI@Q*iRSEx&qw?1VG(ENkl4>rURd@kx(8&-bi3RZo9JdH2#)>&flw zE7L%pw)Ni2{$&5mjn6jh{cvIV`}&W&PQL#?b56z00?8}4w|mRgCROZwxG9fs|MP{3 zzprRiCIoJJ_$6iW%ab$T`+U2hGjrdMNo)4&NohX86HE+(f zp3ixATR!I7e@O<0if=v|4teznH}<`=KAHdT-~8kDe^);#7FV&(pC$8o*OMF9)tARl z)v3vO`8s#cw+*qmI+6KjpB$^6q+IU*?Vi=m@6{*u|4;h!a`9uuO)3%B;$=jPuS>>f zpWMhRCSQH<*7+Jx*d;qnPncUC{OQEwlZw{7f(6g4C+)9MnrUWQ`Tg{y-S)F{wg(nn z%{^IKuF`KmQ>QBF$M-85H*5Z;^j#HVSwlXTNm zve!=RQQi4sT8fDmU#07&ds`k}pQfs}FZG7puHa4YK2PF*_vg$rHU@?&H4%mFwlic3 z!Zuy*o)q2hS9Zg~^2-}VgL69-f8P9h()GQ+Se@d{^01-@{cY8H^D4A{Ub}j7UbLFH zyp^1y{apJyGIh6ZPm+(DUi0_UlPTJh?C)FJY%4$aCgq%eTfE0Pi-a8_uTOlQym!0j zvwEGKf379Yy&CSF7dJtswC>Zbvu)+gG5deCHZ8um={d+X$BNEmnA~(;!(n~S=ii5k zPY&Dr`|Zw3s<*aEJbH$Of#G~<@U_}|Dg7Vb+{pO#;oXG!`_gyxWS=|T9v`Ro^Y)Qz zk)h|<85q{|EX&#c5u|Fz?}raNqc^9keV3cOr}XxdT6@pD9o0#%*JwRwW?%?&OaA<< z-|hE&)0@d_Y@W$Zd9(d*ia#R*!|G)lFJ_oneLwbauI%UcQh8GK>mu`S6(s+Kg+qXWVS!r%0|SF8qLAxl zU}Rv(V&Pz52v8nXIvN6_Aut*OqaiRF0;3@?8UmvsFd71*Auv2c;B$VyeEy-rf1&ma P3=9mOu6{1-oD!M<*0zlE literal 0 HcmV?d00001 -- GitLab From 2433704c394bbf7e2ded46cc0ca9713eca1ade2a Mon Sep 17 00:00:00 2001 From: Mark Florian Date: Tue, 12 May 2020 11:51:59 +0100 Subject: [PATCH 5/5] docs(badge): Add deprecation notice --- src/components/base/deprecated_badge/badge.md | 5 +++++ src/components/base/deprecated_badge/badge.stories.js | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/components/base/deprecated_badge/badge.md diff --git a/src/components/base/deprecated_badge/badge.md b/src/components/base/deprecated_badge/badge.md new file mode 100644 index 0000000000..5530e841d7 --- /dev/null +++ b/src/components/base/deprecated_badge/badge.md @@ -0,0 +1,5 @@ +# GlDeprecatedBadge + + + +> Note: `GlDeprecatedBadge` is _deprecated_ and should not be used. It exists only to ease migration to `GlBadge`, which should be used instead. diff --git a/src/components/base/deprecated_badge/badge.stories.js b/src/components/base/deprecated_badge/badge.stories.js index fe5527af7c..6e75929d36 100644 --- a/src/components/base/deprecated_badge/badge.stories.js +++ b/src/components/base/deprecated_badge/badge.stories.js @@ -1,5 +1,6 @@ import { withKnobs } from '@storybook/addon-knobs'; import { documentedStoriesOf } from '../../../../documentation/documented_stories'; +import readme from './badge.md'; const template = `
@@ -7,7 +8,7 @@ const template = `
`; -documentedStoriesOf('base|deprecated-badge', '') +documentedStoriesOf('base|deprecated-badge', readme) .addDecorator(withKnobs) .add('default', () => ({ template, -- GitLab