Share > OG Share Meta Data #552

rockymountainhigh1943 · 2018-03-29T04:17:52Z

No description provided.

…new component package

…" or "False" instead of "1" and blank

…ss method

…only works outside an iframe)

…nd validation, updated docs demo

…ect state

…page

sghoweri · 2018-04-02T20:40:20Z

packages/components/bolt-share/README.md

@@ -8,6 +8,27 @@ npm install @bolt/components-share
 ## Description:
 The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

+## Share Link Notes:


@rockymountainhigh1943 could you include links to the Facebook, Twitter, & LinkedIn resources for the info below?

sghoweri · 2018-04-02T20:40:39Z

packages/components/bolt-share/package.json

-    "@bolt/components-icon": "^1.0.2",
-    "@bolt/components-link": "^1.0.2",
-    "@bolt/core": "^1.0.2"
+    "@bolt/core": "^1.0.0-rc.9",


todo: bump to latest Bolt version when mergin in

sghoweri · 2018-04-02T20:53:46Z

apps/pattern-lab/src/_meta/_00-head.twig

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
+    <title>Bolt Design System</title>
+
+    <!-- Default OG Tag examples -->


@rockymountainhigh1943 can you move this to an include we can pull in?

Basic gut check here is can we include + configure in say, the docs site without having to manually copy and paste this chunk of code in?

sghoweri · 2018-04-02T20:54:30Z

apps/pattern-lab/src/_patterns/02-components/share/05-share.twig

@@ -1,21 +1,22 @@
-<div class="demo--share">
+<div style="margin: 0 auto; width: 150px; padding: 25rem 0 0;">


@rockymountainhigh1943 can we use utility classes here as a good best practice?

@sghoweri -- I like the idea, but I think we should create a ticket where we go through all demos and swap inline styles for utility classes (since this has been the approach we've used all along while creating demos). Another thought is that no one will really see this markup as these are only intended for demo purposes, but I totally understand wanting to "drink our own cool-aid".

Also -- if we have utility classes for things like margin and padding (I've seen spacing?) -- shouldn't we add these under Styleguide > Utilities in PL?

It's a helluva lot easier to make progress on something by incrementally chipping away at it rather than a giant push to fix everything all at once. ;)

Sure, eating our own dog food is important, however by larger strategy here is actually 4-fold (regardless on if someone is going to see our code for this or not -- these still apply):

It lets us continuously validate what sorts of UI problems can get solved via utility classes alone (vs if it's not a Component, sorry!)

It allows us to continuously test to make sure our utility classes continue to work as expected

It builds up experience across the team so anyone can better provide support and guidance

It forces us to evaluate and reevaluate the API / syntax so we can improve over time

sghoweri · 2018-04-02T20:59:13Z

packages/components/bolt-copy-to-clipboard/copy-to-clipboard.schema.yml

@@ -10,6 +10,10 @@ properties:
    type: string
    description: The text to use as the succesful copy text
    default: Copied!
+  iconSize:


@rockymountainhigh1943 wouldn't this technically just be using the full set of icons available to the icon component?

The copy to clipboard component very purposefully only uses 2 icons. I wouldn't think we would open this up to allow for any icon to be passed, which is why I didn't pass along all options. Let me know if that doesn't make any sense.

sghoweri · 2018-04-02T21:03:11Z

packages/components/bolt-share/src/share.scss

+    pointer-events: none;
+  }
+  .c-bolt-link__icon [name='facebook-solid'] {


@rockymountainhigh1943 @theSadowski @mikemai2awesome @joekarasek @EvanLovely as a follow-up todo after we merge this in, we need to chat about how best to handle these sorts of use cases (contextual selectors) -- ie. how do we need to update the Icon component to allow for this sort of thing in a decoupled way.

Add a custom class per icon that gets auto-generated for example?

sghoweri · 2018-04-02T21:03:48Z

packages/components/bolt-share/src/share.scss

+  }
+
+  .c-bolt-block-list__item {


@rockymountainhigh1943 same with these: need to follow up on how best do we handle this without directly selecting one component inside another

sghoweri · 2018-04-02T21:04:24Z

packages/components/bolt-share/src/share.standalone.js

+} from '@bolt/core';
+
+@define
+export class BoltShare extends withHyperHTML() {


Follow up todo: update to use updated HyperHTML renderer once #561 is merged in

sghoweri · 2018-04-02T21:05:01Z

packages/components/bolt-share/src/share.twig

+        position: "before",
+        size: 'medium'
+      },
+      attributes: create_attribute(imageAttributes | default({})).addClass('js-bolt-share__'~source.name).setAttribute('target',sourceTarget)


@rockymountainhigh1943 can you double check to make sure we're pulling in the correct attributes name here? Shouldn't imageAttributes instead be attributes?

Done! Thank you for catching that!

sghoweri · 2018-04-02T21:05:49Z

packages/components/bolt-share/src/share.twig

-      spacing: "none"
-    } only %}
+        content: include ("@bolt-components-block-list/block-list.twig", {
+        "contentItems" : items


@rockymountainhigh1943 can we rename the block-list component to take in items instead of contentItems?

sghoweri

@rockymountainhigh1943 just a couple super tiny things to check out - once those are banged out I think this is good to merge in -- a couple things to follow-up on after all this is done (architecture stuff mostly) -- very nice job!!

…ags to readme

…ia channel

bolt-bot · 2018-04-03T00:28:31Z

⚡ PR built on Travis and deployed a Netlify preview here:

https://5ac2ca7292226a2adadcb944--bolt-design-system.netlify.com

Commit built: b7a3fde
Travis build

rockymountainhigh1943 · 2018-04-03T00:34:45Z

@sghoweri -- This one is ready for another review! Thinking its ready to merge! :-)

sghoweri · 2018-04-03T12:30:37Z

@rockymountainhigh1943 there's a couple small bugs I'm noticing (unrelated to this PR directly) that we'll need to follow up on, but that shouldn't block getting this merged in and shipped. Nice work!!!

rockymountainhigh1943 added 30 commits March 2, 2018 13:16

Docs - 'Adding a new component' initial commit

d1f7495

Share -- Documentation updates

af533a0

Share -- Added base files/assets for new component within PL and the …

4f51c2b

…new component package

Schema Docs Templates - Updated the default value check to show "True…

d7ad343

…" or "False" instead of "1" and blank

Share - WIP main share component work

138e670

Block List - NEW component (including PL docs and demos)

18198f4

Tooltip - NEW component initial work / commit

c05a190

Tooltip - Isolated "button" type specific functionality

30dd35c

Tooltip - Added button wrappers and button/text conditional render

300d05d

Tooltip - Removed state and state handlers in favor of simple add cla…

b42d08d

…ss method

Tooltip - Added more props and minor adjustments

cc9ea41

Tooltip - Completed added props for MVP

6568c0a

Tooltip - Completed basic demos, schema, and updated readme

d08477c

Tooltip - Schema validation added

0217746

Tooltip - CSS keyframe animations for bounceDown and bounceUp

266b327

Merge branch 'master' into feature/BK-21--share

7e00836

added missed files to commit

58fa51a

Tooltip - Bring in new work in bolt-shadow and bolt-z-index

89dbaf2

Tooltip - Added fix for different toggle text lengths

a73f557

Tooltip - Added styling fixes IE11 and FireFox

9d059e6

Share -- Updated param name

27a9c7d

Copy to Clipboard - WIP structure, styling, and JS

107400a

Copy to Clipboard - Complete structure, styling, and JS

5ae61d0

Copy to Clipboard - added conditional message if inside iframe (demo …

b1fb504

…only works outside an iframe)

Copy to Clipboard - added comments to JS

c1537cf

Copy to Clipboard - Added default values to twig file, added schema a…

6f91f4e

…nd validation, updated docs demo

Merged master, fixed conflict, updated package.json files

9199b63

Share - updated package.json dependencies

b65a8eb

Share - updated package.json dependencies

4d001ea

Tooltip - Added transform key to button trigger

b947937

rockymountainhigh1943 added 4 commits March 31, 2018 15:27

Share -- completed testing z-index issues and put demo back into corr…

c560a32

…ect state

Share -- completed initial build and styling of inline share mode

7c69969

Copy to Clipboard / Share - updated package.json dependencies

8355177

Bolt Site - Updated available component inventory (chip list) on home…

2f5004f

…page

sghoweri mentioned this pull request Apr 2, 2018

WIP: Share Component Base Work #550

Closed

rockymountainhigh1943 added 2 commits April 2, 2018 13:30

Merge branch 'master' into feature/BDS-105--og-share-meta-data

6592177

Share -- Removed unused js file (for time being)

0e524eb

sghoweri suggested changes Apr 2, 2018

View reviewed changes

sghoweri reviewed Apr 2, 2018

View reviewed changes

Share -- fixed incorrect imageAttributes reference

d0236ab

sghoweri reviewed Apr 2, 2018

View reviewed changes

rockymountainhigh1943 added 5 commits April 2, 2018 14:36

Share -- moved OG Tags from <head> into twig include, added example t…

fa91d9e

…ags to readme

Docs -- Added wrapper around readme to allow for links to be styled

49f9b72

Share -- Updated readme to include resource links for each social med…

b0af703

…ia channel

Block List / Share -- Updated 'contentItems' to 'items'

26cc0e5

Fixed version numbers

d530daa

sghoweri self-requested a review April 3, 2018 12:28

sghoweri approved these changes Apr 3, 2018

View reviewed changes

sghoweri merged commit 4798691 into master Apr 3, 2018

sghoweri deleted the feature/BDS-105--og-share-meta-data branch April 3, 2018 12:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Share > OG Share Meta Data #552

Share > OG Share Meta Data #552

rockymountainhigh1943 commented Mar 29, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri Apr 2, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri Apr 3, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri Apr 2, 2018

sghoweri Apr 2, 2018

sghoweri Apr 2, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri Apr 2, 2018

rockymountainhigh1943 Apr 2, 2018

sghoweri left a comment

bolt-bot commented Apr 3, 2018

rockymountainhigh1943 commented Apr 3, 2018

sghoweri commented Apr 3, 2018

		@@ -1,21 +1,22 @@
		<div class="demo--share">
		<div style="margin: 0 auto; width: 150px; padding: 25rem 0 0;">

Share > OG Share Meta Data #552

Share > OG Share Meta Data #552

Conversation

rockymountainhigh1943 commented Mar 29, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sghoweri left a comment

Choose a reason for hiding this comment

bolt-bot commented Apr 3, 2018

rockymountainhigh1943 commented Apr 3, 2018

sghoweri commented Apr 3, 2018